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

Question

我正在使用Azure AD B2C示例，并且出于测试目的，我使用的是稍微修改过的单页应用程序sample。我还创建了一个Azure B2C和一个测试API（作为Azure功能）。测试API和单页应用程序在Azure B2C中注册为正确的应用程序，并且设置正常。

该方案是Azure B2C中的用户登录，获取令牌并使用令牌来调用Azure功能。问题是登录页面在单独的窗口中打开，地址栏中有B2C Url。我想要的是在单页面应用程序中嵌入登录控件。

我浏览了文档，发现可以自定义登录页面（在用户流策略/页面布局中），但它似乎仍然是一个单独的页面，我不想要。另一个想法是让单页应用程序将登录请求作为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页面吗？

否，出于安全原因，无法在iFrame中打开Azure AD B2C页面。我们的服务与浏览器通信以禁止iFrame。一般的安全社区和OAUTH2规范建议不要使用iFrame进行身份体验，因为存在点击劫持的风险。

这是为了将密码仅作为用户和B2C之间的共享密钥。在此模型中，您的站点根本无法访问密码，它只能知道身份验证的结果。