20

我尝试这样：

$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更改为参数：

$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();
};

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

4

6 回答 6

19

做这个：

$http({
        url: '/token',
        method: 'POST',
        data: "userName=" + $scope.username + "&password=" + $scope.password + 
              "&grant_type=password"
})
于 2014-02-24T11:50:22.947 回答
18

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

$http.post(loginAPIUrl, data,
    {headers: { 'Content-Type': 'application/x-www-form-urlencoded' }})
于 2013-12-04T22:09:10.390 回答
6

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

但是你仍然可以使用 AngularJs，你只需要改变 $http 发布的方式。如果您不介意使用 jquery 更改参数，您可以在此处尝试答案如何将数据作为表单数据而不是请求有效负载发布？希望有帮助。

于 2013-12-04T20:06:08.547 回答
2

您始终可以在浏览器中使用开发人员控制台查看发出的请求，并查看请求中的差异。

但是通过查看您的 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) {

于 2013-12-04T14:25:01.920 回答
1

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

$http.post(loginUrl, "userName=" + encodeURIComponent(email) +
                     "&password=" + encodeURIComponent(password) +
                     "&grant_type=password"
).success(function (data) {
//...
于 2015-03-24T08:41:31.430 回答
0

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

2) 记下请求数据。它不是 json 格式，它只是没有双引号的纯数据。“用户名=xxx@gmail.com&password=Test123$&grant_type=password”

3) 注意内容类型。内容类型：“应用程序/x-www-form-urlencoded”（不是内容类型：“应用程序/json”）

4）当您使用javascript发出post请求时，您可以使用以下内容：

$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 的以下屏幕截图：

邮递员请求

邮递员请求标头

于 2017-03-02T16:41:35.027 回答