使用 Azure B2C 登录时如何在自定义页面中嵌入登录控件
How to embed login control in custom page when using Azure B2C login
我正在使用 Azure AD B2C 示例，出于测试目的，我使用的是稍微修改过的单页应用程序 sample。我还创建了一个 Azure B2C 和一个测试 api（作为 Azure 函数）。测试 API 和单页应用程序在 Azure B2C 中注册为正确的应用程序并且设置工作正常。
场景是用户在Azure B2C 中登录，获取令牌并使用令牌调用Azure 功能。 问题是登录页面在单独的 window 中打开，地址栏中带有 B2C Url。我想要的是在单页应用程序中嵌入登录控件。
我浏览了文档，发现可以自定义登录页面（在用户流程 Policies/Page 布局中），但它似乎仍将是一个单独的页面，这是我不想要的。另一个想法是让单页应用程序将登录请求作为 AJAX 请求发送到我自己的服务器，然后该服务器代表该用户执行登录，然后将令牌中继回单页应用程序。但这似乎很麻烦和不必要的间接，我想尽可能避免。
场景截图如下：
目前，单页应用程序无法嵌入登录体验，因为 Azure AD B2C 不允许 CORS 或 iframing，这意味着您有以下选择：
- 浏览器重定向
- 一个浏览器弹出窗口
- 正在通过您自己的服务器将登录凭据发布到a resource owner password credentials (ROPC) policy
中描述了浏览器弹出窗口和重定向之间的区别
出于安全原因，Azure B2C 服务不允许您这样做。根据他们的 FAQ：
Can my app open up Azure AD B2C pages within an iFrame?
No, for security reasons, Azure AD B2C pages cannot be opened within
an iFrame. Our service communicates with the browser to prohibit
iFrames. The security community in general and the OAUTH2
specification, recommend against using iFrames for identity
experiences due to the risk of click-jacking.
这是为了将密码作为用户与 B2C 之间的共享秘密。在此模型中，您的站点根本无权访问密码，它只能知道身份验证的结果。
我认为 Azure AD B2C 中有一项处于“public 预览”阶段的新功能，允许您在页面中嵌入 iframe。不过也有一些注意事项。
- Embedded sign-in supports local accounts only. Most social identity providers (for example, Google and Facebook) block their sign-in pages from being rendered in inline frames.
- Because Azure AD B2C session cookies within an iframe are considered third-party cookies, certain browsers (for example Safari or Chrome in incognito mode) either block or clear these cookies, resulting in an undesirable user experience. To prevent this issue, make sure your application domain name and your Azure AD B2C domain have the same origin. To use the same origin, enable custom domains for Azure AD B2C tenant, then configure your web app with the same origin. For example, an application hosted on https://app.contoso.com has the same origin as Azure AD B2C running on https://login.contoso.com.
功能描述here
我正在使用 Azure AD B2C 示例，出于测试目的，我使用的是稍微修改过的单页应用程序 sample。我还创建了一个 Azure B2C 和一个测试 api（作为 Azure 函数）。测试 API 和单页应用程序在 Azure B2C 中注册为正确的应用程序并且设置工作正常。
场景是用户在Azure B2C 中登录，获取令牌并使用令牌调用Azure 功能。 问题是登录页面在单独的 window 中打开，地址栏中带有 B2C Url。我想要的是在单页应用程序中嵌入登录控件。
我浏览了文档，发现可以自定义登录页面（在用户流程 Policies/Page 布局中），但它似乎仍将是一个单独的页面，这是我不想要的。另一个想法是让单页应用程序将登录请求作为 AJAX 请求发送到我自己的服务器，然后该服务器代表该用户执行登录，然后将令牌中继回单页应用程序。但这似乎很麻烦和不必要的间接，我想尽可能避免。
场景截图如下：
目前，单页应用程序无法嵌入登录体验，因为 Azure AD B2C 不允许 CORS 或 iframing，这意味着您有以下选择：
- 浏览器重定向
- 一个浏览器弹出窗口
- 正在通过您自己的服务器将登录凭据发布到a resource owner password credentials (ROPC) policy
出于安全原因，Azure B2C 服务不允许您这样做。根据他们的 FAQ：
Can my app open up Azure AD B2C pages within an iFrame?
No, for security reasons, Azure AD B2C pages cannot be opened within an iFrame. Our service communicates with the browser to prohibit iFrames. The security community in general and the OAUTH2 specification, recommend against using iFrames for identity experiences due to the risk of click-jacking.
这是为了将密码作为用户与 B2C 之间的共享秘密。在此模型中，您的站点根本无权访问密码，它只能知道身份验证的结果。
我认为 Azure AD B2C 中有一项处于“public 预览”阶段的新功能，允许您在页面中嵌入 iframe。不过也有一些注意事项。
- Embedded sign-in supports local accounts only. Most social identity providers (for example, Google and Facebook) block their sign-in pages from being rendered in inline frames.
- Because Azure AD B2C session cookies within an iframe are considered third-party cookies, certain browsers (for example Safari or Chrome in incognito mode) either block or clear these cookies, resulting in an undesirable user experience. To prevent this issue, make sure your application domain name and your Azure AD B2C domain have the same origin. To use the same origin, enable custom domains for Azure AD B2C tenant, then configure your web app with the same origin. For example, an application hosted on https://app.contoso.com has the same origin as Azure AD B2C running on https://login.contoso.com.
功能描述here