使用Angular2對Azure AD進行身份驗證

Question

我正在使用Angular2並希望針對Azure AD對用戶進行身份驗證。 我找到了ADALjs，但它們只適用於Angular1，我也發現了這個https://www.npmjs.com/package/angular2-adal#adalService ，但這似乎仍處於初始階段。 我可以采取什么樣的方法來實現這一目標，有人可以提供一個有效的例子。

Answer 1

這個答案可能已經很晚了，但是既然你問了一個例子，我已經修改了最新的Angular 2 Quickstart並將ADAL集成到其中，這里： https ： //github.com/ranveeraggarwal/ng2-adal-QuickStart

它還具有路由和受保護的路由。

這使用systemjs，我還沒有找到一個基於webpack的解決方案。

Answer 2

要解決這個問題，您需要做很多事情：

npm install adal-angular --save        (=>"@types/adal": "^1.0.22")
npm install @types/adal --save-dev     (=>"adal-angular": "^1.0.12")
npm install expose-loader

安裝這些軟件包后，您必須執行以下操作：
在你的組件內部.ts：

1. 寫一個三重斜杠來導入打字
   /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
2. 導入adal.js並使用公開的加載器將其公開為AuthenticationContext
   import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
3. 聲明AuthenticationContextStatic類型的變量，並為其分配AuthenticationContext的值
   let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
   
4. 現在，您可以使用createAuthContextFn初始化身份驗證上下文
   let config: adal.Config = { clientId : 'test' }; let context = new createAuthContextFn(config);

如何在Angular 2（Azure-AD）中的webpack中加載adal.js