简化嵌入式密码重置 Azure B2C 自定义策略答案

【问题标题】：Simplify Embeded Password Reset Azure B2C Custom Policies简化嵌入式密码重置 Azure B2C 自定义策略
【发布时间】：2022-07-13 21:21:40
【问题描述】：

我需要使用自定义策略为我的项目创建身份验证和密码重置流程。我开始使用Azure B2C embedded password reset。对于密码重置流程，这是结果

是否可以：

删除第三步，如下图所示。电子邮件仍然经过验证，但用户不需要知道它。
或使用 javascript 自动在第 2 步和第 4 步之间进行转换。在这种情况下，我如何知道在哪个屏幕上触发允许这种自动化的 javascript。我可以从 javascript 代码中获取“声明”吗？

感谢您的帮助

【问题讨论】：

我使用了@Jas Suri 建议的解决方案，但第三步仍然显示一秒钟，然后转到第四步。请问你有同样的行为吗？
为了最多防止这种行为，我完全隐藏了 HTML dom 的主体以获得空白页面。类似 document.body.display=none

标签： azure-ad-b2c azure-ad-b2c-custom-policy

【解决方案1】：

您可以使用 JavaScript mutator 函数。用它来检测 Continue 按钮的属性发生了变化（变为启用），然后触发一个函数隐藏 Change 按钮并在 Continue 按钮上执行点击事件。

【讨论】：

【解决方案2】：

查看您的问题以及您为减少密码重置流程中的步骤而选择的选项看起来很像我在这里解决的问题。所涉及的TechnicalProfiles 等是从样本中按原样使用的，所以我已经包含了我使用的 JS 并解释了它消除了什么。

解决这个问题比我预期的更具挑战性，或者遇到其他 JS 自定义项。正如所选答案所暗示的那样，该过程中的每个步骤都不能保证会发生页面加载，并且按钮会在整个步骤中重复使用，因此您不能仅仅隐藏那些“毫无意义”的按钮，因为它们在以后的步骤中并非毫无意义.我能找到的最可靠的方法是监视 aria-hidden 属性并在此时更改页面。

我正在使用自定义 ContentDefinition 并将 DataUri 设置为 urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.8 但只要 ID 保持与 2.1.8 相同，它就可能适用于以前的页面版本——我没有使用 jQuery，但我使用的浏览器 API 在旧版浏览器中不可用。

我有一个辅助函数来创建aria-hidden 观察者：

    const createObserver = (name, onVisible, onHidden) => {
      let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

      let elem = document.getElementById(name)

      if (!!(elem)) {
        let observer = new MutationObserver(function (mutations) {
          mutations.forEach(function (mutation) {
            if (mutation.type == "attributes") {
              if (mutation.target.getAttribute('aria-hidden') == "true") {
                if (!!onHidden) {
                  onHidden()
                }
              } else {
                onVisible()
              }
            }
          });
        });
        observer.observe(elem, { attributes: true, attributeFilter: ['aria-hidden'] });
        return observer;
      }
      return undefined;
    }

然后我订阅了几个字段以调整页面：

    const inputEmailObserver = createObserver('email_intro', () => {
      document.getElementById('continue').style.display = "none";
    });
    const verifyCodeObserver = createObserver('email_info', () => {
      document.getElementById('continue').style.display = "none";
      document.getElementById('email').disabled = true;
    });

    const verificationSuccessObserver = createObserver('email_success', () => {
      document.getElementById('continue').style.display = "inline";

      // There's a pointless page that shows up after you've verified your e-mail
      //   so to avoid the confusion, continue is clicked for the user, taking them
      //   to the password reset page
      document.getElementById('continue').click();
    });

更改集中在Continue 按钮的行为上。它并没有真正的理由以我们希望流程工作的方式存在（我看不到它的用途大多数，但我可能会遗漏一些东西）。它唯一一次不返回错误消息，其目的是在用户完成电子邮件验证后将用户带到“设置新密码”，所以它甚至没有做那个点击Continue时的步骤。

第一个观察者从第一步中删除了Continue 按钮。这会在 UI 中留下“发送验证码”按钮和电子邮件输入。

第二个观察者隐藏了第二步的Continue按钮，并禁用了点击“发送验证码”后更改电子邮件地址的功能。

最后一个观察者在用户验证码确认有效后，为用户点击Continue按钮，省去了点击Continue按钮。

【讨论】：