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

Question

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

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

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

有没有办法做到这一点？

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

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

卡琳

Answer 1

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

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

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

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

更多信息请点击以下链接：-

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。我必须使用“email_ver_but_edit”按钮的 CSS id。

#email_ver_but_edit {
  visibility: hidden;
}

我建议每个人使用您喜欢的浏览器的一些 Inspector 工具检查他们的 html 页面。如果您正在开发 iOS 应用程序并希望在您的 iOS 设备上检查网页，您可以执行以下操作：

• 在您的 iOS 设备上打开设置页面
• 点击“Safari”
• 向下滚动到“高级”
• 启用“Web 检查器”
• 现在通过 USB 数据线将您的 iOS 设备连接到您的 Mac
• 在 iOS 设备上打开您要检查的网页
• 在 Mac 上打开 Safari 浏览器
• 转到“开发者”菜单并查找带有您的 iOS 设备名称的菜单条目。
• 您应该会在此处看到一个条目，该条目会在 Mac 上打开检查器并让您检查 iOS 设备上的页面。

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