Angular2 adal.js - URL 中的#id_token答案

【问题标题】：Angular2 adal.js - #id_token in URLAngular2 adal.js - URL 中的#id_token
【发布时间】：2017-09-30 16:24:33
【问题描述】：

我在 Angular2 项目中使用 adal.js 来验证 Azure AD。在 AAD 身份验证后，id_token 被附加到 redirectUri，但 Angular2 不接受 url 参数中的#id_token。

回复网址：
https://localhost:44345/#id_token=some_jwt_token

Angular 2 错误消息：
错误：未捕获（承诺）：错误：无法匹配任何路由：'' 错误：无法匹配任何路由：''

有没有办法从 url 中去除 id_token 或在路由器模块中处理这个 '#id_token' 参数？

提前致谢！

【问题讨论】：

标签： angular azure angular2-routing adal.js

【解决方案1】：

我不确定 Angular 2，但我在 Angular 8 中遇到的问题几乎相似。成功登录后，Azure AD 重定向用户需要重定向 URL，但使用 #id_token=some_jwt_token。为了解决这个问题，我使用了链接https://github.com/sureshchahal/angular2-adal/issues/46

中描述的方法

基本上是这样的

 constructor(private location: Location) { }

  ngOnInit() {
    const urlFragments = window.location.href.split('#id_token');
    if (urlFragments.length > 1) {
      this.location.go(this.location.path());
    }
  }

别忘了导入位置

import { Location } from '@angular/common';

我正在使用

"@angular/common": "8.2.14",
"microsoft-adal-angular6": "^1.3.0",

希望对你有帮助。

【讨论】：

【解决方案2】：

在 MsAdalAngular6Module 配置中，将 navigateToLoginRequestUrl 设置为 true

MsAdalAngular6Module.forRoot({ tenant: '...', clientId: '...', redirectUri: "...", endpoints: { "..." }, navigateToLoginRequestUrl: true, <------------ This one cacheLocation: 'localStorage', }),

【讨论】：

【解决方案3】：

您可以使用问号，xxxxx/#?id_token=some_jwt_token。这就是我为我的应用程序 SSO 所做的。

在您的组件中：

token: string;

constructor(
        private route: ActivatedRoute
    ) {
        this.route.queryParams.subscribe(paras => {
            this.token = paras['id_token'];
        });
      }
}

【讨论】：

【解决方案4】：

在你的根文件中添加类似的内容：

{ path: 'your_url/:token, component: your_component}

如果你想建立一个链接，你可以使用这个：

<a [routerLink]="['/your_url', { token: 'whatever' }]">image a dragon</a>

以防万一：https://angular.io/docs/ts/latest/guide/router.html#!#basics-router-links

【讨论】：