Laragear/WebAuthn 设备注册出现422错误求助

问题重现 #

升级到Laravel 9后，使用Laragear/WebAuthn进行设备注册时返回422状态码，控制台错误信息如下：

POST https://example.com/webauthn/register 422
#fetch @ webauthn.js:159
register @ webauthn.js:317
await in register (async)
(anonymous) @ settings:1690
dispatch @ jquery.min.js:3
q.handle @ jquery.min.js:3

Response {type: 'basic', url: 'https://example.com/webauthn/register', redirected: false, status: 422, ok: false, …}

前端注册代码：

const webAuthn = new WebAuthn({
    registerOptions: '/webauthn/register/options',
    register: '/webauthn/register',
});

webAuthn.register()
.then(response => {
    console.log(response);
    //My Codes
})
.catch(response => {
    console.log(response);
   //My Codes
})

可能原因及解决方法 #

1. CSRF令牌验证失败 #

Laravel 9默认启用严格的CSRF防护，WebAuthn请求未携带有效令牌会触发422错误。

• 检查页面是否包含CSRF meta标签：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 手动为WebAuthn请求添加CSRF头：

  const webAuthn = new WebAuthn({
      registerOptions: '/webauthn/register/options',
      register: '/webauthn/register',
      headers: {
          'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
      }
  });
  

2. 注册选项会话过期 #

从/webauthn/register/options获取的注册选项有短时间有效期，用户操作延迟会导致选项过期，后端拒绝请求。

• 优化前端流程，确保获取选项后立即发起注册；
• 若存在异步操作，需重新获取选项再执行注册逻辑。

3. 包版本兼容性问题 #

确认Laragear/WebAuthn版本支持Laravel 9：

• 执行composer show laragear/webauthn查看当前版本；
• 若版本过低，执行composer require laragear/webauthn:^4.0（根据Laravel 9适配版本调整）升级包。

4. 后端验证规则不满足 #

422错误通常对应后端验证失败，需查看具体错误详情：

• 打开storage/logs/laravel.log，查找最近的422错误条目，会显示具体验证失败的字段；
• 检查config/webauthn.php中的rp_name、rp_id是否与当前域名匹配；
• 确认用户模型已实现Laragear\WebAuthn\Contracts\WebAuthnAuthenticatable接口，且相关字段（如id）符合要求。

5. 前后端库版本不匹配 #

前端webauthn.js版本需与后端Laragear/WebAuthn版本兼容：

• 检查前端引入的webauthn.js版本，确保与后端包文档推荐版本一致；
• 若使用CDN引入，替换为对应版本的资源文件。

内容的提问来源于stack exchange，提问作者Fidelis E Peter