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

Question

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

我在如何在 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);
    });

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

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

更新：正如@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

解决此问题的最佳方法是在身份验证后将令牌存储在 localStorage 中，然后使用拦截器将令牌注入您的请求标头中：

$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，所有进一步的请求都将被重定向到登录页面。