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 管理センターにサインインします。
Entra ID>App 登録に移動し、アプリケーションを選択して、[認証] を選択します。
[リダイレクト URI] の [Web プラットフォーム] タイルで、URI を移行する必要があることを示す警告バナーを選択します。
アプリケーションで MSAL.js 2.x を使用するもののみリダイレクト URI を選択し、次に [設定] を選択します。
これらのリダイレクト URI が シングルページ アプリケーション プラットフォーム タイルに表示され、承認コード フローでの CORS のサポートと、これらの URI に対する PKCE が有効であることが示されます。
コードを 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)を構築してユーザーをサインインさせることにより、次のマルチパートチュートリアルシリーズでさらに詳しく学びましょう。