WebAuthn集成Windows Hello问题：指定allowCredentials后PIN弹窗缺失

核心原因分析 #

当你指定allowCredentials时，浏览器需要明确知道该凭证对应的认证器类型，缺少关键字段会导致系统无法识别这是Windows Hello本地凭证，转而引导至外部设备/安全密钥选项。

解决方案1：添加transports字段 #

Windows Hello的凭证属于本地内部认证器，必须在allowCredentials条目中指定transports: ["internal"]，告诉浏览器调用本地Windows Hello组件：

const publicKeyCredentialRequestOptions = {
    challenge: serverChallenge,
    rpId: window.location.hostname,
    userVerification: 'required',
    allowCredentials: [
        {
            type: "public-key",
            id: allowCredentials[0].id,
            transports: ["internal"] // 关键：添加这个字段
        }
    ],
};

解决方案2：验证凭证ID的格式正确性 #

即使你确认ID值正确，也要确保它是WebAuthn要求的Uint8Array类型（或正确的base64url编码字符串）。如果后端返回的是普通base64字符串，需要转换为Uint8Array：

// 示例：将base64url字符串转换为Uint8Array
const decodeBase64Url = (str) => {
    str = str.replace(/-/g, '+').replace(/_/g, '/');
    return Uint8Array.from(atob(str), c => c.charCodeAt(0));
};

const publicKeyCredentialRequestOptions = {
    // ...其他参数
    allowCredentials: [
        {
            type: "public-key",
            id: decodeBase64Url(allowCredentials[0].id),
            transports: ["internal"]
        }
    ],
};

额外检查项 #

• 确认请求时的rpId和创建凭证时完全一致（必须是同一域名）
• 创建凭证时是否设置了userVerification: 'required'，确保凭证本身支持强制验证
• 清除浏览器缓存后重新测试，避免旧凭证数据干扰

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