暗黙的な許可から承認ワークフロー フローに 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 つの手順があります。
- アプリ登録リダイレクト URI を Web プラットフォームからシングルページ アプリケーション プラットフォームに切り替えます。
- コードを MSAL.js 1.x から 2.x に更新します。
- 登録を共有しているすべてのアプリケーションが MSAL.js 2.x と承認コード フローに更新されたら、アプリ登録の暗黙的な許可を無効にします。
後続のセクションでは、各手順についてさらに詳しく説明します。
リダイレクト URI を SPA プラットフォームに切り替える
ヒント
この記事の手順は、開始するポータルによって若干異なる場合があります。
アプリケーションの既存のアプリ登録を使い続ける場合、Microsoft Entra 管理センター を使用し、登録のリダイレクト URI を SPA プラットフォームに更新します。 これを行うと、登録を利用するアプリに対して PKCE および CORS サポートを使用した承認コード フローが有効になります (ただし、アプリケーションのコードを MSAL.js v2.x に更新する必要があります)。
Web プラットフォーム リダイレクト URI で現在構成されているアプリ登録には、以下の手順に従います。
Microsoft Entra 管理センターにサインインします。
[ID]>[アプリケーション]>[アプリの登録] を参照し、アプリケーションを選択してから[認証]を選択します。
[Web] プラットフォーム タイルの [リダイレクト URI] で、URI を移行する必要があることを示す警告バナーを選択します。
アプリケーションで MSAL.js 2.x が使用されているリダイレクト URI "のみ" を選択し、 [構成] を選択します。
![Azure portal の SPA ペインで [リダイレクト URI] ペインを選択する](media/migrate-spa-implicit-to-auth-code/portal-02-select-redirect-uri.png)
これらのリダイレクト URI が [シングルページ アプリケーション] プラットフォーム タイルに表示され、承認コード フローで CORS がサポートされ、これらの URI で PKCE が有効になっていることが示されるはずです。
既存の登録でリダイレクト 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);
場合によってはコードに行う必要がある追加の変更については、GitHub で移行ガイドを参照してください。
暗黙的な許可設定の無効化
このアプリの登録とそのクライアント ID が使用されるすべての運用アプリケーションを MSAL 2.x と承認コード フローに更新したら、アプリ登録の [認証] でメニュー暗黙的な許可設定のチェックマークをオフにします。
アプリ登録で暗黙的な許可設定のチェックマークをオフにすると、登録とそのクライアント ID を利用するすべてのアプリケーションに対して暗黙的フローが無効になります。
すべてのアプリケーションを MSAL.js 2.x と [PublicClientApplication][msal-js-publicclientapplication] に更新するまで、暗黙的な許可フローを無効にしないでください。
次のステップ
暗黙と承認コード フローの違いなど、承認コード フローの詳細については、Microsoft ID プラットフォームと OAuth 2.0 承認コード フローに関する記事を参照してください。
次の複数パートのチュートリアル シリーズで、ユーザーをサインインさせる React シングルページ アプリケーション (SPA) をビルドして詳細を学習します。