表单中的生物认证怎么集成？如何支持指纹或面部识别？

webauthn是一种基于公私钥加密的web标准，通过浏览器与设备内置的生物识别系统（如指纹、面部识别）安全交互，实现无密码登录。其工作原理分为两个阶段：首先是凭证注册，服务器生成挑战并由认证器生成密钥对，私钥存于设备，公钥由服务器存储；其次是凭证认证，用户通过生物识别触发私钥签名，服务器用公钥验证签名以确认身份。该机制依赖web authentication api，确保挑战唯一、来源合法，并通过签名计数器防克隆，需配合回退登录方式和服务器端安全验证库（如@simplewebauthn/server）实现完整流程，是目前集成生物认证最安全且标准化的解决方案。

将生物认证（如指纹或面部识别）集成到表单中，核心在于利用现代浏览器提供的 Web Authentication API (WebAuthn)。它不是让你直接访问用户的生物传感器，而是通过浏览器作为中介，与设备的原生认证机制（如Windows Hello、macOS的Touch ID、iOS的Face ID/Touch ID）进行安全交互，完成用户身份的验证。

解决方案

实现表单中的生物认证，主要依赖于WebAuthn API来完成凭证的注册（用户将生物特征与你的网站关联）和后续的认证（用户通过生物特征登录）。你的Web应用（Relying Party）与用户的设备（Authenticator）之间通过浏览器进行通信，服务器端则负责生成挑战（Challenge）、存储用户的公钥，并验证认证器的签名。这个过程是高度安全的，因为它利用了设备内置的硬件安全模块，并且能有效抵抗钓鱼攻击。

WebAuthn 是什么，它如何工作？

WebAuthn，全称Web Authentication API，是W3C制定的一项标准，也是FIDO2认证协议的核心组成部分。简单来说，它让网页应用能够以一种安全、标准化的方式与用户的认证器（可以是内置的生物识别传感器，也可以是外部的FIDO安全密钥）进行交互，实现无密码或多因素认证。

它工作的流程，在我看来，可以拆分成两个主要阶段：

1. 凭证注册（Credential Registration）： 这就像用户第一次在你的网站上“录入”他的生物特征。当用户选择使用生物识别登录时：

• 你的服务器（Relying Party）会生成一个独一无二的“挑战”（challenge），这通常是一串随机的字节，用于防止重放攻击。同时，还会准备一些“创建选项”（creation options），比如用户ID、用户名、以及期望的认证器类型等。
• 前端JavaScript会调用

  navigator.credentials.create()

  登录后复制
  方法，并将这些选项传递给它。
• 浏览器接收到请求后，会提示用户进行生物识别验证（比如扫描指纹或面部）。
• 用户的设备（认证器）在验证成功后，会生成一对新的公钥/私钥对。私钥被安全地存储在设备内部（通常是硬件安全模块中，无法导出），而公钥则连同一些元数据（如认证器ID、签名计数器）一起，通过浏览器返回给你的前端。
• 前端再将这个返回的凭证对象发送给你的服务器。
• 服务器接收到公钥后，会验证这个凭证的有效性（比如挑战是否匹配、来源是否合法等），然后将这个公钥与用户的账户关联并存储起来。这个公钥，就是后续验证用户身份的“钥匙”。

2. 凭证认证（Credential Authentication）： 当用户下次登录时，他不再需要输入密码，而是通过生物识别来证明“我是我”。

• 你的服务器会再次生成一个全新的“挑战”，并可能提供一些“获取选项”（get options），比如允许使用的凭证ID列表（如果用户有多个注册过的设备）。
• 前端JavaScript调用

  navigator.credentials.get()

  登录后复制
  方法，并传递这些选项。
• 浏览器再次提示用户进行生物识别验证。
• 用户的设备（认证器）会使用之前注册时生成的私钥，对服务器提供的挑战进行签名。
• 签名后的结果（一个“断言”Assertion）连同其他验证信息，通过浏览器返回给你的前端。
• 前端将这个断言发送给你的服务器。
• 服务器接收到断言后，会使用之前存储的公钥来验证这个签名。如果签名有效，且挑战、来源等信息都匹配，那么服务器就知道这个用户是合法的，可以允许他登录。同时，服务器通常会更新存储的签名计数器，以检测潜在的克隆攻击。

整个过程听起来有点绕，但核心就是用一套公私钥体系，把用户设备的生物识别能力安全地嫁接到Web登录流程中。

实现 WebAuthn 集成时常见的挑战与注意事项

说实话，WebAuthn虽然强大，但实际集成起来，还是有些地方需要特别留意的，别以为它很简单。

• 用户体验与兼容性回退： 并不是所有用户都有支持WebAuthn的设备，或者他们可能没有启用生物识别。所以，你必须提供一个优雅的“回退机制”，比如传统的密码登录、短信验证码等。如何引导用户，让他们知道有这种更便捷、安全的登录方式，同时又不至于让他们在不支持的情况下感到沮丧，这是个设计挑战。我个人觉得，一开始就给用户多种选择，或者在检测到支持WebAuthn时才提示，会比较好。
• 服务器端实现的复杂度： 这块其实挺容易踩坑的。服务器端需要处理挑战的生成、凭证的存储、以及最关键的——对前端返回的各种复杂数据结构进行解析和加密验证。你需要一个健壮的WebAuthn库来处理这些细节，比如Node.js的

  @simplewebauthn/server

  登录后复制
  、Python的

  webauthn

  登录后复制
  库或者Java的

  webauthn4j

  登录后复制
  。手动实现这些加密验证，那简直是给自己挖坑。
• 安全细节不容忽视：
  • 挑战的唯一性和时效性： 每次注册或认证的挑战必须是随机且只能使用一次的，否则容易被重放攻击。
  • 源（Origin）验证： 务必验证返回的凭证或断言是否来自你注册的合法域名，防止跨站伪造。
  • 签名计数器（Signature Counter）： 这是用来检测认证器是否被克隆的关键。每次认证成功，服务器都要更新并检查这个计数器，如果发现计数器不增反降，那就有问题了。
  • 用户验证（User Verification, UV）与用户在场（User Presence, UP）： WebAuthn支持两种验证级别。UV是真正的生物识别验证（如指纹、面部），而UP可能只是简单地触摸一下传感器。对于高安全要求的场景，你肯定要强制要求UV。
• 凭证管理： 用户可能会在多个设备上注册生物识别，或者丢失设备后需要撤销凭证。你的系统需要一套完善的凭证管理机制，包括显示用户已注册的设备、允许用户删除或禁用特定凭证等。这就像管理用户的密码一样，需要有明确的生命周期。
• 跨设备认证的区分： WebAuthn支持两种认证器：平台认证器（Platform Authenticator，即设备内置的生物识别，比如手机或电脑上的指纹/面部识别）和漫游认证器（Roaming Authenticator，通常是USB安全密钥，比如YubiKey）。对于表单中的指纹或面部识别，我们主要关注的是平台认证器。在开发时，要清楚你期望支持哪种，以及如何区分它们。

前端代码示例与后端验证逻辑概览

要让前端和后端“说上话”，并正确地处理WebAuthn流程，你需要一些关键的代码片段和逻辑。这里我不会给出完整的可运行代码，因为那太长了，而且具体实现会依赖于你选择的WebAuthn库和后端语言，但我们可以看看核心的思路。

Blackink AI纹身生成

创建类似纹身的设计，生成独特纹身

17

查看详情

前端（JavaScript）部分：

当用户点击“使用指纹/面部注册”按钮时：

// 假设后端接口返回了创建凭证所需的选项
async function registerBiometricCredential() {
    try {
        const response = await fetch('/api/webauthn/register/options'); // 从后端获取注册选项
        const options = await response.json();

        // 将Base64 URL编码的挑战和用户ID等转换为ArrayBuffer
        options.challenge = base64UrlToUint8Array(options.challenge);
        options.user.id = base64UrlToUint8Array(options.user.id);
        if (options.excludeCredentials) {
            options.excludeCredentials.forEach(cred => {
                cred.id = base64UrlToUint8Array(cred.id);
            });
        }

        // 调用WebAuthn API创建凭证
        const credential = await navigator.credentials.create({
            publicKey: options
        });

        // 将凭证对象序列化并发送给后端进行验证和存储
        const attestationResponse = {
            id: credential.id,
            rawId: uint8ArrayToBase64Url(credential.rawId),
            response: {
                clientDataJSON: uint8ArrayToBase64Url(credential.response.clientDataJSON),
                attestationObject: uint8ArrayToBase64Url(credential.response.attestationObject),
            },
            type: credential.type,
            clientExtensionResults: credential.clientExtensionResults,
        };

        const verifyResponse = await fetch('/api/webauthn/register/verify', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(attestationResponse),
        });

        if (verifyResponse.ok) {
            alert('生物认证注册成功！');
        } else {
            const errorData = await verifyResponse.json();
            alert('注册失败: ' + (errorData.message || '未知错误'));
        }

    } catch (error) {
        console.error('注册生物认证失败:', error);
        alert('操作取消或出现错误。');
    }
}

// 辅助函数：Base64 URL字符串转Uint8Array
function base64UrlToUint8Array(base64Url) { /* ... 实现细节 ... */ }
// 辅助函数：Uint8Array转Base64 URL字符串
function uint8ArrayToBase64Url(uint8Array) { /* ... 实现细节 ... */ }

当用户点击“使用指纹/面部登录”按钮时：

// 假设后端接口返回了认证所需的选项
async function authenticateBiometricCredential() {
    try {
        const response = await fetch('/api/webauthn/authenticate/options'); // 从后端获取认证选项
        const options = await response.json();

        options.challenge = base64UrlToUint8Array(options.challenge);
        if (options.allowCredentials) {
            options.allowCredentials.forEach(cred => {
                cred.id = base64UrlToUint8Array(cred.id);
            });
        }

        // 调用WebAuthn API获取凭证
        const credential = await navigator.credentials.get({
            publicKey: options
        });

        // 将凭证对象序列化并发送给后端进行验证
        const assertionResponse = {
            id: credential.id,
            rawId: uint8ArrayToBase64Url(credential.rawId),
            response: {
                clientDataJSON: uint8ArrayToBase64Url(credential.response.clientDataJSON),
                authenticatorData: uint8ArrayToBase64Url(credential.response.authenticatorData),
                signature: uint8ArrayToBase64Url(credential.response.signature),
                userHandle: credential.response.userHandle ? uint8ArrayToBase64Url(credential.response.userHandle) : null,
            },
            type: credential.type,
            clientExtensionResults: credential.clientExtensionResults,
        };

        const verifyResponse = await fetch('/api/webauthn/authenticate/verify', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(assertionResponse),
        });

        if (verifyResponse.ok) {
            alert('生物认证登录成功！');
            // 重定向或更新UI
        } else {
            const errorData = await verifyResponse.json();
            alert('登录失败: ' + (errorData.message || '未知错误'));
        }

    } catch (error) {
        console.error('认证生物认证失败:', error);
        alert('操作取消或出现错误。');
    }
}

后端验证逻辑概览（以Node.js +

@simplewebauthn/server

注册验证：

1. 接收前端数据： 获取前端传来的

   attestationResponse

   登录后复制
   。
2. 获取注册选项： 从服务器会话或缓存中取出之前为该用户生成的

   options

   登录后复制
   （包含挑战）。
3. 调用库验证： 使用WebAuthn库的

   verifyRegistrationResponse

   登录后复制
   方法。这个方法会做大量的工作：
   • 解析

     clientDataJSON

     登录后复制
     ，验证挑战是否匹配，验证来源（origin）。
   • 解析

     attestationObject

     登录后复制
     ，提取公钥、AAGUID（认证器全局唯一ID）、签名计数器等。
   • 验证attestation签名（如果选择了）。
   • 确保用户ID是唯一的。
4. 存储凭证： 如果验证成功，将返回的

   verified

   登录后复制
   对象中的

   credentialID

   登录后复制
   、

   publicKey

   登录后复制
   、

   counter

   登录后复制
   等信息与用户账户关联并持久化存储到数据库。

   publicKey

   登录后复制
   通常以Base64编码的字符串形式存储。

认证验证：

1. 接收前端数据： 获取前端传来的

   assertionResponse

   登录后复制
   。
2. 获取认证选项： 从服务器会话或缓存中取出之前为该用户生成的

   options

   登录后复制
   （包含挑战）。
3. 获取用户已注册凭证： 从数据库中查询该用户所有已注册的WebAuthn凭证（主要是

   credentialID

   登录后复制
   和

   publicKey

   登录后复制
   ）。
4. 调用库验证： 使用WebAuthn库的

   verifyAuthenticationResponse

   登录后复制
   方法。这个方法会：
   • 解析

     clientDataJSON

     登录后复制
     ，验证挑战、来源。
   • 解析

     authenticatorData

     登录后复制
     ，验证RP ID Hash、标志位（如用户是否在场、用户是否验证）。
   • 使用从数据库中获取的对应

     publicKey

     登录后复制
     来验证

     signature

     登录后复制
     。
   • 比较并更新存储的

     signature counter

     登录后复制
     。如果传入的

     counter

     登录后复制
     小于数据库中存储的，则可能是重放攻击或认证器克隆，需要拒绝。
5. 登录用户： 如果所有验证都通过，则认为用户身份合法，执行登录操作。

这套体系虽然初看起来有些复杂，但一旦理解了其背后的安全原理和WebAuthn API的设计，你会发现它确实是目前实现生物认证集成最可靠、最标准的方式。

以上就是表单中的生物认证怎么集成？如何支持指纹或面部识别？的详细内容，更多请关注php中文网其它相关文章！