Question

我正在创建一个用于使用IdentityServer 3的测试应用程序，并且我使用AngularJs，Angular Ui Router和oauth-ng库来创建它。我的应用程序需要在客户端使用OpenID连接授权代码流。所以我对oauth-ng库进行了很小的改动。我正在使用oauth-ng lib从IdentityServer3检索授权代码，并且我使用$ http.post（）将该代码发送到token-endpoint并获取access_token。

以下是我的代码..

的JavaScript

.controller('LoginController', function ($scope, $http, $timeout, $location) {

        var getParamsFromUrl = function(url) {
            var splitted = url.split('?');
            splitted = splitted[1].split('&');
            var params = {};

            for (var i = 0; i < splitted.length; i++) {
                var param  = splitted[i].split('=');
                var key    = param[0];
                var value  = param[1];
                params[key] = value
            }
            return params;
        };

        var getToken = function (url, data) {
            return $http.post(url, data);
        };



        if($location.absUrl().split('?')[1]) {
            $scope.params = getParamsFromUrl($location.absUrl());

            var tokenData = {};
            tokenData.grant_type = 'authorization_code';
            tokenData.code = $scope.params.code;
            tokenData.redirect_uri = 'http://localhost:8000/login.html';

            var tokenEndpoint = 'https://localhost:44333/core/connect/token';

            getToken(tokenEndpoint, tokenData)
                .then(function (data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                    console.log(headers);
                    console.log(config);
                });

        }
    });

成功检索授权代码，当我尝试连接到令牌端点时，它会在浏览器上抛出以下错误。

选项https://localhost:44333/core/connect/token b @   angular.min.js：87n @ angular.min.js:82 $ get.f @   angular.min.js：80（匿名函数）@ angular.min.js：112 $ get.n. $ eval   @ angular.min.js：126 $ get.n. $ digest @ angular.min.js：123 $ get.n. $ apply @   angular.min.js：126（匿名函数）@ angular.min.js：17e @   angular.min.js：36d @ angular.min.js：17uc @ angular.min.js：18Jd @   angular.min.js：17（匿名函数）@   angular.min.js：250n.Callbacks.j @   jquery.min.js：2n.Callbacks.k.fireWith @jquery.min.js：2n.extend.ready   @jquery.min.js：2I @jquery.min.js：2

XMLHttpRequest无法加载https://localhost:44333/core/connect/token。   No＆＃39; Access-Control-Allow-Origin＆＃39;标题出现在请求的上   资源。起源＆＃39; http://localhost:8000＆＃39;因此是不允许的   访问。响应的HTTP状态代码为405。

然后我尝试使用这行代码在app config中配置$ httpProvider ..我的配置看起来像这样。

.config(function ($locationProvider, $httpProvider) {
        $locationProvider.html5Mode(true);
        $httpProvider.defaults.withCredentials = true; // <= Added this
    });

仍然遇到同样的问题。如何从客户端修复此问题？我可以从客户端解决这个问题吗？

Answer 1

您请求的服务不允许CORS（作为响应的一部分，不会发送Access-Control）。您需要包含标题Access-Control-Allow-Origin：*作为响应的一部分。

请参阅：http://www.html5rocks.com/en/tutorials/cors/

另请参阅：http://better-inter.net/enabling-cors-in-angular-js/

Answer 2

非常确定代码授权流程适用于服务器端应用程序。你应该只使用代码授权，如果你能保守客户的秘密＆＃34;秘密＆＃34;！

他们有理由不使用隐式流吗？这样你就可以在重定向中获得令牌争夺，而不是令牌。

在此页面上是解释的流程。 http://connect2id.com/learn/openid-connect

在angularjs中使用$ http.post（）时出现CORS问题

2 个答案: