Question

我试着这样：

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password, grant_type: 'password' } }).success(function (data, status, headers, config) {
    $scope.output = data;
}).error(function (data, status, headers, config) {
    $scope.output = data;
});

然后尝试将grant_type更改为param：

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password }, params: { grant_type: 'password' } }).success(function (data, status, headers, config) {
    $scope.output = data;
}).error(function (data, status, headers, config) {
    $scope.output = data;
});

仍然可怕：{"error":"unsupported_grant_type"}

所以我做的不是AngularJS开发人员应该做的事情，使用jQuery：

var data = $('#regForm').serialize() + "&grant_type=password";
$.post('/token', data).always(showResponse);

function showResponse(object) {
    $scope.output = JSON.stringify(object, null, 4);
    $scope.$apply();
};

哪个像冠军一样...所以我的问题是：我们如何使用AngularJS $.post()复制上面的jQuery $http()调用，以便我们可以从基于OWIN中间件/令牌获取访问令牌ASP.Net Web API 2中的端点？

Answer 1

这样做：

$http({
        url: '/token',
        method: 'POST',
        data: "userName=" + $scope.username + "&password=" + $scope.password + 
              "&grant_type=password"
})

Answer 2

我认为，将标题{headers: { 'Content-Type': 'application/x-www-form-urlencoded' }添加到您的帖子请求中就可以了。它应该是这样的：

$http.post(loginAPIUrl, data,
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})

Answer 3

您收到该错误是因为OWIN OAuth提供程序的默认实现是期望对“/ Token”服务的帖子进行表单编码而不是json编码。这里有一个更详细的答案How do you set katana-project to allow token requests in json format?

但你仍然可以使用AngularJs，你只需要改变$ http帖子的制作方式。如果你不介意使用jquery来改变你的参数How can I post data as form data instead of a request payload?希望有所帮助，你可以尝试这里的答案。

Answer 4

您可以随时在浏览器中查看使用开发者控制台发出的请求，并查看请求中的差异。

但是通过查看你的jquery代码&grant_type=password正在正文中传递而不是查询字符串，因此$http调用应该是

$http({ method: 'POST', url: '/token', data: { username: $scope.username, password: $scope.password ,grant_type:password} }).success(function (data, status, headers, config) {

Answer 5

与achinth类似，但你仍然可以使用$http.post方法（+数据被转义）

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...

Answer 6

1）注意URL：“localhost：55828 / token”（不是“localhost：55828 / API / token”）

2）记下请求数据。它不是json格式，它只是没有双引号的普通数据。 “userName=xxx@gmail.com&密码= Test123 $＆安培; grant_type =密码”

3）注意内容类型。内容类型：'application / x-www-form-urlencoded'（不是Content-Type：'application / json'）

4）当您使用javascript发布帖子请求时，您可以使用以下内容：

$http.post("localhost:55828/token", 
    "userName=" + encodeURIComponent(email) +
        "&password=" + encodeURIComponent(password) +
        "&grant_type=password",
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }}
).success(function (data) {//...

请参阅Postman下面的截图：

Postman Request

Postman Request Header

如何通过AngularJS $ http从ASP.Net Web API 2获取Access Token？

6 个答案: