AngularJS组件和ADAL(JS的Active Directory Azure库)

时间:2017-10-20 20:52:07

标签: javascript angularjs adal bearer-token

我使用Component模式在AngularJS中使用TypeScript和Component Router构建了一个角度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

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

我应该提一下,让AngularJS使用ADAL的Angular库来处理TypeScript和这个新的组件模式是相当困难的。看起来首选的路径是Angular 2.0,但是NG2中此时的重写是不可行的,因为这个项目是时间框。

2 个答案:

答案 0 :(得分:1)

我通过从存储机制(在我的案例中是浏览器会话存储)中手动提取承载令牌并在我的Web服务上的每个请求中添加它来解决此问题:

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);

答案 1 :(得分:0)

另外,对于尚未实施解决方法的人来说,也可以作为替代解决方案:

我们注意到一个类似的问题,其中一个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版本中发生了破坏