這很重要
自 2025 年 5 月 1 日起,Azure AD 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 所需的已驗證使用者和 存取 令牌。 此外,其會傳回重新整理權杖,以代表使用者提供長期的資源存取權,而不需要與使用者互動。
這是 建議 的方法。 具備有限存留期的重新整理權杖可協助您的應用程式適應新式瀏覽器 Cookie 隱私權限制,例如 Safari ITP。
若要利用此流程,您的應用程式可以使用支援它的驗證連結庫,例如 MSAL.js。
隱含授與流程
某些程式庫,例如 MSAL.js 1.x,僅支援隱式授權流程,或者您的應用程式已實作為使用隱式流程。 在這些情況下,Azure AD B2C 支援 OAuth 2.0 隱含流程。 隱含授與流程可讓應用程式從授權端點取得 標識符 和 存取 令牌。 不同於授權碼流程,隱式授權流程不會傳回 刷新令牌。
此驗證流程不包含使用電子和 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:
- 除非使用
https,否則回覆 URL 必須以<c0 />協定開頭。 - 回覆 URL 會區分大小寫。 其大小寫必須符合您執行中應用程式之 URL 路徑的大小寫。 例如,如果您的應用程式在其路徑
.../abc/response-oidc中包含 ,請勿在回覆 URL 中指定.../ABC/response-oidc。 由於網頁瀏覽器會將路徑視為區分大小寫,因此,如果將與.../abc/response-oidc相關聯的 Cookie 重新導向至不相符的.../ABC/response-oidcURL,可能就會予以排除。
- 除非使用
在 [權限] 下,選取 [對 openid 與 offline_access 權限授與管理員同意] 核取方塊。
選取 註冊。
啟用隱含授與流程
當您使用 MSAL.js 1.3 版或較舊版本,或使用應用程式註冊針對測試目的測試使用者流程時,有兩個原因可以啟用隱含授與流程。
使用下列步驟為您的應用程式啟用隱含授與流程:
選取您建立的應用程式註冊。
在 [管理] 底下,選取 [驗證]。
在 [隱含授與及混合式流程] 下,選取 [存取權杖 (用於隱含流程)] 和 [ID 權杖 (用於隱含及混合式流程)] 核取方塊。
選取 [儲存]。
備註
如果您的應用程式使用 MSAL.js 2.0 或更新版本,請勿啟用隱含授與流程,因為 MSAL.js 2.0+ 支援 OAuth 2.0 授權碼流程 (含 PKCE)。 如果您啟用隱含授與來測試使用者流程,請務必先停用隱含授與流程設定,再將應用程式部署至生產環境。
從隱含授與流程移轉
如果您有使用隱含流程的現有應用程式,建議您使用支援 PKCE 的架構來移轉為使用授權碼流程,例如 MSAL.js 2.0+ 。
當應用程式註冊代表的所有生產 SPA 都開始使用授權碼流程時,請停用隱含授與流程設定,如下所示:
- 在左側功能表的 [管理]下,選取 [驗證]。
- 在 隱含授權 下,取消選取 [存取令牌] 和 [標識符令牌] 複選框。
- 選取 [儲存]。
如果您保持啟用隱含流程 (已核取),使用隱含流程的應用程式仍可繼續運作。