Ubuntu下Firefox 118.0.1中WebAuthn的navigator.credentials.get()报错问题

首先你提供的代码存在明显语法错误，这是导致调用失败的直接原因：

• rpId: "localhost",后面多了错误的}],，破坏了publicKey对象的结构，浏览器无法正确解析参数，进而抛出上下文相关的错误。

修正后的代码如下：

$("#loginButton").click(async function() {
    try {
        const result = await navigator.credentials.get({
            publicKey: {
                challenge: new Uint8Array([139, 66, 87, 64, 66, 25, 78, 
                    64, 66, 25, 87, 139, 64, 66, 25, 78]),
                rpId: "localhost",
                userVerification: "preferred"
            }
        });
        console.log("获取凭证成功:", result);
    } catch (err) {
        console.error("获取凭证失败:", err);
    }
});

除此之外，还需要注意以下关键点：

• allowCredentials参数（可选但建议）：如果浏览器无法自动匹配你之前注册的凭证，可显式添加该数组，指定已注册凭证的type和id（从create接口返回的rawId获取），示例：

  allowCredentials: [
      {
          type: "public-key",
          id: new Uint8Array([/* 之前注册得到的rawId字节数组 */])
      }
  ]
  

• Challenge必须为随机值：你当前使用固定的challenge数组，测试阶段可临时使用，但正式环境必须由服务端生成16字节及以上的随机挑战值，否则存在安全风险，也可能被浏览器拦截。
• Firefox环境配置检查：在地址栏输入about:config，确认以下配置为true：
  • security.webauth.webauthn_enabled
  • security.webauth.webauthn_enable_usbtoken（针对YubiKey这类USB密钥）

若修正语法后仍报错，建议排查：

1. 之前调用navigator.credentials.create()时的rpId是否和get时完全一致（必须是localhost，不能是127.0.0.1）。
2. YubiKey是否已正确注册该站点的凭证，可通过YubiKey管理工具查看已注册的WebAuthn凭证。

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