使用 Azure B2C 登錄時如何在自定義頁面中嵌入登錄控件

Question

我正在使用 Azure AD B2C 示例，出於測試目的，我使用了稍微修改過的 Single page app sample 。 我還創建了一個 Azure B2C 和一個測試 API（作為 Azure 函數）。 測試 API 和單頁應用程序已在 Azure B2C 中注冊為適當的應用程序，並且設置工作正常。

該場景是用戶登錄 Azure B2C，獲取令牌並使用令牌調用 Azure 函數。 問題是登錄頁面在地址欄中帶有 B2C Url 的單獨窗口中打開。 我想要的是將登錄控件嵌入到單頁應用程序中。

我瀏覽了文檔，發現可以自定義登錄頁面（在用戶流策略/頁面布局中），但它似乎仍然是一個單獨的頁面，我不想要。 另一個想法是讓單頁應用程序將登錄請求作為 AJAX 請求發送到我自己的服務器，然后該服務器代表該用戶執行登錄，然后將令牌中繼回單頁應用程序。 但這似乎很麻煩和不必要的間接，我想盡可能避免。

以下是場景截圖：

Answer 1

目前，單頁應用程序無法嵌入登錄體驗，因為 Azure AD B2C 不允許 CORS 或 iframe，這意味着您有以下選項：

1. 瀏覽器重定向
2. 瀏覽器彈出窗口
3. 通過您自己的服務器將登錄憑據發布到資源所有者密碼憑據 (ROPC) 策略

https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token?tabs=javascript#choose-between-a-pop中描述了瀏覽器彈出窗口和重定向之間的差異-up-or-redirect-experience

Answer 2

出於安全原因，Azure B2C 服務不允許你這樣做。 根據他們的常見問題解答：

我的應用可以在 iFrame 中打開 Azure AD B2C 頁面嗎？

不可以，出於安全原因，無法在 iFrame 中打開 Azure AD B2C 頁面。 我們的服務與瀏覽器通信以禁止 iFrame。 由於存在點擊劫持的風險，安全社區一般和 OAUTH2 規范建議不要將 iFrame 用於身份體驗。

這是為了將密碼僅作為用戶和 B2C 之間的共享秘密。 在此模型中，您的站點根本無法訪問密碼，它只能知道身份驗證的結果。

Answer 3

我認為 Azure AD B2C 中有一項處於“公共預覽”階段的新功能，允許您將 iframe 嵌入到您的頁面中。 然而，很少有考慮。

• 嵌入式登錄僅支持本地帳戶。 大多數社交身份提供商（例如，Google 和 Facebook）會阻止其登錄頁面在內嵌框架中呈現。
• 由於iframe 中的Azure AD B2C 會話 cookie被視為第三方 cookie，因此某些瀏覽器（例如隱身模式下的 Safari 或 Chrome）會阻止或清除這些 cookie，從而導致不良的用戶體驗。 為防止出現此問題，請確保您的應用程序域名和 Azure AD B2C 域具有相同的來源。 若要使用相同源，請為 Azure AD B2C 租戶啟用自定義域，然后使用相同源配置 Web 應用。 例如，一個應用程序托管在https://app.contoso.com具有相同的來源上運行天青AD B2C https://login.contoso.com 。

該功能描述為here