MSAL Angular v1 から v2 へのアップグレード

MSAL Angular v2 では、Angular 用ラッパーが最新バージョンの MSAL Common に対応し、さらに Angular（9～12）および rxjs（6）の最新バージョンを追加設定なしでサポートします。

このガイドでは、既存のアプリケーションを @azure/msal-angular v1 から v2 に移行するために必要な変更について説明します。

MSAL Angular v2 のドキュメントについては、 こちらをご覧ください。

Installation

MSAL Angular v2 の最初の基本的な変更は、コア msal パッケージを使用しなくなったが、 @azure/msal-browser パッケージを ピア依存関係としてラップすることです。

まず、現在使用されている MSAL の以前のバージョンをすべてアンインストールします。

@azure/msal-browserと@azure/msal-angularをインストールするには:

npm install @azure/msal-browser @azure/msal-angular@latest

の破壊的変更 @azure/msal-browser@2

@azure/msal-browser@2 には、 msal@1.xからの破壊的変更が多数含まれています。 これらの多くはアプリケーションから抽象化する必要がありますが、コードの変更が必要になるものがいくつかあります。

MsalModule.forRoot が 3 つの引数を受け取るようになった

以前 @azure/msal-angular 、 MsalModule.forRoot()を介して 2 つの構成オブジェクトを受け入れ、1 つはコア ライブラリ用、1 つは @azure/msal-angular用です。 これは、MSAL のインスタンスと、2 つの Angular 固有の構成オブジェクトを取り込むよう変更されました。

  1. 最初の引数は MSAL インスタンスです。 これは、MSAL をインスタンス化するファクトリとして、または構成で MSAL のインスタンスを渡すことによって提供できます。
  2. 2 番目の引数は MsalGuardConfiguration オブジェクトであり、 interactionType と省略可能な authRequest と省略可能な loginFailedRouteを指定します。
  3. 3 番目の引数は MsalInterceptorConfiguration オブジェクトであり、 interactionType、 protectedResourceMap、および省略可能な authRequestの値が含まれます。 unprotectedResourceMap は非推奨となりました。

詳細については、構成ドキュメントおよびMsalInterceptorとMsalGuardに関する個別のドキュメントを参照してください。 これらの構成オブジェクトを渡す方法の例については、 更新されたサンプル も参照してください。

Logger

  • logger は、logger のインスタンスではなく、system.loggerOptions 配下の、loggerCallback、piiLoggingEnabled、logLevel を含む MSAL インスタンスの構成で設定されるようになりました。 loggerは、MsalService.setLogger()を使用して動的に設定することもできます。 使用の詳細とlogger documentationについては、を参照してください。

API の変更

  • acquireTokenメソッドとlogin メソッドは、異なる要求オブジェクトをパラメーターとして受け取るようになりました。 詳細については、 msal.service.ts を参照してください。
  • ブロードキャスト イベントは、文字列だけでなく、 EventMessage オブジェクトを出力するようになりました。 実装方法の例については、 Angular サンプルを参照してください。
  • Redirectメソッドを使用するアプリケーションでは、MsalRedirectComponentとブートストラップを、すべてのリダイレクトを処理するapp.component.ts内のAppComponentと共にインポートする必要があります。 アプリケーションでこれを行うことができない場合は、 handleRedirectObservable メソッドを実装する必要があります (また、すべてのページ読み込み時に実行する必要があります)。これにより、リダイレクト操作の結果がキャプチャされます。 詳細については、 リダイレクトのドキュメント を参照してください。

MSAL インターセプター

  • 現在のの構成と v1 と v2 の違いの詳細については、MsalInterceptorを参照してください。

MSAL Guard

  • 現在のの構成と v1 と v2 の違いの詳細については、MsalGuardを参照してください。

Accounts

  • アカウント情報を取得する前に、監視可能な inProgress$ をサブスクライブし、 InteractionStatus.None をフィルター処理することをお勧めします。 これにより、アカウント情報を取得する前にすべての操作が完了します。 この使用例については、 サンプル を参照してください。
  • アカウントを取得するときは、MSAL インスタンスで使用できる getAccountByHomeId() と getAccountByLocalId()を使用することをお勧めします。 getAccount() は現在 getAccountByUsername()されていますが、信頼性が低く、便宜上のみであるため、セカンダリの選択肢にする必要があります。
  • getAllAccounts() は、MSAL インスタンスでも使用できます。 アカウントの方法の詳細については、に関する@azure/msal-browserを参照してください。
  • さらに、 getActiveAccount() と setActiveAccount()を使用してアクティブなアカウントを取得および設定できるようになりました。 詳細については、 FAQ を参照してください。

Angular 9+ と rxjs@6

MSAL Angular では、アプリケーションが @angular/core@>=9、 @angular/common@>=9、 rxjs@6でビルドされていることが想定されるようになりました。 MSAL Angular v1 と同様に、 rxjs-compat は必要ありません。

ステップ:

  1. Angular と rxjs の新しいバージョンをインストールします。 npm install @angular/core @angular/common rxjs
  2. rxjs-compatをアンインストールします (他のライブラリでは必要ない場合)。npm uninstall rxjs-compat

Samples

Angular 9、10、11、12 の基本的なサンプル アプリケーションをまとめています。 これらのサンプルは、基本的な構成と使用方法を示しており、段階的に改善および追加されます。

MSAL Angular v2 サンプルの一覧と、示されている機能については、 こちらを 参照してください。

  • Last updated on