我已經使用組件模式在TypeScript和組件路由器的AngularJS中構建了一個角度爲1.6的應用程序。AngularJS組件和ADAL（用於JS的Active Directory Azure庫）

現在我正在嘗試使用ADAL庫和一個接受持票人令牌的安全API對AzureAD進行身份驗證。

在目前的應用我建於AngularJS 1.3之一，我用ADAL在一個非常標準的方式，我到資源（API）與StateProvider的RequireAdLogin屬性驗證：

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

這工作正常，但現在我使用的組件路由器角UI路由器（與@類型/角UI路由器）：

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ŧ o接收令牌。麻煩的第一個跡象是，當我注意到requireADLogin屬性從.IComponentOptions打字和狀態類型缺失，所以我不能做到這一點：

.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標題。另外，我一直在尋找的MS認證圖書館JS：

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

但這似乎對我的需求等級太低。

我應該提到，獲取ADAL的Angular庫讓AngularJS能夠使用TypeScript和這種新的組件模式相當困難。看起來首選路徑是Angular 2.0，但在NG2的這一點上重寫是不可行的，因爲這個項目是有時間框的。

來源

2017-10-20 nocarrier

我已經通過手動提取從收容機構的承載令牌（在我的情況下，瀏覽器會話存儲），並增加它在我的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);

來源

2017-10-24 18:37:19 nocarrier

AngularJS組件和ADAL（用於JS的Active Directory Azure庫）

GitHub的ADAL討論：

回答

相關問題