クライアント側ナビゲーションにルーターのナビゲート機能を使用するように @azure/msal-angular を構成する方法

既定では、MSAL.js アプリケーション内の 1 つのページから別のページに移動する必要がある場合は、 window.location再割り当てされ、フレーム全体がもう一方のページにリダイレクトされ、アプリケーションが再レンダリングされます。 Angular Router を使用している場合は、ルーターが "クライアント側" ナビゲーションを有効にし、必要に応じてページの部分のみを表示または非表示にするため、これは望ましくない可能性があります。

現在、MSAL.js がアプリケーション内のあるページから別のページに移動するシナリオがあります。 アプリケーションで次 のすべてを 実行している場合は、引き続きお読みください。

  • アプリケーションがポップアップ フローではなくリダイレクト フローを使用してログインしている
  • PublicClientApplication が auth.navigateToLoginRequestUrl: true で構成されている (既定)
  • アプリケーションには、共有のredirectUriを使用してloginRedirect/acquireTokenRedirectを呼び出す可能性があるページがあります。つまり、http://localhost を redirectUri として使用して、http://localhost/protected から loginRedirect を呼び出します。

アプリケーションで上記のすべての処理を行っている場合は、MSAL が使用するメソッドをオーバーライドして、 MsalCustomNavigationClient をインポートし、 setNavigationClientを呼び出します。

注: セキュリティ修正のため、MsalCustomNavigationClientが true に設定され、リダイレクトを処理している場合、Routerは Angular navigateToLoginRequestUrlを使用してクライアント側を移動しません。 これは、今後のリリースで対処される既知の問題です。

実装例

次の例では、Angular Routerを使用するときにこれを実装する方法を示します。 Angular Router の詳細については、 こちらを参照してください。Angular 用にこれを実装する完全なサンプル アプリ については、こちらを参照してください。

import { Component, OnInit, Inject } from '@angular/core';
import { Router } from '@angular/router';
import { Location } from '@angular/common';
import { MsalService, MsalBroadcastService, MSAL_GUARD_CONFIG, MsalGuardConfiguration, MsalCustomNavigationClient } from '@azure/msal-angular';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private router: Router,
    private location: Location
  ) {
    const customNavigationClient = new MsalCustomNavigationClient(this.authService, this.router, this.location);
    this.authService.instance.setNavigationClient(customNavigationClient);
  }

  ngOnInit(): void {
    // Additional code
  }
}
  • Last updated on