带有 Angular 4 的 Azure AD

Question

我正在使用带有 Angular 4 应用程序的隐式流的 Azure AD。我的 NG4 应用程序使用 PathLocationStrategy 进行路由，以便它可以利用干净的 url。我的 AAD 身份验证请求如下所示：

https://login.microsoftonline.com/xxxxx/oauth2/authorize?client_id=xxxx&response_type=id_token&redirect_uri=http://localhost:4200/login&response_mode=fragment&scope=openid&state=12345&nonce=xxxx

授权通过，我被重定向到http://localhost:4200/login#id_token=xxxxx，然后被重定向到http://localhost:4200/home#id_token=xxxxx

我的路线如下所示：

  { path: '', redirectTo: 'home', pathMatch: 'full' },
  {
    path: '', component: BlankLayoutComponent,
    children: [
      { path: 'login#id_token=:id_token', component: LoginComponent }
    ]
  },
  {
    path: '', component: BasicLayoutComponent,
    children: [
      { path: 'home', component: StarterViewComponent }
    ]
  },
  // Handle all other routes
  { path: '**', redirectTo: 'home' }

我似乎无法配置从 url 获取 id_token 的路由，因此我可以使用它来授权其他请求。如何从重定向中取回这个 id_token？

Answer 1

在组件 StarterViewComponent 中，实现接口 OnInit 并将其写入方法 ngOnInit。

export class StarterViewComponent implements OnInit  {

    ngOnInit() {

      if (window.location.hash) {
            this.someLoginService.validateToken(window.location.hash);
        }
    }

}