使用 Active Directory 身份验证在 JavaScript 中对 Azure API 应用程序进行 API 调用

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 代码中获取访问权限？

这也与我的帖子 here 有关，我尝试通过 curl 调用获得访问权限。

Answer 1

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

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