使用Angular2进行Azure AD身份验证

9

我正在使用Angular2,并希望对Azure AD中的用户进行身份验证。我发现ADALjs只适用于Angular1,我还发现了这个https://www.npmjs.com/package/angular2-adal#adalService,但这似乎仍处于初始阶段。有什么最佳实践可以实现这一点吗?能否提供一个可行的示例。


在 Stack Overflow 上有一个类似的(已回答!)问题:如何在 Angular 2 中使用 webpack 加载 adal.js - hannes neukermans
2个回答

2
这个答案可能有些晚了,但是既然你要求一个例子,我已经修改了最新的Angular 2快速入门并将ADAL集成进去,这里是链接:https://github.com/ranveeraggarwal/ng2-adal-QuickStart。它还包含路由和受保护的路由。
这个示例使用systemjs,我还没有找到基于webpack的解决方案。

有关那个Webpack解决方案的任何消息吗? - phicon
很高兴看到它正在使用新的路由器而不是弃用的路由器。 - Adrian Moisa

0

要解决这个问题,您需要做一些事情:

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

有了这些已安装的包,您需要执行以下操作:
在component.ts文件中:
  1. 编写三个斜杠以导入类型定义文件
    /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
  2. 使用expose加载器导入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


在 system.js 环境中让它正常工作有什么需要注意的地方吗? - BradleyDotNET
@hannes 这种方法如何暴露外部API端点? - Pickle
你的意思是连接到你的AD租户?填写URL地址,对吧?无论如何,如果你使用TypeScript,另一种方法是可以尝试通过npm安装adal-ts。该库还有一个在Azure上托管的实时演示,可以帮助你入门。 - hannes neukermans

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接