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

Retrieving tokens from OAuth2 authorize endpoint in angularjs

本文关键字：检索 令牌 端点 授权 angularjs 中的 OAuth2      更新时间：2023-09-26

我正在尝试使用IdentityServer与Angularjs应用程序。当一个未经身份验证的用户试图导航到应用程序的根url时，Angularjs的前端会调用授权端点。app.config有一个resolve属性，它会生成一个routeChangeError。此事件触发重定向到OAuth2授权端点(在我的例子中是IdentityServer)，在Asp上运行。净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;
});}]);

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

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

我见过很多人在angular中使用承载令牌身份验证的例子，但我还没见过有人在angular中使用OAuth2服务器的授权端点。在MVC中，有许多内建的回调函数来检索令牌。我正在寻找一些关于如何实现这个角的想法。

你能给我提示一下我做错了什么吗?

编辑

我还尝试在重定向uri中传递哈希导航标签，但从IdentityServer获得"错误未知客户端"。请参阅下面的代码

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

有人知道为什么吗?

我假设你正在使用隐式流量授予您的spa js应用程序?

在这种情况下，在你登录后，身份服务器将把访问令牌发送回spa应用程序的回调url。使用该回调页面，你可以捕获到令牌，以便将其作为承载令牌在授权头内传递给资源服务器。

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

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

最后，我想给你指出我最近一直在开发的spa angular应用:https://github.com/GeertHuls/SecuredApi.

它实际上使用令牌管理器来获取访问令牌，自动刷新它们，并在整个angular应用中公开它们。

我通过创建一个自定义ActionResult来回避这个问题，当用户已经通过。net认证cookie登录时，它将返回一个带有令牌的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);
    }
相关文章：