与哈希位置策略一起使用时，使用ng2 adal库的Angular4 azure active directory身份验证失败

Question

Angular4 azure active directory身份验证使用ng2 adal库从url中删除id_令牌。

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

>

已安装ng4 adal

为ng4-adal创建了一个类型脚本配置文件，以设置Azure连接详细信息，如下所示，从'@角/核'导入{注入式}；

        @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'
            };
            }
         }

创建了一个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;
            }   }  }

在应用程序的构造函数中添加了以下代码。组成部分ts将启动ng4 adal服务，如下所示：，

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

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

在应用程序的ngOninit中添加了以下代码。组成部分ts将克服上述问题，具体如下：，

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

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

        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 }
       ];

在应用程序中注册服务。单元

我在控制台中遇到的错误如下，错误：Uncaught（在promise中）：错误：无法匹配任何路由。URL段：“id\u令牌”

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

有什么解决办法吗？

Answer 1

我找到了解决办法。

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

A.创建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']);
               }
              }
        }

B.为"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.注册oauth-callback.componentoauth-callback-handler.guardapp.module.

d、 为oauth回调处理的“id_令牌”注册路由。组件和oauth回调处理程序。守卫如下：，

          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/