共用方式為


在 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 中建立使用者流程。