WebAuthn调用navigator.credentials.create报cannot convert to dictionary错误排查

这个报错的核心是你传入navigator.credentials.create的publicKey对象不符合WebAuthn规范要求的字典结构，具体有三个直接诱因：

• 你拿到的响应字符串不是合法JSON格式，本质是可执行的JS代码片段：包含new Uint8Array()、Uint8Array.from()这类JS实例化语句，还有//开头的注释，这些语法都不被JSON支持，JSON.parse不仅没法执行这些语句生成对应类型的值，还会直接解析失败得到畸形对象
• WebAuthn强制要求challenge和user.id两个字段必须是ArrayBuffer类型，你仅通过JSON解析得到的对象中，这两个字段要么是字符串形式的代码片段，要么缺失，完全不符合类型要求
• 你拿到的原始字符串外层包裹了多余的引号，还带了publicKey:前缀，结构本身就是畸形的，解析后无法直接得到可用的配置对象

标准方案（推荐） #

首先调整后端返回逻辑，不要返回JS代码片段，改为返回标准JSON格式：

1. 后端把challenge、user.id这类二进制数据统一转成Base64URL编码的字符串
2. 移除所有JS注释、函数调用语句，只保留纯配置字段
3. 去掉多余的publicKey前缀和外层引号

前端拿到响应后按以下步骤处理：

1. 用JSON.parse正常解析得到普通配置对象
2. 手动将Base64URL编码的challenge、user.id转成ArrayBuffer类型，参考转换工具函数：

function base64urlToBuffer(base64url) {
  // 替换Base64URL特殊字符为标准Base64格式
  const base64 = base64url.replace(/-/g, '+').replace(/_/g, '/');
  // 补全Base64填充位
  const padLength = (4 - (base64.length % 4)) % 4;
  const paddedBase64 = base64.padEnd(base64.length + padLength, '=');
  // 转二进制后生成ArrayBuffer
  const binaryStr = atob(paddedBase64);
  const buffer = new Uint8Array(binaryStr.length);
  for (let i = 0; i < binaryStr.length; i++) {
    buffer[i] = binaryStr.charCodeAt(i);
  }
  return buffer.buffer;
}

3. 组装符合要求的publicKey对象传入方法：

// 假设解析后的后端配置为serverConfig
const publicKey = {
  ...serverConfig,
  challenge: base64urlToBuffer(serverConfig.challenge),
  user: {
    ...serverConfig.user,
    id: base64urlToBuffer(serverConfig.user.id)
  }
};
// 调用WebAuthn方法
const credential = await navigator.credentials.create({ publicKey });

临时兼容方案 #

如果暂时无法调整后端返回，可直接执行JS代码片段得到合法对象（注意仅在确定返回内容完全可信的场景下使用，避免代码注入风险）：

// 清理原始字符串，提取出对象代码片段
const rawStr = 你的原始响应字符串;
const objCode = rawStr.replace(/^"*publicKey:\s*/, '').replace(/;?\s*"*$/, '');
// 执行代码得到publicKey对象
const publicKey = new Function(`return ${objCode}`)();
// 调用WebAuthn方法
const credential = await navigator.credentials.create({ publicKey });

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