在 AzureB2C 自定义策略中调整电子邮件验证用户界面

Question

我的 AzureB2C 自定义策略基于此示例： https://github.com/azure-ad-b2c/samples/tree/master/policies/split-email-verification-and-signup

这将电子邮件验证与实际注册分开，提供更好的用户体验。

我想删除电子邮件验证流程中的第三页，如上图所示。（这是带有 'Change email' 按钮的那个）

有办法实现吗？

我研究了官方文档和很多例子，但还没有找到解决方案:(

感谢任何正确方向的提示。

卡琳

Answer 1

• 您可以尝试隐藏更改电子邮件按钮或更合适，从包含此条目的 html 页面文件中删除该条目，很可能是“selfAsserted.html”。请在您的 CSS 页面中找到以下条目并修改它以隐藏关联的 HTML 元素或删除它们以省略“更改电子邮件”页面并继续到用户注册详细信息页面。

  ' <style type="text/css">
      .changeClaims
     {
        visibility: hidden;
      }
     </style> '

selfAsserted.html 中更改电子邮件按钮的默认名称是 changeclaims。要查找按钮名称，请在注册页面上使用 Inspect 等浏览器工具检查页面源代码。

• 删除页面源 HTML 文件中的“changeclaims”条目将直接将用户重定向到用户详细信息填写和注册页面。

请在下面找到 link 了解更多信息：-

https://docs.microsoft.com/en-us/azure/active-directory-b2c/add-password-reset-policy?pivots=b2c-user-flow

https://docs.microsoft.com/en-us/azure/active-directory-b2c/customize-ui-with-html?pivots=b2c-user-flow

Answer 2

@KartikBhiwapurkar-MT 的回答为我指明了解决问题的正确方向。

我不知道为什么要添加

<style type="text/css">
  .changeClaims {
    visibility: hidden
  }
</style>

我的 selfAsserted.html 和 unified.html 没有用。在我的例子中，selfAsserted.html 和 unified.html 中的“更改电子邮件”按钮的名称不是 changeclaims。我不得不使用按钮的 CSS id，它是“email_ver_but_edit”。

#email_ver_but_edit {
  visibility: hidden;
}

我建议大家使用您最喜欢的浏览器的某些检查器工具检查他们的 html 页面。如果您正在进行 iOS 应用程序开发并且想要在 iOS 设备上检查网页，您可以执行以下操作：

在你的 iOS 设备上打开设置页面
点击“Safari”
向下滚动到“高级”
启用“Web 检查器”
现在通过 USB 数据线将您的 iOS 设备连接到您的 Mac
在iOS设备
在 mac
转到菜单“开发人员”并查找包含您的 iOS 设备名称的菜单项。
在这里您应该会看到一个条目，它可以打开 Mac 上的检查器并让您检查 iOS 设备上的页面。

感谢 Apple 提供此功能。它为我节省了很多时间。

在 AzureB2C 自定义策略中调整电子邮件验证用户界面

Adjust email verification user interface in AzureB2C custom policies

azure-ad-b2c

azure-ad-b2c-custom-policy