angular - 如何设置我在用户流 AZ AD B2C 中看到的屏幕

Question

按照本教程，我已使用 MSAL 包成功将 B2C 身份验证集成到我的 Angular 应用程序中:

Configure authentication in a sample Angular...直到第 3 步。

当权限必须像这样设置时，“问题”就出现了:https://login.microsoftonline.com/common，正如它所说的here而不是这个https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi_reset_v2

并将权限域设置为通用或使用我的租户 ID 我只能看到此屏幕常见的:

使用租户 ID:当我单击“使用另一个帐户”->“登录”选项时，只能看到 github 并使用 key 登录

当我想看到的屏幕是这个时(由于身份提供者):

我的 AD 中是否缺少某些链接或配置？

解决方案:

正如 Greg 告诉我的，如果您想查看在 azure 中显示为用户流程的屏幕(最后一张图片)，您需要创建自定义策略:

Create user flows and custom policies in Azure Active Directory B2C

创建另外两个应用程序并获取入门包并使用您自己的租户名称进行配置，如链接所示。

if you want to add more social providers

就我而言，当尝试上传 xml 时出现错误，这个非常有用的工具帮助了我(您可以覆盖它创建的文件) Quick deploy samples

最后在需要 SMAL 配置的权限字段中设置“https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_YOUR_CUSTOM_POLICY_NAME”

Answer 1

您应该检查如何使用用户流程/自定义策略自定义界面。您不仅可以自定义现有的用户体验(登录屏幕、密码重置等)，还可以使用自定义策略创建自己的“旅程”。

您可以将这些自定义部署到您的 Azure AD B2C 租户，而不是您的应用程序中。这是link