Windows平台Chrome下WebAuthn：如何优先显示Chrome弹窗跳过Windows弹窗

原因分析 #

在Windows系统上，Chrome默认优先调用系统级WebAuthn实现（对应Windows弹窗，用于Windows Hello或实体密钥），仅当系统选项被用户拒绝或不可用时，才会回退到Chrome自身的弹窗。虚拟认证器属于Chrome内置模拟环境，因此直接触发浏览器弹窗。测试人员遇到的"先系统弹窗、取消后出Chrome弹窗"是标准的 fallback 逻辑，但会导致体验不一致。

可行解决方案 #

1. 代码层面：通过WebAuthn参数强制优先浏览器弹窗 #

在调用navigator.credentials.create()（注册）或navigator.credentials.get()（登录）时，配置authenticatorSelection参数，指定认证器类型为跨平台（cross-platform），同时弱化用户验证要求：

const createOptions = {
  publicKey: {
    // 填充rp、user、challenge等必填参数
    authenticatorSelection: {
      authenticatorAttachment: "cross-platform", // 指定优先跨平台认证器
      userVerification: "discouraged" // 避免强制触发Windows Hello的用户验证
    }
  }
};

// 注册Passkey
const credential = await navigator.credentials.create(createOptions);

• 原理：当指定authenticatorAttachment: "cross-platform"时，Chrome会优先启用自身的WebAuthn栈，弹出浏览器弹窗让用户选择可用的跨平台认证器（如实体密钥），而非直接调用系统弹窗。
• 注意：如果业务必须支持平台认证器（如Windows Hello），此方案不适用，需调整参数。

2. 浏览器配置：启用实验性Flag（仅用于测试/内部环境） #

Chrome提供了实验性开关强制优先浏览器UI，适合开发或内部测试场景：

1. 在Chrome地址栏输入 chrome://flags/#webauthn-prefer-browser-ui
2. 将选项改为Enabled
3. 重启Chrome

• 局限性：这是实验性功能，不保证长期存在，且无法强制所有用户开启，仅适合调试或内部环境统一配置。

3. 排除系统凭证（可选补充） #

如果用户设备已存在系统级Passkey凭证，可通过excludeCredentials参数排除，避免系统弹窗触发：

const createOptions = {
  publicKey: {
    // 填充其他参数
    excludeCredentials: [
      {
        type: "public-key",
        id: Uint8Array.from(/* 已存在的系统凭证ID */),
        transports: ["internal"] // 指定排除平台内部凭证（如Windows Hello）
      }
    ]
  }
};

• 注意：需要提前获取已存在的凭证ID，适合已有用户的场景，无法完全覆盖首次注册的情况。

注意事项 #

• 所有WebAuthn调用必须在HTTPS环境下执行（localhost开发环境除外），否则参数配置可能不生效。
• authenticatorAttachment: "cross-platform"会过滤掉平台认证器（如Windows Hello），如果业务需要支持平台认证器，需权衡体验一致性和功能覆盖。

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