使用Azure B2C登录时如何在自定义页面中嵌入登录控件

Question

我正在使用Azure AD B2C示例，并且出于测试目的，我正在使用经过稍微修改的“单页”应用sample。我还创建了一个Azure B2C和一个测试api（作为Azure函数）。测试API和“单页”应用程序已在Azure B2C中注册为正确的应用程序，并且安装程序正常运行。

方案是用户在Azure B2C中登录，获取令牌并使用令牌调用Azure函数。 问题是登录页面在单独的窗口中打开，地址栏中显示了B2C网址。我想要的是将登录控件嵌入到“单页应用”中。

我仔细阅读了文档，发现可以自定义登录页面（在“用户流策略/页面布局”中），但看来它仍然是单独的页面，我不希望这样。另一个想法是让“单页应用程序”将登录请求作为AJAX请求发送到我自己的服务器，然后该服务器代表该用户执行登录，然后将令牌中继回“单页应用程序”。但这似乎有很多麻烦和不必要的间接，我想尽可能避免。

以下是该场景的屏幕截图：

Answer 1

当前，单页应用程序无法嵌入登录体验，因为Azure AD B2C不允许CORS或iframing，这意味着您可以使用以下选项：

1. 浏览器重定向
2. 浏览器弹出窗口
3. 通过您自己的服务器将登录凭据发布到a resource owner password credentials (ROPC) policy

Answer 2

出于安全原因，Azure B2C服务不允许您这样做。按照他们的FAQ：

  

我的应用程序可以在iFrame中打开Azure AD B2C页面吗？

     

否，出于安全原因，无法在其中打开Azure AD B2C页面   iFrame。我们的服务与浏览器进行通讯以禁止   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 上托管的应用程序与 https://login.contoso.com 上运行的 Azure AD B2C 具有相同的来源。

功能描述here