WebAuthn注册报错：Failed to read publicKey属性问题排查

核心问题分析 #

你提到已经定义了publicKey但仍报缺少rp成员的错，大概率是**publicKey对象的结构不符合规范**——rp必须是PublicKeyCredentialCreationOptions（也就是你传给navigator.credentials.create的publicKey参数）的直接子属性，而非嵌套在其他层级里。

常见错误示例 #

如果你的代码是类似这样的结构，就会触发报错：

// 错误写法：缺少直接的rp成员
const createCredentialDefaultArgs = {
  publicKey: {
    user: {
      id: Uint8Array.from([1,2,3]),
      name: "user@example.com",
      displayName: "Test User"
    },
    challenge: Uint8Array.from([4,5,6]),
    pubKeyCredParams: [{ type: "public-key", alg: -7 }]
  }
};

navigator.credentials.create(createCredentialDefaultArgs)

正确代码示例 #

rp（依赖方信息）必须作为publicKey对象的直接属性存在，规范结构如下：

const createCredentialDefaultArgs = {
  publicKey: {
    // 必填的rp成员
    rp: {
      name: "你的网站名称", // 必填项，不能为空字符串
      id: "example.com" // 可选，对应网站域名，增强安全性
    },
    user: {
      id: Uint8Array.from([1,2,3,4]), // 必须是Uint8Array类型的用户唯一标识
      name: "user@example.com",
      displayName: "测试用户"
    },
    challenge: Uint8Array.from([5,6,7,8]), // 服务器生成的随机挑战，需为Uint8Array类型
    pubKeyCredParams: [
      { type: "public-key", alg: -7 }, // ES256算法
      { type: "public-key", alg: -257 } // RS256算法
    ],
    timeout: 60000, // 可选，注册超时时间（毫秒）
    attestation: "none" // 可选，证明方式，默认none即可
  }
};

// 正确调用流程
navigator.credentials.create(createCredentialDefaultArgs)
  .then(credential => console.log("注册成功", credential))
  .catch(err => console.error("注册失败", err));

额外排查点 #

• 确认rp对象中的name属性存在且不为空字符串，这是rp的强制必填项。
• 检查服务器返回的challenge是否正确转换为Uint8Array，如果是base64编码字符串，需先解码再转换。
• 确保user.id是Uint8Array类型，不能直接传递普通字符串。

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