Question

我正在尝试将IdentityServer与Angularjs应用程序一起使用。当未经身份验证的用户尝试导航到应用程序的根URL时，Angularjs前端用于调用授权端点。 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;
});}]);

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

我已经指定了一个返回URL，并且在登录后它会重定向到应用程序，但是如何设置我的角度代码来检索应该在Authorize端点上生成并发送回应用程序的令牌？

我见过很多人使用角度承载令牌认证的例子，但是我没有看到有人使用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;
});

有人知道为什么吗？

Answer 1

我认为您正在为spa js应用程序使用隐式流程授予？

在这种情况下，身份服务器在您登录后，会将访问令牌发送回您的spa应用的回拨网址。使用该回调页面，您可以捕获到令牌，以便将其作为承载令牌传递到授权标头中的资源服务器。

查看Brock Allen的视频，非常好解释： https://vimeo.com/131636653

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

最后，我想指出我最近一直在努力的我自己的spa角度应用程序：https://github.com/GeertHuls/SecuredApi。

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

希望这会激发你一点点，以便将它与角度整合。

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

1 个答案: