Chrome中WebAuthn Conditional UI无法正常工作的问题求助

1. 避开Shadow DOM限制 #

Chrome的条件式WebAuthn UI要求触发用的输入框必须处于顶层DOM树中。如果你的登录表单被React组件封装到了Shadow DOM（比如部分UI组件库的容器）里，Chrome就无法检测到输入框的点击事件，导致弹窗不出现。

• 检查表单所在的DOM层级，若在Shadow DOM内，把表单直接挂载到document.body或者非Shadow DOM的根节点下。
• React实现示例：

  import { useEffect, useRef } from 'react';
  
  function WebAuthnLogin() {
    const formContainerRef = useRef(null);
  
    useEffect(() => {
      // 创建独立DOM节点挂载到body
      const container = document.createElement('div');
      document.body.appendChild(container);
      formContainerRef.current = container;
  
      // 组件卸载时清理
      return () => document.body.removeChild(container);
    }, []);
  
    useEffect(() => {
      if (!formContainerRef.current) return;
  
      // 手动创建符合要求的原生表单
      const form = document.createElement('form');
      form.autocomplete = 'on';
  
      const usernameInput = document.createElement('input');
      usernameInput.type = 'text';
      usernameInput.name = 'username';
      usernameInput.autocomplete = 'username webauthn';
  
      const passwordInput = document.createElement('input');
      passwordInput.type = 'password';
      passwordInput.name = 'password';
      passwordInput.autocomplete = 'current-password webauthn';
  
      form.append(usernameInput, passwordInput);
      formContainerRef.current.appendChild(form);
  
      // 初始化条件式认证请求
      async function initConditionalAuth() {
        const [isConditionalAvailable, isUvpaaAvailable] = await Promise.all([
          window.PublicKeyCredential.isConditionalMediationAvailable(),
          window.PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable()
        ]);
  
        if (isConditionalAvailable && isUvpaaAvailable) {
          try {
            const credential = await navigator.credentials.get({
              publicKey: {
                rpId: window.location.hostname,
                allowCredentials: [], // 按需配置允许的凭证ID
                userVerification: 'preferred',
                mediation: 'conditional'
              }
            });
            // 处理获取到的凭证
            console.log('凭证获取成功:', credential);
          } catch (err) {
            console.error('条件式认证失败:', err);
          }
        }
      }
      initConditionalAuth();
    }, []);
  
    return null; // 表单已挂载到body，组件无需渲染内容
  }
  

2. 确保autocomplete属性配置正确 #

Chrome依赖输入框的autocomplete属性触发条件式UI，必须严格设置：

• 表单本身设置autocomplete="on"
• 用户名输入框：autocomplete="username webauthn"
• 密码输入框：autocomplete="current-password webauthn"

注意：React有时会自动优化autocomplete属性，建议用原生DOM操作设置，或者在JSX中明确传递属性（避免被框架覆盖）。

3. 调整请求触发时机 #

React的DOM渲染是异步的，必须等表单元素完全挂载到DOM后，再调用navigator.credentials.get()。

• 不要在组件刚挂载时立即调用，可确保在useEffect中DOM元素已存在再执行请求，临时测试也可通过setTimeout延迟触发。

4. 检查Vite的HTTPS配置 #

WebAuthn要求页面运行在HTTPS环境（localhost除外，但Chrome部分版本对localhost的HTTP支持有波动）。

• 在Vite配置中开启HTTPS：

  // vite.config.js
  import { defineConfig } from 'vite';
  import react from '@vitejs/plugin-react';
  
  export default defineConfig({
    plugins: [react()],
    server: {
      https: true
    }
  });
  

• 确保rpId与当前页面域名匹配（localhost环境下设为localhost）。

5. 避开React合成事件干扰 #

如果输入框绑定了React的onClick事件，可能会干扰Chrome的原生事件检测。可以改用原生DOM事件监听触发请求：

useEffect(() => {
  const usernameInput = document.querySelector('input[name="username"]');
  if (usernameInput) {
    usernameInput.addEventListener('click', () => initConditionalAuth());
    // 卸载时移除监听
    return () => usernameInput.removeEventListener('click', initConditionalAuth);
  }
}, []);

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