在 angularjs 中从 OAuth2 授权端点检索令牌

Question

我正在尝试将 IdentityServer 与 Angularjs 应用程序一起使用。 Angularjs 前端旨在在未经身份验证的用户尝试导航到应用程序的根 url 时调用授权端点。 app.config 有一个 resolve 属性会产生一个 routeChangeError。此事件触发重定向到 OAuth2 授权端点（在我的例子中是 IdentityServer，Asp.Net MVC 上的运行）。

baseballApp.config(['$routeProvider', '$locationProvider', '$httpProvider', function($routeProvider, $locationProvider, $httpProvider) {
    $routeProvider.when('/players', {
        resolve: {
            auth: function ($q, $rootScope) {                    
                var deferred = $q.defer();
                if ($rootScope.token) {
                    deferred.resolve();
                } else {
                    deferred.reject();
                }                    
                return deferred.promise;
            }
    },
    templateUrl: '/FrontEnd/Templates/PlayerList.html',
    controller: 'PlayerListController'        
});
$routeProvider.otherwise({ redirectTo: '/players' });

var spinnerFunction = function (data, headersGetter) {
    if (data) {
        $('#spinner').show();
        return data;
    }
};

$httpProvider.defaults.transformRequest.push(spinnerFunction);
$httpProvider.interceptors.push('authInterceptor');}]).run(['$rootScope', '$location', 'authenticationService', function ($rootScope, $location, authenticationService) {
//authenticationService.getBearerToken().then(function(data) {
//    $rootScope.token = data;
//});

debugger;

var generateRandomString = function() {
    return (Math.random().toString(16) + "000000000").substr(2, 8);
}

var nonce = generateRandomString();
var state = generateRandomString();
$rootScope.$on('$routeChangeError', function () {
   window.location = 'https://localhost:44301/identity/connect/authorize?client_id=baseballStats&redirect_uri=https%3a%2f%2flocalhost%3a44300%2f&response_type=id_token+token&scope=openid+profile+roles+baseballStatsApi&nonce=' + nonce + '&state=' + state;
});}]);

如您所见，如果我没有令牌，我将重定向到授权端点。但是，我不清楚在授权端点登录后如何检索令牌。

我指定了 return url，登录后它确实重定向到应用程序，但是我如何设置我的 angular 代码来检索令牌应该在授权端点上生成并发送回应用程序？

我见过很多人使用 angular 的不记名令牌身份验证的例子，但我还没有看到任何人使用 Angular 的 OAuth2 服务器的授权端点。在 MVC 中，有许多内置的回调来检索令牌。我正在寻找关于如何在 angular 中实现它的一些想法。

你能告诉我我做错了什么吗？

编辑

我也曾尝试在重定向 uri 中传递哈希导航标记，但从 IdentityServer 获得了 "Error unknown client"。请看下面的代码

  $rootScope.$on('$routeChangeError', function () {
   var returnUrl = encodeURIComponent('https://localhost:44300/#/players');
   window.location = 'https://localhost:44301/identity/connect/authorize?client_id=baseballStats&redirect_uri=' + returnUrl + '&response_type=id_token+token&scope=openid+profile+roles+baseballStatsApi&nonce=' + nonce + '&state=' + state;
});

有人知道为什么吗？

Answer 1

我假设您正在为您的 spa js 应用程序使用隐式流量授权？

在这种情况下，身份服务器会在您登录后将访问令牌发送回您的水疗应用程序的回调 url。使用该回调页面，您可以捕获令牌，以便在授权 header 内将其作为不记名令牌传递给您的资源服务器。

查看 Brock Allen 的这段视频，解释得很好： https://vimeo.com/131636653

顺便说一下，你应该使用 Brock 自己编写的 oidc-token-manager。它非常易于使用，并且抽象出与身份服务器的所有通信。它在 bower 上也可用，因此您可以从那里获取它。

最后，我想向您推荐我自己的水疗中心 angular 我最近一直在开发的应用程序：https://github.com/GeertHuls/SecuredApi。

它实际上使用令牌管理器来获取访问令牌，auto-refresh 它们并在整个 angular 应用程序中公开它们。

希望这会对您有所启发，以便将其与 angular 相结合。

Answer 2

我通过创建一个自定义的 ActionResult 回避了这个问题，当用户已经通过 .NET Auth cookie 登录时，它会 return 一个带有令牌的 JSON 响应，这有点老套并且看起来像这样；

    [AllowAnonymous]
    public ActionResult GetToken()
    {
        if (!User.Identity.IsAuthenticated)
        {
            Response.StatusCode = 403;
            return Json(new {message = "Forbidden - user not logged in."}, JsonRequestBehavior.AllowGet);
        }

        var claims = new ClaimsPrincipal(User).Claims.ToArray();
        var identity = new ClaimsIdentity(claims, "Bearer");
        AuthenticationManager.SignIn(identity);
        var ticket = new AuthenticationTicket(identity, new AuthenticationProperties());
        var token = Startup.OAuthOptions.AccessTokenFormat.Protect(ticket);
        return Json(new { token }, JsonRequestBehavior.AllowGet);
    }

在 angularjs 中从 OAuth2 授权端点检索令牌

Retrieving tokens from OAuth2 authorize endpoint in angularjs

javascript

asp.net-mvc

oauth-2.0

angularjs

owin