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

發行項
01/11/2024

您的應用程式必須先在您所管理的租用戶中註冊應用程式，才能與 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 架構的應用程式案例。這些案例需要進一步的功能，以便與原生平台互動。

必要條件

如果您沒有 Azure 訂用帳戶，請在開始前建立免費帳戶。
如果您沒有 Azure AD B2C 租使用者，請立即建立一個租使用者。您可以使用現有的 Azure AD B2C 租使用者。

註冊 SPA 應用程式

登入 Azure 入口網站。
如果您有多個租使用者的存取權，請選取頂端功能表中的設定 圖示，從 [目錄 + 訂用帳戶] 功能表切換至您的 Azure AD B2C 租使用者。
在 Azure 入口網站中，搜尋並選取 [Azure AD B2C]。
選取 [應用程式註冊]，然後選取 [新增註冊]。
輸入 應用程式的 [名稱 ]。例如， spaapp1。
在 [支持的帳戶類型] 下，選取 [任何身分識別提供者或組織目錄中的帳戶] （以使用者流程驗證使用者）
在 [重新導向 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。
在 [許可權] 底下，選取 [授與系統管理員同意以開啟標識符和offline_access許可權] 複選框。
選取註冊。

啟用隱含流程

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

在左側功能表中，於 [管理]下，選取 [驗證]。
在 [隱含授與和混合式流程] 下，選取 [存取權杖 (用於隱含流程)] 和 [識別碼權杖 (用於隱含和混合式流程)] 核取方塊。
選取 [儲存]。

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

從隱含流程移轉

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

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

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

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

下一步

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

共用方式為