使用Active Directory身份验证在JavaScript中调用Azure API App

Question

我实现了一个Java API后端，它作为API应用程序托管在Azure中。 我通过Active Directory启用了身份验证。 在api应用程序的CORS设置中，我配置了允许来自每个源的调用，只需将星号设置为URL。

现在我想从本地AngularJS应用程序访问API。 我的角度代码如下所示：

angular.module('demo', [])
    .controller('GetDataController', function($scope, $http) {
        $scope.login = function(user){
            console.log("user: " + user, user);

            $http.defaults.useXDomain = true;
            delete $http.defaults.headers.common['X-Requested-With'];

            $http.get('http://<myapiapp>.azurewebsites.net/api/contacts').
            then(function(response) {
                $scope.greeting = response.data;
                console.log("$scope.greeting: " + $scope.greeting, $scope.greeting);
            });
        }
    });

但我仍然在控制台中收到以下错误：

XMLHttpRequest cannot load https://login.windows.net/
12141bed-36f0-4fc6-b70c-43483f616eb7/oauth2/autho…
%2Fapi%2Fcontacts%23&nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547.
Redirect from 'https://login.windows.net/12141bed-36f0-4fc6-b70c-43483f616eb7/
oauth2/autho…%2Fapi%2Fcontacts%23&
nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547' to 
'https://login.microsoftonline.com/12141bed-36f0-4fc6-b70c-43483f616eb7/
oaut…%2Fapi%2Fcontacts%23&nonce=ea6b31321cda45d6a4e881fbd0062974_20161026094547' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin'
header is present on the requested resource. 
Origin 'null' is therefore not allowed access.

那么如何从AngularJS代码获取访问权限？

这也与我在这里的帖子有关，我尝试通过curl调用访问。

Answer 1

您似乎直接在Azure AD保护的Web应用程序中生成HTTP请求。 对于此场景，您可以尝试在angularJs客户端中为js实现ADAL 。 利用adal获取身份验证令牌，当您在Angular中调用Web应用程序时，它将在HTTP请求中添加身份验证标头。

如有任何疑问，请随时告诉我。