Azure AD B2C 忘记密码：完成验证前禁用继续按钮

针对你提到的用户未验证验证码就点击“继续”导致报错的问题，有两个可行的优化方案：

方案一：完成验证前禁用“继续”按钮 #

这个方案需要修改自定义HTML模板，通过JavaScript控制按钮状态，避免用户误操作：

1. 在忘记密码页面模板中，给“验证”按钮和“继续”按钮分别添加唯一ID，比如verify-btn和continue-btn
2. 添加脚本监听验证流程，初始状态下禁用“继续”按钮，验证成功后再启用
   示例代码片段：

<!-- 页面按钮部分 -->
<button id="verify-btn" type="submit" name="verify">验证</button>
<button id="continue-btn" type="submit" name="continue" disabled>继续</button>

<!-- 脚本部分 -->
<script>
document.addEventListener('DOMContentLoaded', function() {
  const verifyBtn = document.getElementById('verify-btn');
  const continueBtn = document.getElementById('continue-btn');

  // 监听验证按钮提交，结合页面DOM变化判断验证状态
  verifyBtn.addEventListener('click', function(e) {
    const observer = new MutationObserver(function(mutations) {
      mutations.forEach(function(mutation) {
        // 检测验证成功后的DOM变化（比如验证码输入区被隐藏）
        if (!document.getElementById('verification-code-container')) {
          continueBtn.disabled = false;
          observer.disconnect();
        }
      });
    });
    observer.observe(document.body, { childList: true, subtree: true });
  });
});
</script>

实际实现时需根据你的Custom Policies页面结构，调整DOM监听逻辑，确保准确捕获验证成功的状态。

方案二：验证成功后直接跳转，跳过“继续”步骤 #

这个方案需要修改Custom Policies的XML配置，让验证步骤完成后自动进入重置密码环节，无需用户点击“继续”：

1. 打开User Journey配置文件，找到密码重置流程节点
2. 调整验证步骤的NextStep配置，直接指向重置密码的步骤，移除中间的“继续”页面节点
   示例配置片段：

<UserJourney Id="PasswordReset">
  <OrchestrationSteps>
    <!-- 步骤1：收集邮箱并发送验证码 -->
    <OrchestrationStep Order="1" Type="ClaimsExchange">
      <ClaimsExchanges>
        <ClaimsExchange Id="PasswordResetUsingEmailAddressExchange" TechnicalProfileReferenceId="LocalAccountDiscoveryUsingEmailAddress" />
      </ClaimsExchanges>
    </OrchestrationStep>
    <!-- 步骤2：验证验证码，成功后直接进入重置密码步骤 -->
    <OrchestrationStep Order="2" Type="ClaimsExchange">
      <ClaimsExchanges>
        <ClaimsExchange Id="VerifyCodeExchange" TechnicalProfileReferenceId="LocalAccountVerifyCode" />
      </ClaimsExchanges>
      <NextStep>3</NextStep>
    </OrchestrationStep>
    <!-- 步骤3：重置密码 -->
    <OrchestrationStep Order="3" Type="ClaimsExchange">
      <ClaimsExchanges>
        <ClaimsExchange Id="ResetPasswordExchange" TechnicalProfileReferenceId="LocalAccountWritePasswordUsingObjectId" />
      </ClaimsExchanges>
    </OrchestrationStep>
    <!-- 步骤4：生成并返回令牌 -->
    <OrchestrationStep Order="4" Type="SendClaims" CpimIssuerTechnicalProfileReferenceId="JwtIssuer" />
  </OrchestrationSteps>
  <ClientDefinition ReferenceId="DefaultWeb" />
</UserJourney>

同时需确保LocalAccountVerifyCode这个TechnicalProfile配置正确，验证成功后会自动流转到下一个步骤，无需额外用户操作。

内容的提问来源于stack exchange，提问作者Jonathan Mabrito