暗黙的な許可から承認ワークフロー フローに 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 プラットフォームに切り替える

ヒント

この記事の手順は、開始するポータルによって若干異なる場合があります。

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

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

  1. Microsoft Entra 管理センターにサインインします。

  2. [ID]>[アプリケーション]>[アプリの登録] を参照し、アプリケーションを選択してから[認証]を選択します。

  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-js-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][msal-js-publicclientapplication] に更新するまで、暗黙的な許可フローを無効にしないでください。

次のステップ