如何在adb2c自定义策略中移除邮箱与密码输入框的自动填充功能

在Azure AD B2C自定义策略开发场景下，可通过以下两种稳定方案实现自动填充功能的移除：

方案一：修改声明类型元数据配置 #

该方案为官方原生支持的配置方式，无需额外代码侵入，适配性最高。

• 找到自定义策略文件中ClaimsSchema节点下对应的邮箱、密码声明定义
• 给对应声明添加Metadata配置项，设置自动填充相关属性为关闭状态，示例配置如下：
  邮箱字段配置示例：

  <ClaimType Id="signInName">
    <DisplayName>邮箱地址</DisplayName>
    <DataType>String</DataType>
    <UserInputType>TextBox</UserInputType>
    <Restriction>
      <Pattern RegularExpression="^[a-zA-Z0-9.!#$%&amp;'^_`{}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$" HelpText="请输入合法的邮箱地址" />
    </Restriction>
    <!-- 新增以下配置禁用自动填充 -->
    <Metadata>
      <Item Key="autocomplete">off</Item>
      <Item Key="autocorrect">off</Item>
      <Item Key="autocapitalize">off</Item>
    </Metadata>
  </ClaimType>
  

  密码字段配置示例：

  <ClaimType Id="password">
    <DisplayName>密码</DisplayName>
    <DataType>String</DataType>
    <UserInputType>Password</UserInputType>
    <Metadata>
      <!-- 密码字段优先使用new-password，部分浏览器对off的兼容性较差，该值禁用填充效果更稳定 -->
      <Item Key="autocomplete">new-password</Item>
    </Metadata>
  </ClaimType>
  

• 修改完成后上传策略文件即可生效

方案二：自定义页面JS注入属性 #

如果你使用了自定义UI模板，可以通过托管的HTML页面注入JS代码，强制给输入框添加禁用自动填充的属性：

• 在你的自定义HTML模板中添加以下JS代码：

  window.addEventListener('DOMContentLoaded', function() {
    // 禁用邮箱自动填充
    const emailInput = document.querySelector('input[type="email"], #signInName');
    if (emailInput) {
      emailInput.setAttribute('autocomplete', 'off');
      emailInput.setAttribute('autocorrect', 'off');
      emailInput.setAttribute('autocapitalize', 'off');
    }
    // 禁用密码自动填充
    const passwordInputs = document.querySelectorAll('input[type="password"]');
    passwordInputs.forEach(input => {
      input.setAttribute('autocomplete', 'new-password');
    });
  });
  

• 将修改后的HTML模板重新上传到你的托管地址，更新策略中对应的页面URI配置即可生效

注意：测试前请先清除浏览器本地缓存，避免旧的页面缓存或填充记录影响效果验证。

内容的提问来源于stack exchange，提问作者Ankush Daga