Chrome中WebAuthn条件UI不显示问题求助

结合你的描述和代码，以下是几个关键排查点和解决方案：

1. 确保authenticate函数显式设置mediation: 'conditional' #

Chrome的条件UI（Conditional UI）要求在调用navigator.credentials.get()时必须显式指定mediation: 'conditional'，这是触发自动填充式Passkey选择界面的核心配置。如果你的authenticate()函数里漏掉了这个参数，Chrome不会触发条件UI，而Safari可能会宽松处理。

示例正确的authenticate实现：

async function authenticate() {
  // 从后端获取认证挑战
  const authOptions = await fetch('/auth/get-challenge', { method: 'POST' })
    .then(res => res.json());

  // 关键：必须添加mediation: 'conditional'
  const credential = await navigator.credentials.get({
    publicKey: authOptions,
    mediation: 'conditional'
  });

  // 将凭证发送到后端验证
  const response = await fetch('/auth/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ credential })
  });

  return response.ok ? await response.json() : null;
}

2. 优化表单的autocomplete属性配置 #

Chrome对autocomplete字段的解析更严格，尝试以下调整：

• 在表单中添加一个隐藏的webauthn专用字段，确保Chrome能识别到Passkey触发点：

  <form id="ac-login-form" method="POST" action="/auth/username" class="signin-form center"> 
    <input type="hidden" autocomplete="webauthn">
    <div class="form-group"> 
      <input type="text" id="username" class="form-control" placeholder="Username" 
             aria-labelledby="username-label" name="username" 
             autocomplete="username" required autofocus/> 
    </div> 
    <div class="form-group"> 
      <input type="submit" class="form-control btn btn-primary submit px-3" value="sign in"/> 
    </div> 
  </form> 
  

  单独拆分autocomplete="username"和隐藏的webauthn字段，避免Chrome混淆字段用途。

3. 验证Chrome的Passkey存储状态 #

进入Chrome设置 → 密码和表单 → 密码管理器 → Passkeys，确认你注册的Passkey已保存，并且：

• 关联的用户名与登录表单输入的用户名完全一致
• 网站域名显示为localhost（与你的HTTPS服务器域名匹配）

如果Passkey未正确存储或关联信息不匹配，Chrome不会触发条件UI。

4. 检查代码执行时机 #

确保你的条件UI检测代码在DOM完全加载后执行，避免因表单未渲染完成导致Chrome无法识别字段：

document.addEventListener('DOMContentLoaded', async () => {
  if (window.PublicKeyCredential && PublicKeyCredential.isConditionalMediationAvailable) {
    try {
      const cma = await PublicKeyCredential.isConditionalMediationAvailable();
      if (cma) {
        const user = await authenticate();
        if (user) {
          loading.start();  
          location.href = '/home';
        } else {
          throw new Error('User not found.');
        }
      }
    } catch (e) {
      loading.stop();
      if (e.name !== 'NotAllowedError') {
        console.error(e);
        alert(e.message);
      } else {
        console.log("User cancelled the operation")
      }
    }
  }
});

5. 确认Chrome相关功能状态 #

• 访问chrome://flags/#webauthn-conditional-ui，确保该选项处于Enabled状态（默认应为开启）
• 确认你的Chrome版本（118.0.5993.70）支持Passkey条件UI（该版本已支持，此步为兜底检查）

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