使用 ng2-adal 库的 Angular4 azure 活动目录身份验证在与哈希位置策略一起使用时失败

Question

使用 ng2-adal 库的 Angular4 azure 活动目录身份验证从 url 中删除 id_token。

我参考了以下博客的实现。 https://dotronald.be/add-azure-active-directory-to-an-existing-angular-2-single-page-application/

1. 安装 ng4-adal

2. 为 ng4-adal 创建了一个 typescript 配置文件来设置 azure 连接细节，如下所示，从 '@angular/core' 导入 {Injectable}；

           @Injectable()
          export class AdalConfig {
                 public get getAdalConfig(): any {
                 return {
                     tenant: 'YOUR TENANT NAME',
                     clientId: 'YOUR CLIENT ID',           
                     redirectUri: window.location.origin + '/',
                      postLogoutRedirectUri: window.location.origin + 
                     '/logout'
               };
               }
            }
   

3. 创建了一个 canActivate 守卫，在导航前验证角度路线，如下所示，

            import { Injectable } from '@angular/core';
            import { Router, CanActivate,   
            ActivatedRouteSnapshot,RouterStateSnapshot, NavigationExtras } 
            from '@angular/router';
            import {AdalService} from "ng4-adal/core";
   
            @Injectable()
            export class AuthenticationGuard implements CanActivate {
   
            constructor(private _adalService: AdalService, private router: 
            Router) { }
   
            canActivate(route: ActivatedRouteSnapshot, state: 
            RouterStateSnapshot): boolean{
   
               if (this._adalService.userInfo.isAuthenticated) {
                   return true;
               }
               else {
                       this._adalService.login();
                       return false;
               }   }  }
   

4. 在app.component.ts的构造函数中添加如下代码来启动ng4-adal服务如下，

               constructor(
                    private _adalService: AdalService,
                    private _adalConfigService: AdalConfig
              )                 
        {this._adalService.init(this._adalConfigService.getAdalConfig);}
   

5. 为防止用户每次都必须再次登录，身份验证令牌存储在浏览器缓存中。这允许我们尝试检索此令牌并继续使用应用程序，而不会再次重定向到 Azure 登录页面。

在 app.component.ts 的 ngOninit 中添加以下代码来解决上述问题，如下所示，

              ngOnInit() {
                 this._adalService.handleWindowCallback();
                 this._adalService.getUser();
              }

7. 在 app-routing.ts 文件中为所需路由设置在步骤 3 中创建的保护，如下所示，

           const routes: Routes = [
           { path: '', redirectTo: '/home', pathMatch: 'full', canActivate: 
            [AuthenticationGuard]},
            { path: 'admin-measure', redirectTo: '/#admin-measure'},
            { path: 'home', component: HomeComponent, canActivate: 
              [AuthenticationGuard] },                 
            { path: 'logout', component: LogoutComponent },
            { path: 'unauthorized', component: UnauthorizedComponent }
          ];
   

8. 在 app.module 中注册服务。

我在控制台中遇到的错误如下， 错误错误：未捕获（承诺）：错误：无法匹配任何路由。URL 段：'id_token'

研究发现的问题：在 Angular 2 中使用哈希时重定向存在问题。问题在于，当 authResult 在身份验证后返回重定向时，Angular 认为这是一个名为 access_token 的路由。

有什么解决办法吗？

Answer 1

我找到了解决方案。

来自服务提供商的回调正在使用 Angular2 路由器无法理解的 #/id_token。将在控制台中得到一个错误——“错误：无法匹配任何路由。网址段：'id_token'”。为了解决这个问题，我们将添加一个回调路由来消化 JWT 令牌，然后重定向到我们的目标页面。

一种。创建 oauth-callback.component 如下，

        import { Component, OnInit } from '@angular/core';
        import { Router } from '@angular/router';
        import {AdalService} from "ng4-adal/core";

        @Component({
                template: '<div>Please wait...</div>'
        })

        export class OAuthCallbackComponent implements OnInit {

        constructor(private router: Router, private _adalService: 
        AdalService) {}

        ngOnInit() {
                if (!this._adalService.userInfo) {
                    this._adalService.login();
                } else {
                    this.router.navigate(['home']);
               }
              }
        }

湾 为“id_token”路由创建一个 oauth-callback-handler.guard，如下所示，

        import { Injectable } from '@angular/core';
        import { Router, CanActivate, ActivatedRouteSnapshot, 
        RouterStateSnapshot } from '@angular/router';
        import { AdalService } from 'ng4-adal/core';

        @Injectable()
        export class OAuthCallbackHandlerGuard implements CanActivate {

        constructor(private router: Router, private _adalService: 
        AdalService) { }

        canActivate(route: ActivatedRouteSnapshot, state: 
        RouterStateSnapshot): boolean {

            this._adalService.handleWindowCallback();

            if (this._adalService.userInfo.isAuthenticated) {

                var returnUrl = route.queryParams['returnUrl'];
                if (!returnUrl) {
                    this.router.navigate(['home']);
                } else {
                    this.router.navigate([returnUrl], { queryParams: 
                    route.queryParams });
                }
            }
            else {
                    this._adalService.login();
            }

            return false;
            }
         }

C。在 app.module 中注册 oauth-callback.component 和 oauth-callback-handler.guard。

d. 注册要由 oauth-callback.component 和 oauth-callback-handler.guard 处理的“id_token”的路由，如下所示，

          const routes: Routes = [
         { path: 'id_token', component: OAuthCallbackComponent, canActivate: 
           [OAuthCallbackHandlerGuard] }[AuthenticationGuard]},              
         { path: 'logout', component: LogoutComponent }];       

如需进一步参考，请参阅以下链接，

https://blogs.msdn.microsoft.com/premier_developer/2017/04/26/using-adal-with-angular2/