WebAuthn请求timeout在移动设备不生效的问题咨询

云原生阿岚

2026-7-21

WebAuthn 移动端超时失效问题解决方案

问题原因

你遇到的是移动端WebAuthn的常见行为：移动端的指纹/Face ID验证弹窗是系统级组件，浏览器无法通过标准的timeout参数强制终止这个系统弹窗，因此原生配置的timeout在移动端会失效；而桌面端的验证界面由浏览器控制，所以能正常触发超时。

解决方法：手动实现超时控制

通过AbortController配合定时器，主动终止WebAuthn请求，替代原生timeout的作用。具体实现如下：

const publicKey = {
    "challenge": "testchanllengevalue",
    "rp": { "name": "test.com" },
    "user": {
      "id": "12345-543212-12345-54321",
      "name": "NAME",
      "displayName": "NAME"
    },
    "attestation": "direct",
    // 原生timeout可保留，桌面端仍会生效
    "timeout": 20000,
    "authenticatorSelection": {
      "authenticatorAttachment": "platform",
      "requireResidentKey": false,
      "userVerification": "required"
    },
    "pubKeyCredParams": [
      { "type": "public-key", "alg": -7 },
      { "type": "public-key", "alg": -257 }
    ]
};

// 初始化AbortController
const abortController = new AbortController();
// 设置自定义超时定时器
const timeoutTimer = setTimeout(() => {
  abortController.abort();
  console.log("验证请求已超时终止");
}, 20000);

try {
  // 将signal传入create方法，用于后续终止请求
  const credential = await navigator.credentials.create({
    publicKey,
    signal: abortController.signal
  });
  // 验证成功，清除定时器
  clearTimeout(timeoutTimer);
  // 处理生成的凭证逻辑
} catch (error) {
  clearTimeout(timeoutTimer);
  if (error.name === "AbortError") {
    // 处理超时终止的场景
    console.log("验证超时，请重新尝试");
  } else {
    // 处理其他验证错误
    console.error("验证失败：", error);
  }
}