使用YubiKey调用WebAuthn API时遇安全密钥不识别错误求助

核心问题根源 #

这个错误本质是浏览器/安全密钥无法找到匹配的已注册凭证，和YubiKey是否存储凭证无关——YubiKey确实不存储完整凭证，但会存储密钥材料的衍生信息，用于匹配服务器返回的挑战和凭证参数。

关键参数遗漏/错误点排查 #

1. challenge 不能用全零值 #

WebAuthn要求challenge必须是加密安全的随机值，全零值会被浏览器判定为无效请求，直接触发安全校验失败。必须生成符合要求的随机字节数组（建议32字节），再转成base64url格式传入。

示例代码：

// 生成合法的challenge
const challenge = window.crypto.getRandomValues(new Uint8Array(32));
const base64urlChallenge = btoa(String.fromCharCode(...challenge))
  .replace(/\+/g, '-')
  .replace(/\//g, '_')
  .replace(/=/g, '');

2. allowCredentials 参数格式必须严格匹配注册凭证 #

如果指定allowCredentials，必须确保：

• type字段固定为"public-key"（和create请求时一致）
• id必须是注册时返回的rawId转成的base64url格式（直接用create返回的credential.id即可，该字段已经是base64url编码）
• 可选的transports字段要匹配YubiKey的实际传输方式（比如["usb", "nfc"]）

示例正确配置：

// 假设注册时返回的凭证对象为credential
const allowCredentials = [
  {
    type: "public-key",
    id: credential.id,
    transports: ["usb"]
  }
];

3. rpId 必须和注册时完全一致 #

get请求的rpId必须严格匹配create请求时的rp.id，比如注册时用的是example.com，get时不能用www.example.com，否则浏览器会认为是不同的依赖方，无法匹配凭证。

4. 确保运行在安全上下文 #

WebAuthn API仅支持HTTPS环境（localhost除外），非安全上下文下会限制功能，导致凭证匹配失败。

完整get请求示例 #

navigator.credentials.get({
  publicKey: {
    challenge: base64urlChallenge,
    rpId: "your-domain.com", // 和注册时的rp.id完全一致
    userVerification: "preferred",
    allowCredentials: [/* 正确配置的凭证数组 */]
  }
})
.then(assertion => { /* 处理断言结果 */ })
.catch(err => console.error(err));

总结 #

最可能的问题是challenge使用了全零值，其次是rpId不匹配或allowCredentials格式错误。先替换challenge为加密安全的随机值，再检查rpId和凭证参数的一致性，基本就能解决该错误。

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