javascript - 无法让 ADAL 拦截器在 Angular 中工作

Question

我们正在为我们的应用程序使用 azure 事件目录身份验证。我已将其包含在 SPA 中，并且能够使其用于登录。我获得了一个 oauth token ，并且能够存储并查看它。

Microsoft 的 ADAL-Angular.js 提供了一个拦截器，以便可以将 token 添加到所有 $http 调用中。应该不需要更改 SPA 即可使用它。我似乎无法让它发挥作用。

我在 app.js 中注册提供程序并将其推送到 $httpprovider(即使 ADAL-Angular 确实如此)。这是代码。

       var connectionsApp = angular.module('app',
['ngRoute', 'ngResource', 'ngCookies',
    'tc.views', 'tc-flightProcessing', 'tc-agent',  'ui.bootstrap', 'ui.tab.scroll', 'AdalAngular'])
   .run(run);
connectionsApp.config(['scrollableTabsetConfigProvider', '$httpProvider', 'adalAuthenticationServiceProvider', function(scrollableTabsetConfigProvider,$httpProvider, adalAuthenticationServiceProvider){
  scrollableTabsetConfigProvider.setShowTooltips (true);
  scrollableTabsetConfigProvider.setTooltipLeftPlacement('bottom');
  scrollableTabsetConfigProvider.setTooltipRightPlacement('left');
    adalAuthenticationServiceProvider.init(
         {
            tenant: 'xxxxxxxxx-9fafd38f483f',
            clientId: 'xxx'
         }, $httpProvider);
    $httpProvider.interceptors.push('ProtectedResourceInterceptor');
 }]); 

这是服务调用。

               var getDelayCodes = function () {
                if (isPromisePending) {
                    return deferred.promise;
                }
                deferred = $q.defer();
                isPromisePending = true;
                debugger;
                $http({
                    method: 'GET',
                    url: envService.endPoint + 'delaycode'
                    headers: {'Content-Type': 'application/json'}
                })
                .then(function successCallback(response){
                    result = response.data;
                    isPromisePending = false;
                    deferred.resolve(result);
                },
                 function errorCallback(response) {
                     isPromisePending = false;
                    deferred.reject(response.data);
                });
                return deferred.promise;

如果我手动设置 header ，它可以工作，但我不想在每个服务中都这样做。这有效:

$http.defaults.headers.post.Authorization = "Bearer " + sessionStorage.getItem("adal.idtoken");
$http.defaults.headers.common.Authorization = "Bearer " + sessionStorage.getItem("adal.idtoken");

预先感谢您的帮助。

Answer 1

adal.js 可能无法识别您将请求发送到的 URL 作为“后端请求”，因此它不会尝试自动注入(inject) token 。请参阅此处的逻辑:https://github.com/AzureAD/azure-activedirectory-library-for-js/blob/dev/lib/adal.js#L843-L844

code sample使用相对 URL，应该可以正常工作。

如果您不想使用 adal.js 的启发式方法，您应该能够通过 endpoints 参数显式添加您的 URL:https://github.com/Azure-Samples/active-directory-angularjs-singlepageapp-dotnet-webapi/blob/master/TodoSPA/App/Scripts/app.js#L21-L26