当前位置：首页 > 文章列表 > 文章 > 前端 > HTML表单接入WebAuthn完整教程

HTML表单接入WebAuthn完整教程

2025-08-22 08:55:46 0浏览收藏

一分耕耘，一分收获！既然打开了这篇文章《HTML表单接入WebAuthn方法详解》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

是的，HTML表单可通过JavaScript与WebAuthn API交互实现认证流程，用户可使用硬件安全密钥如YubiKey进行身份验证以增强安全性；WebAuthn利用公钥密码学将私钥安全存储于硬件或设备安全区域，公钥则注册至服务器；HTML表单用于发起注册或登录请求并接收响应，前端JavaScript通过fetch向后端获取注册或认证选项，调用navigator.credentials.create()或get()触发浏览器提示用户使用安全密钥完成验证，随后将返回的Credential对象通过AJAX提交至服务器验证challenge一致性、签名有效性及公钥注册状态，确认用户身份；为解决兼容性问题，可检测window.PublicKeyCredential是否存在以判断浏览器支持情况，并使用如@webauthn/browser-ponyfill等polyfill为不支持的浏览器提供兼容；针对用户丢失或更换安全密钥的情况，应提供多因素认证作为备用方案，允许注册多个密钥以实现恢复，或由管理员谨慎重置认证信息；WebAuthn安全性依赖硬件密钥保护私钥、公钥密码学防止私钥推导、挑战-响应机制抵御重放攻击、Origin绑定防止跨站滥用以及用户验证确保操作授权，但仍需防范设备感染恶意软件导致API调用被拦截的风险，因此需结合系统更新、杀毒软件等综合措施保障整体安全，该方案完整实现了基于标准API的高安全身份认证流程。

HTML表单如何实现WebAuthn？怎样使用硬件安全密钥？

HTML表单可以通过JavaScript与WebAuthn API交互，从而实现WebAuthn的认证流程。用户可以使用硬件安全密钥（例如YubiKey）进行身份验证，增强安全性。

解决方案：

WebAuthn的核心在于利用公钥密码学，将用户的私钥安全地存储在硬件安全密钥或设备的安全区域中，而公钥则注册到服务器。HTML表单在整个流程中扮演着发起请求和接收响应的角色。

表单发起注册/认证请求:

当用户尝试注册或登录时，前端JavaScript代码会创建一个注册或认证请求。这个请求会通过HTML表单的提交事件触发。这个请求包含了一些参数，例如challenge（服务器生成的随机数，用于防止重放攻击）、rpId（ relying party ID，通常是你的域名）等。

<form id="webauthnForm">
  <button type="button" id="registerButton">注册</button>
  <button type="button" id="loginButton">登录</button>
</form>

<script>
const form = document.getElementById('webauthnForm');
const registerButton = document.getElementById('registerButton');
const loginButton = document.getElementById('loginButton');

registerButton.addEventListener('click', async () => {
  // 1. 向后端请求注册选项
  const registrationOptions = await fetch('/register/options').then(res => res.json());

  // 2. 调用 WebAuthn API
  const credential = await navigator.credentials.create(registrationOptions);

  // 3. 将 credential 发送到后端进行验证和保存
  const verificationResult = await fetch('/register/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credential)
  }).then(res => res.json());

  if (verificationResult.success) {
    alert('注册成功！');
  } else {
    alert('注册失败：' + verificationResult.message);
  }
});

loginButton.addEventListener('click', async () => {
  // 1. 向后端请求认证选项
  const authenticationOptions = await fetch('/login/options').then(res => res.json());

  // 2. 调用 WebAuthn API
  const credential = await navigator.credentials.get(authenticationOptions);

  // 3. 将 credential 发送到后端进行验证
  const verificationResult = await fetch('/login/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify(credential)
  }).then(res => res.json());

  if (verificationResult.success) {
    alert('登录成功！');
  } else {
    alert('登录失败：' + verificationResult.message);
  }
});
</script>

调用WebAuthn API:
利用navigator.credentials.create()（注册）或navigator.credentials.get()（认证）方法调用WebAuthn API。浏览器会提示用户使用安全密钥。用户插入安全密钥并进行验证（例如，通过PIN码或生物识别）。
处理WebAuthn API的响应:
WebAuthn API会返回一个Credential对象，包含了公钥、签名等信息。这个对象需要通过HTML表单提交（实际上通常是使用AJAX，而不是传统的表单提交）到服务器进行验证。
服务器端验证:
服务器接收到Credential对象后，需要进行验证。验证过程包括：
- 验证challenge是否与之前生成的一致。
- 验证签名是否有效。
- 验证公钥是否已注册。
如果验证通过，则认为用户已成功注册或登录。

WebAuthn的兼容性问题如何解决？

WebAuthn并非所有浏览器都原生支持。为了解决兼容性问题，可以使用polyfill。例如，@webauthn/browser-ponyfill 可以为不支持WebAuthn的浏览器提供兼容性支持。另外，要检测浏览器是否支持WebAuthn，可以使用window.PublicKeyCredential。

if (window.PublicKeyCredential) {
  console.log("WebAuthn is supported!");
} else {
  console.log("WebAuthn is not supported. Consider using a polyfill.");
}