分享方式：

在 Azure Active Directory B2C 中註冊單頁應用程式

  • 文章

您的應用程式 必須先在您所管理的租用戶中註冊應用程式，才能 與 Azure Active Directory B2C （Azure AD B2C） 互動。 本指南說明如何使用 Azure 入口網站 註冊單頁應用程式 （“SPA”。

驗證選項概觀

許多新式 Web 應用程式都是建置為用戶端單頁應用程式（“SPA”）。 開發人員會使用 JavaScript 或 SPA 架構來撰寫它們，例如 Angular、Vue 和 React。 這些應用程式會在網頁瀏覽器上執行，且具有與傳統伺服器端 Web 應用程式不同的驗證特性。

Azure AD B2C 提供 兩 個選項，可讓單頁應用程式登入使用者，並取得令牌以存取後端服務或 Web API：

授權碼流程 (使用 PKCE)

OAuth 2.0 授權碼流程（含 PKCE）可讓應用程式交換標識元令牌的授權碼，以代表呼叫受保護 API 所需的已驗證使用者和存取令牌。 此外，它會傳 回 Refresh 令牌，代表使用者提供資源的長期存取權，而不需要與這些用戶互動。

這是 建議 的方法。 擁有有限的存留期重新整理令牌可協助您的應用程式適應 新式瀏覽器 Cookie 隱私權限制，例如 Safari ITP。

若要利用此流程，您的應用程式可以使用支援它的驗證連結庫，例如 MSAL.js。

Single-page applications-auth

隱含授與流程

某些連結庫，例如 MSAL.js 1.x，僅支援隱含授與流程，或您的應用程式會實作以使用隱含流程。 在這些情況下，Azure AD B2C 支援 OAuth 2.0 隱含流程。 隱含授與流程可讓應用程式取得 標識碼 和 存取 令牌。 不同於授權碼流程，隱含授與流程不會傳回重新整理 令牌。

Single-page applications-implicit

此驗證流程不包含使用電子和 React-Native 等跨平臺 JavaScript 架構的應用程式案例。 這些案例需要進一步的功能，以便與原生平台互動。

必要條件

註冊 SPA 應用程式

  1. 登入 Azure 入口網站。

  2. 如果您有多個租使用者的存取權，請選取頂端功能表中的 設定 圖示，從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租使用者。

  3. 在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。

  4. 選取 [應用程式註冊]，然後選取 [新增註冊]。

  5. 輸入 應用程式的 [名稱 ]。 例如， spaapp1。

  6. 在 [支持的帳戶類型] 下，選取 [任何身分識別提供者或組織目錄中的帳戶] （以使用者流程驗證使用者）

  7. 在 [重新導向 URI] 底下，選取 [單頁應用程式 ][SPA]，然後在 [URL] 文字框中輸入 https://jwt.ms 。

    重新導向 URI 是授權伺服器（在此案例中為 Azure AD B2C）完成與使用者互動之後傳送使用者的端點。 此外，重新導向 URI 端點會在成功授權時接收存取令牌或授權碼。 在生產應用程式中，它通常是應用程式執行所在的可公開存取端點，例如 https://contoso.com/auth-response。 基於如本指南的測試目的，您可以將它設定為 https://jwt.ms，這是一個 Microsoft 擁有的 Web 應用程式，其會顯示令牌的已譯碼內容（令牌的內容永遠不會離開瀏覽器）。 在應用程式開發期間，您可以新增應用程式在本機接聽的端點，例如 http://localhost:5000。 您可以隨時在已註冊的應用程式中新增和修改重新導向 URI。

    下列限制適用於重新導向 URI：

    • 除非使用 localhost，否則回復 URL 必須以 配置https開頭。
    • 回復 URL 會區分大小寫。 其大小寫必須符合執行中應用程式的 URL 路徑大小寫。 例如，如果您的應用程式在其路徑 .../abc/response-oidc中包含 ，請勿在回覆 URL 中指定 .../ABC/response-oidc 。 由於網頁瀏覽器會將路徑視為區分大小寫，因此如果重新導向至不相符.../ABC/response-oidc的 URL，則可能會排除與相關聯的 .../abc/response-oidc Cookie。

  8. 在 [許可權] 底下，選取 [授與系統管理員同意以開啟標識符和offline_access許可權] 複選框。

  9. 選取註冊。

啟用隱含流程

如果您使用 MSAL.js 1.3 或舊版搭配 SPA 應用程式中的隱含授與流程，或設定 https://jwt.ms/ 應用程式以測試使用者流程或自定義原則，則必須在應用程式註冊中啟用隱含授與流程：

  1. 在左側功能表中，於 [管理]下，選取 [驗證]。

  2. 在 [隱含授與和混合式流程] 下，選取 [存取權杖 (用於隱含流程)] 和 [識別碼權杖 (用於隱含和混合式流程)] 核取方塊。

  3. 選取 [儲存]。

如果您的應用程式使用 MSAL.js 2.0 或更新版本，請勿啟用隱含流程授與，因為 MSAL.js 2.0+ 支援 PKCE 的授權碼流程。

從隱含流程移轉

如果您有使用隱含流程的現有應用程式，建議您移轉為使用支援的架構來使用授權碼流程，例如 MSAL.js 2.0+。

當應用程式註冊代表的所有生產 SPA 都開始使用授權碼流程時，請停用隱含授與流程設定，如下所示：

  1. 在左側功能表中，於 [管理]下，選取 [驗證]。
  2. 在 [隱含授與] 下，取消選取 [存取令牌] 和 [標識符令牌] 複選框。
  3. 選取 [儲存]。

如果您使用隱含流程的應用程式，如果您保持啟用隱含流程（已核取），則可以繼續運作。

下一步

瞭解如何 在 Azure Active Directory B2C 中建立使用者流程。