使用 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