Oauth 2.0 基于令牌的身份验证 AngularJS（初学者）

Question

我浏览了多个文档，包括 ng-cordova and oauth-ng，但我仍然无法在 angularjs/Ionic[=40= 中找到处理基于 基本令牌的身份验证的任何资源]

我在如何在 angularjs
中进行 curl 调用时遇到了问题
curl -X POST -vu sampleapp:appkey http://sampleurl/oauth/token -H "Accept: application/json" -d "password=pwd&username=sampleuname&grant_type=password&scope=read%20write&client_secret=appkey&client_id=sampleapp"

我正在这样做，它给我一个 401 错误。 但是 curl 调用工作得很好。

$scope.login = function() { $http({ method: "post", url: "http://sampleurl/oauth/token", data: "client_id=" + clientId + "&client_secret=" + clientSecret + "password=pwd&username=sampleuser&grant_type=password" + "&scope=read%20write", withCredentials: true, headers: { 'Content-Type': 'application/json; charset=utf-8' } }) .success(function(data) { accessToken = data.access_token; $location.path("/secure"); }) .error(function(data, status) { alert("ERROR: " + data); }); }

我意识到一旦我得到令牌，我必须做类似于
的事情
$http.get('http://apiurl/api/v1/users', {headers: { Authorization: ' Token api_key=xxxxxxxxxxxxxxxxxxxxxxxxxxxx'}}) .then(function(response) { service.currentUser = response.data.user; console.log(service.currentUser); });

但到目前为止，我一直无法找到一种方法来调用服务器并将访问令牌保存在我的本地存储中。互联网上的所有资源主要面向第 3 方登录（google、facebook、twitter 等）或 JWT 令牌。

我在这方面还很陌生，但我发现我需要担心密码授予流程，其中用户向消费者提供 his/her 凭据，消费者将这些凭据交换为访问和刷新令牌.我仍然不相信我做出了正确的决定。

更新：正如@DanielCottone 在下面的回答中提到的那样，oauth-ng 似乎是一个很好的解决方案，但我所看到的他们的文档让我感到困惑，因为我想也将用户名和密码发送到 url，但据我所知，样本没有实现它或有相关规定？

这是他们文档中的内容：

<oauth site="http://oauth-ng-server.herokuapp.com" client-id="d6d2b510d18471d2e22aa202216e86c42beac80f9a6ac2da505dcb79c7b2fd99" redirect-uri="http://localhost:9000" profile-uri="http://oauth-ng-server.herokuapp.com/api/v1/me" scope="public"> </oauth>

再一次，这是我第一次尝试任何类型的集成，我认为该呼叫将随其发送凭据是有道理的吗？那我要怎么寄呢？

Answer 1

解决这个问题的最好方法是在身份验证后将令牌存储在本地存储中，然后使用拦截器将令牌注入到您的请求中headers:

$http认证承诺（需要注入$localStorage）

.success(function(data) {
  $localStorage.accessToken = data.access_token;
  $location.path("/secure");
})

身份验证拦截器

.factory('AuthInterceptor', function ($q, $localStorage, $rootScope) {

  return {
    request: function (config) {
      if ($localStorage.access_token) {
        config.headers['Authorization'] = 'Token api_key=' + $localStorage.token;
      }
      return config;
    },

    responseError: function (response) {
      if (response.status === 401 || response.status === 403) {
        delete $localStorage.access_token;
        // Do some kind of redirect to login page here...
      }
      return $q.reject(response);
    }
  };
});

要注销，您只需从 localStorage 中删除令牌，如果您从 API.

获得 401 或 403，所有进一步的请求将被重定向到登录页面

Oauth 2.0 基于令牌的身份验证 AngularJS（初学者）

Oauth 2.0 token based authentication AngularJS (Beginner)

oauth

access-token

angularjs

cordova

ionic-framework