共用方式為

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

  • 發行項

適用於 JavaScript 的 Microsoft 驗證程式庫 (MSAL) 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. 瀏覽至 [身分識別]>[應用程式]>[應用程式註冊]，選取您的應用程式，然後選取 [驗證]。

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

    Azure 入口網站中 Web 應用程式磚上的隱含流程警告橫幅

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

    在 Azure 入口網站的 SPA 窗格中選取重新導向 URI 窗格

這些重新導向 URI 現在應該會出現在 [單頁應用程式] 平台圖標中，其中顯示啟用授權碼流程的 CORS 支援，並啟用這些 URI 的 PKCE。

Azure 入口網站中的應用程式註冊單一頁面應用程式磚

您也可以建立新的應用程式註冊，而非更新現有註冊中的重新導向 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 上的遷移指南。

停用隱含授與設定

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

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

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

下一步