使用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函数。问题是登录页面在一个单独的窗口中打开，地址栏中有B2C URL。我希望将登录控件嵌入到Single Page App中。

我浏览了文档，发现可以定制登录页面(在用户流策略/页面布局中)，但它似乎仍然是一个单独的页面，这是我不想要的。另一个想法是让Single Page App将登录请求作为AJAX请求发送到我自己的服务器，然后该服务器代表该用户执行登录，然后将令牌传递回Single Page App。但这似乎有很多麻烦和不必要的间接信息，我想尽可能避免这些。

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

推荐答案

目前，单页应用无法嵌入登录体验，因为Azure AD B2C不支持CORS或IFRAMING，这意味着您只有以下选项：

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

https://docs.microsoft.com/en-us/azure/active-directory/develop/scenario-spa-acquire-token?tabs=javascript#choose-between-a-pop-up-or-redirect-experience

中介绍了浏览器弹出和重定向之间的区别

这篇关于使用Azure B2C登录时如何在自定义页面中嵌入登录控件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！