暗黙的な許可から承認ワークフロー フローに JavaScript のシングルページ アプリを移行する

Microsoft Authentication Library for JavaScript (MSAL.js) v2.0 では、Microsoft ID プラットフォームでのシングルページ アプリケーションに対する、PKCE、CORS を使用した承認コード フローがサポートされます。 以降のセクションの手順に従い、暗黙的な許可を使用する MSAL.js 1.x アプリケーションを、MSAL.js 2.0+ (以下 2.x) と承認コード フローに移行します。

MSAL.js 2.x は、ブラウザーで暗黙的な許可のフローではなく承認コード フローをサポートすることで、MSAL.js 1.x よりも強化されています。 MSAL.js 2.x では、暗黙的フローはサポートされていません

移行の手順

MSAL.js 2.x と承認コード フローにアプリケーションを更新するには、主に 3 つの手順があります。

  1. アプリ登録リダイレクト URI を Web プラットフォームからシングルページ アプリケーション プラットフォームに切り替えます。
  2. コードを MSAL.js 1.x から 2.x に更新します。
  3. 登録を共有しているすべてのアプリケーションが MSAL.js 2.x と承認コード フローに更新されたら、アプリ登録の暗黙的な許可を無効にします。

後続のセクションでは、各手順についてさらに詳しく説明します。

リダイレクト URI を SPA プラットフォームに切り替える

アプリケーションの既存のアプリ登録を使い続ける場合、Azure portal を使用し、登録のリダイレクト URI を SPA プラットフォームに更新します。 これを行うと、登録を利用するアプリに対して PKCE および CORS サポートを使用した承認コード フローが有効になります (ただし、アプリケーションのコードを MSAL.js v2.x に更新する必要があります)。

Web プラットフォーム リダイレクト URI で現在構成されているアプリ登録には、以下の手順に従います。

  1. Azure portal にサインインし、Azure Active Directory を選択します。

  2. [アプリの登録] でアプリケーションを選択し、 [認証] を選択します。

  3. [Web] プラットフォーム タイルの [リダイレクト URI] で、URI を移行する必要があることを示す警告バナーを選択します。

    Implicit flow warning banner on web app tile in Azure portal

  4. アプリケーションで MSAL.js 2.x が使用されているリダイレクト URI "のみ" を選択し、 [構成] を選択します。

    Select redirect URI pane in SPA pane in Azure portal

これらのリダイレクト URI が [シングルページ アプリケーション] プラットフォーム タイルに表示され、承認コード フローで CORS がサポートされ、これらの URI で PKCE が有効になっていることが示されるはずです。

Single-page application tile in app registration in Azure portal

既存の登録でリダイレクト URI を更新する代わりに、新しいアプリ登録を作成することもできます。

コードを MSAL.js 2.x に更新する

MSAL 1.x で、次のように UserAgentApplication を初期化し、アプリケーション インスタンスを作成しました。

// MSAL 1.x
import * as msal from "msal";

const msalInstance = new msal.UserAgentApplication(config);

MSAL 2.x では、PublicClientApplication を代わりに初期化します。

// MSAL 2.x
import * as msal from "@azure/msal-browser";

const msalInstance = new msal.PublicClientApplication(config);

MSAL 2.x をアプリケーションに追加する方法の完全なチュートリアルについては、「チュートリアル: 認証コード フローを使用して、ユーザーをサインインさせ、JavaScript シングルページ アプリ (SPA) から Microsoft Graph API を呼び出す」を参照してください。

場合によってはコードに行う必要がある追加の変更については、GitHub で移行ガイドを参照してください。

暗黙的な許可設定の無効化

このアプリ登録とそのクライアント ID が使用されるすべての運用アプリケーションを MSAL 2.x と承認コード フローに更新したら、アプリ登録で暗黙的な許可設定のチェックマークをオフにしてください。

アプリ登録で暗黙的な許可設定のチェックマークをオフにすると、登録とそのクライアント ID を利用するすべてのアプリケーションに対して暗黙的フローが無効になります。

すべてのアプリケーションを MSAL.js 2.x と PublicClientApplication に更新するまで、暗黙的な許可フローを無効にしないでください

次のステップ

暗黙と承認コード フローの違いなど、承認コード フローの詳細については、Microsoft ID プラットフォームと OAuth 2.0 承認コード フローに関する記事を参照してください。

Microsoft ID プラットフォームでの JavaScript シングルページ アプリケーションの開発についてさらに詳しく知りたい場合は、複数パートから構成される記事の「シナリオ: シングルページ アプリケーション」シリーズが、作業を開始するのに役立ちます。