【问题标题】：AngularJS Components and ADAL (Active Directory Azure Library for JS)AngularJS 组件和 ADAL（用于 JS 的 Active Directory Azure 库）
【发布时间】：2018-04-02 02:26:00
【问题描述】：

我使用组件模式在 AngularJS 中使用 TypeScript 和组件路由器构建了一个 Angular 1.6 应用程序。

现在我正在尝试使用 ADAL 库和接受不记名令牌的安全 API 对 AzureAD 进行身份验证。

在我用 AngularJS 1.3 构建的当前应用程序之一中，我以非常标准的方式使用 ADAL，并使用 StateProvider 的 RequireAdLogin 属性对资源 (API) 进行身份验证：

  var homeState = {
     url: "/",
     requireADLogin: true
  };

这很好用，但现在我正在使用带有 angular-ui-router 的组件路由器（带有 @Types/angular-ui-router）：

import * as angular from 'angular';
import { State, StateProvider } from 'angular-ui-router';
import { MyComponent } from './my.component';
import { NavService, NavItem } from './../../common/nav/nav.service';
import { MediaService } from "./MediaService .service";

function routeConfig($stateProvider: StateProvider) {
  "ngInject";

  $stateProvider
    .state('app.media', {
        url: '/media',
        component: 'media'
    });

问题是，我无法获取 API 来接收令牌。麻烦的第一个迹象是当我注意到 .IComponentOptions 类型和状态类型中缺少 requireADLogin 属性时，所以我不能这样做：

.state('app.media', {
    url: '/media',
    component: 'media',
    requireADLogin: true // THIS DOES NOT COMPILE!
});

然后我做了一些研究，发现了这个相当令人沮丧的帖子：

GitHub ADAL 讨论：

https://github.com/AzureAD/azure-activedirectory-library-for-js/issues/283

不要走这条路。组件路由器已弃用https://docs.angularjs.org/guide/component-router

Doh！好吧，这对我来说不是什么好消息，至少可以说，因为现在我似乎被阻止了。我觉得应该有一些解决方法，但我看不到。

我认为编写自定义 HTTP 拦截器可能是一种解决方案，因为我只需要将存储在存储中的不记名令牌提供给 API 的 HTTP 标头。另外，我一直在查看用于 JS 的 MS 身份验证库：

https://github.com/AzureAD/microsoft-authentication-library-for-js

但这对于我的需求来说似乎太低了。

我应该提一下，要让 ADAL 的 AngularJS 库与 TypeScript 和这种新的组件模式一起工作是相当困难的。似乎首选路径是 Angular 2.0，但此时在 NG2 中重写是不可行的，因为该项目有时间限制。

【问题讨论】：

标签： javascript angularjs adal bearer-token

【解决方案1】：

我已经通过从存储机制（在我的情况下为浏览器会话存储）中手动提取不记名令牌并将其添加到我的网络服务上的每个请求来解决了这个问题：

var accessToken = sessionStorage.getItem("adal.access.token.key" +
         sessionStorage.getItem("adal.token.keys").replace("|", ""));

 configObj.headers = { 'Authorization': 'Bearer ' + accessToken }

然后我将该配置对象传递给每个请求，并且令牌就在那里 - API 接受它并且每个人都很高兴。

this.$http.get(url, configObj).then(resolveData, errorCall);

【讨论】：

【解决方案2】：

对于尚未实施您的解决方法的人来说，也可以作为替代解决方案：

我们注意到一个类似的问题，其中一个 Web 应用程序会包含带有不记名令牌的安全标头，但即使配置相同，另一个 Web 应用程序也不会。最终唯一的区别是 js 的 ADAL 版本。

使用时：

https://secure.aadcdn.microsoftonline-p.com/lib/1.0.16/js/adal.min.js

我们不会获得自动附加到 API 请求的安全令牌

使用时：

https://secure.aadcdn.microsoftonline-p.com/lib/1.0.12/js/adal.min.js

我们将获得附加到向安全端点发出的所有 API 请求的正确不记名令牌。

我们意识到这个问题发生在 1.0.14 版本中

【讨论】：