共享设备下PWA中WebAuthn指纹登录的用户识别问题

一、需求可行性说明 #

完全可以实现共享设备下的用户指纹绑定与身份识别，核心问题在于你当前的实现未将用户ID与WebAuthn凭证做强关联，导致仅验证设备级的生物识别，而非用户级的凭证匹配。

二、具体实现方案 #

1. 注册模块（绑定用户ID与指纹） #

注册时必须在创建凭证的参数中明确指定唯一用户身份，让生成的凭证与用户绑定，而非仅绑定设备：

• 调整createCredentialDefaultArgs，补充必填的user字段，其中id为用户的唯一二进制标识（可由后端生成，比如UUID转字节数组），name对应用户输入的登录ID：

const createCredentialDefaultArgs = {
  publicKey: {
    rp: { name: "你的PWA应用名称" },
    user: {
      id: new Uint8Array([/* 后端返回的用户唯一二进制ID */]),
      name: "用户输入的登录ID",
      displayName: "用户显示名称"
    },
    challenge: new Uint8Array([/* 后端生成的随机挑战值 */]),
    pubKeyCredParams: [{ type: "public-key", alg: -7 }], // 采用ES256算法
    authenticatorSelection: {
      userVerification: "required", // 强制要求生物识别验证
      authenticatorAttachment: "platform" // 绑定设备内置验证器（如手机指纹模块）
    }
  }
};

• 调用navigator.credentials.create后，将返回的PublicKeyCredential对象中的rawId（凭证唯一二进制标识）或其Base64URL格式的id，与用户ID关联存储到后端数据库。

2. 登录模块（验证用户ID与指纹匹配） #

登录时需根据用户输入的ID，从后端获取该用户在当前设备对应的凭证信息，仅允许该凭证参与验证：

// 第一步：根据用户输入的ID，从后端拉取其绑定的凭证列表
const userCredentials = await fetch(`/api/get-user-credentials?userId=${用户输入的ID}`).then(res => res.json());

// 第二步：构建登录验证参数，指定仅允许该用户的凭证
const getCredentialArgs = {
  publicKey: {
    challenge: new Uint8Array([/* 后端生成的新随机挑战值 */]),
    allowCredentials: userCredentials.map(cred => ({
      type: "public-key",
      id: Uint8Array.from(atob(cred.id), c => c.charCodeAt(0)), // 将存储的Base64URL转成字节数组
      transports: ["internal"] // 指定使用设备内置验证器
    })),
    userVerification: "required"
  }
};

// 第三步：发起验证，只有用户指纹匹配对应凭证时才会成功
const assertion = await navigator.credentials.get(getCredentialArgs);

• 若用户输入他人ID，后端返回的是他人的凭证标识，当前用户的指纹对应的凭证不在allowCredentials列表中，验证会直接失败，无法伪造身份登录。

三、关于navigator.credentials.create返回值的说明 #

该函数返回的PublicKeyCredential对象中：

• rawId是当前用户在该设备上生成的凭证的唯一二进制标识，每个用户在同一设备上的凭证是唯一的（同一用户的多个指纹对应同一个凭证，用来解锁该凭证；不同用户的凭证完全独立）。
• 你需要保存这个标识与用户ID的关联关系，后续登录时通过allowCredentials指定验证范围，即可实现用户级的身份区分。

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