將 JavaScript 單一頁面應用程式從隱含授與遷移至授權碼流程

適用於 JavaScript 的 Microsoft 驗證程式庫 (MSAL.js) v2.0 為使用 Microsoft 身分識別平台的單頁應用程式帶來對授權碼流程的支援，並包含 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 和驗證碼流程，有三個主要步驟：

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. 流覽至 Entra ID>應用程式註冊，選取您的應用程式，然後選取 驗證。

3. 在 [Web] 平台圖標中 [重新導向 URI] 下，選取警告橫幅，指出您應遷移 URI。

   

4. 僅選取那些其應用程式會使用 MSAL.js 2.x 的重新導向 URI，然後選取 設定。

   

這些重新導向 URI 現在應該會出現在 [單頁應用程式] 平台方塊中，顯示這些 URI 已啟用授權碼流程的 CORS 支援與 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 上的遷移指南。

停用隱含授與設定

將使用此應用程式註冊的所有生產應用程式和其用戶端識別碼更新至 MSAL 2.x 和授權碼流程之後，您應該在應用程式註冊的 [驗證] 功能表下取消核取隱含授與設定。

當您在應用程式註冊中取消勾選隱含授與設定時，所有使用該註冊和用戶端識別碼的應用程式的隱式流程將被停用。

在您將所有應用程式更新至 MSAL.js 2.x 和 [PublicClientApplication][msal-js-publicclientapplication] 之前，請勿停用隱含授與流程。

下一步

• 若要深入了解授權碼流程 (包括隱含流程與授權碼流程之間的差異)，請參閱 Microsoft 身分識別平台和 OAuth 2.0 授權碼流程。

• 若要深入了解，請建置 React 單頁應用程式 (SPA)，以在下列多部分教學課程系列中登入使用者。