Azure AD B2C自定义策略下自动补全残留错误消息问题求助

问题概述 #

使用自定义策略+自定义HTML/CSS的Azure AD B2C环境中，登录页面出现如下异常：

• 未输入用户名/密码点击登录时，正常弹出必填项红色错误提示；
• 手动输入账号密码时，错误提示会自动消失；
• 选择浏览器保存的账号自动补全填充后，错误提示持续显示，但实际不影响登录操作。

已排查确认：

• 使用非自定义策略的流程时，错误提示可正常自动消失；
• 空白策略启动包中问题依然存在，说明与自定义HTML/CSS修改无关；
• 尝试修改自定义HTML，但selfassert核心逻辑由Azure控制，未解决问题。

解决方案 #

由于浏览器自动填充不会触发常规的input事件，而Azure AD B2C默认的错误提示逻辑仅监听手动输入事件，因此需要通过自定义脚本补充监听自动填充场景，具体步骤如下：

1. 确保策略允许执行自定义脚本 #

在自定义策略的对应ContentDefinition中开启脚本执行权限，示例配置：

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://你的自定义HTML托管地址/login.html</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">Signin and Signup</Item>
    <Item Key="ScriptExecution">Allow</Item>
  </Metadata>
</ContentDefinition>

2. 在自定义HTML中添加自动填充监听脚本 #

在自定义HTML的<script>标签中加入以下逻辑，监听字段值变化（包含自动填充场景）并清除错误提示：

document.addEventListener('DOMContentLoaded', function() {
  // 定位用户名、密码字段和错误提示元素
  const usernameInput = document.querySelector('input[name="logonIdentifier"]');
  const passwordInput = document.querySelector('input[name="password"]');
  const errorElements = document.querySelectorAll('.error'); // 根据实际页面错误元素调整选择器

  // 清除错误提示的函数
  function hideErrorMessages() {
    errorElements.forEach(el => {
      el.style.display = 'none';
      // 若Azure B2C通过类控制显示，可替换为 el.classList.remove('visible');
    });
  }

  // 监听手动输入事件
  if (usernameInput) usernameInput.addEventListener('input', hideErrorMessages);
  if (passwordInput) passwordInput.addEventListener('input', hideErrorMessages);

  // 定时检查字段值变化，覆盖浏览器自动填充场景
  let prevUsername = usernameInput?.value || '';
  let prevPassword = passwordInput?.value || '';
  setInterval(() => {
    const currUsername = usernameInput?.value || '';
    const currPassword = passwordInput?.value || '';
    if (currUsername !== prevUsername || currPassword !== prevPassword) {
      hideErrorMessages();
      prevUsername = currUsername;
      prevPassword = currPassword;
    }
  }, 500);

  // 监听Chrome等webkit内核浏览器的自动填充动画事件（可选增强）
  function handleAutoFillAnimation(e) {
    if (e.animationName === 'onAutoFillStart') hideErrorMessages();
  }
  if (usernameInput) usernameInput.addEventListener('webkitAnimationStart', handleAutoFillAnimation);
  if (passwordInput) passwordInput.addEventListener('webkitAnimationStart', handleAutoFillAnimation);
});

注意：需根据实际页面中错误提示元素的类名或选择器调整errorElements的查询逻辑，比如部分Azure B2C实例可能使用div#errorMessage或其他类名。

3. 测试验证 #

更新策略和自定义HTML后，测试浏览器自动填充账号密码的场景，确认错误提示会自动消失。

内容的提问来源于stack exchange，提问作者Vedran Opancar