如何用Web Authentication API实现无密码登录？-js教程-PHP中文网

WebAuthn通过非对称加密实现无密码登录，注册时生成密钥对并将公钥存于服务器，登录时由设备私钥签名挑战完成认证，私钥永不传输，有效防范钓鱼、凭证填充等攻击，提升安全性与用户体验。

如何用web authentication api实现无密码登录？

用Web Authentication API实现无密码登录，本质上就是用一种更安全、更便捷的方式来证明“你是你”，而不再依赖那些容易被破解、遗忘的传统密码。它利用了设备内置的安全硬件（比如指纹识别器、面部识别、TPM芯片，或者外接的安全密钥），通过加密学手段，让你的设备为你生成并管理一对密钥——私钥留在设备里绝不外出，公钥则交给服务器。登录时，你的设备用私钥签名一个由服务器发来的“挑战”，服务器用存储的公钥验证签名，整个过程你的私钥从未暴露，也就不存在被窃取或钓鱼的风险。这不光提升了安全性，还大大简化了登录流程，体验上简直是质的飞跃。

解决方案

要实现WebAuthn的无密码登录，我们需要在客户端（浏览器）和服务器端进行协同工作。这并非一蹴而就，它涉及到两个核心阶段：注册（Attestation）和认证（Assertion）。

在注册阶段，当用户决定启用无密码登录时，服务器会生成一个随机的“挑战”（challenge），并将其发送给客户端。客户端的JavaScript代码会调用

navigator.credentials.create()

登录后复制

方法，并传入这个挑战以及一些关于用户和依赖方（即你的网站）的信息。此时，浏览器会调起设备的认证器（比如指纹、面部识别或要求插入安全密钥），用户完成验证后，认证器会生成一对新的加密密钥：私钥安全地存储在设备内部，而公钥、一个凭证ID（credential ID）以及一些元数据则会被返回给浏览器。浏览器再将这些信息发送回服务器。服务器收到后，会验证这些信息的合法性（这个过程称为“Attestation验证”），确认无误后，便会将公钥和凭证ID等信息存储起来，与用户的账户关联。

// 客户端注册示例 (简化版)
async function registerWebAuthn() {
    try {
        // 1. 从服务器获取挑战和用户相关信息
        const response = await fetch('/api/webauthn/register/options');
        const options = await response.json();

        // 2. 转换为ArrayBuffer（WebAuthn API需要）
        options.challenge = base64UrlToBuffer(options.challenge);
        options.user.id = base64UrlToBuffer(options.user.id);
        // ... 其他ArrayBuffer转换

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

        // 4. 将创建的凭证发送回服务器进行验证和存储
        const attestationResponse = {
            id: credential.id,
            rawId: bufferToBase64Url(credential.rawId),
            response: {
                clientDataJSON: bufferToBase64Url(credential.response.clientDataJSON),
                attestationObject: bufferToBase64Url(credential.response.attestationObject),
            },
            type: credential.type,
        };
        await fetch('/api/webauthn/register/verify', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(attestationResponse)
        });

        alert('无密码登录已成功注册！');
    } catch (error) {
        console.error('注册失败:', error);
        alert('注册失败，请重试。');
    }
}

登录后复制

到了认证阶段，当用户尝试登录时，服务器同样会生成一个新的挑战。客户端调用

navigator.credentials.get()

登录后复制

方法，传入这个挑战以及之前注册时获得的凭证ID（如果用户有多个凭证，可以不指定，让浏览器去发现）。浏览器再次调起设备的认证器进行用户验证。验证成功后，认证器会使用之前存储的私钥对挑战进行签名，并将签名结果（一个“断言”Assertion）返回给浏览器。浏览器再将这个断言发送回服务器。服务器收到断言后，会使用之前存储的公钥来验证这个签名。如果签名有效，且挑战、来源等信息都匹配，那么服务器就认为用户已经成功认证，可以登录了。

// 客户端登录示例 (简化版)
async function loginWebAuthn() {
    try {
        // 1. 从服务器获取挑战
        const response = await fetch('/api/webauthn/login/options');
        const options = await response.json();

        // 2. 转换为ArrayBuffer
        options.challenge = base64UrlToBuffer(options.challenge);
        options.allowCredentials.forEach(cred => {
            cred.id = base64UrlToBuffer(cred.id);
        });

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

        // 4. 将获取的凭证发送回服务器进行验证
        const assertionResponse = {
            id: credential.id,
            rawId: bufferToBase64Url(credential.rawId),
            response: {
                clientDataJSON: bufferToBase64Url(credential.response.clientDataJSON),
                authenticatorData: bufferToBase64Url(credential.response.authenticatorData),
                signature: bufferToBase64Url(credential.response.signature),
                userHandle: credential.response.userHandle ? bufferToBase64Url(credential.response.userHandle) : null,
            },
            type: credential.type,
        };
        const verifyResponse = await fetch('/api/webauthn/login/verify', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(assertionResponse)
        });

        if (verifyResponse.ok) {
            alert('登录成功！');
            // 跳转到用户主页
        } else {
            throw new Error('服务器验证失败');
        }
    } catch (error) {
        console.error('登录失败:', error);
        alert('登录失败，请重试。');
    }
}

登录后复制

base64UrlToBuffer

登录后复制

和

bufferToBase64Url

登录后复制

是辅助函数，用于在Base64Url编码的字符串和ArrayBuffer之间转换，因为WebAuthn API和JSON传输通常需要这种转换。在实际项目中，你可能会使用一些现成的库来处理这些细节，比如Node.js端的

@simplewebauthn/server

登录后复制

或Python的

fido2

登录后复制

库。

服务器端的工作，除了生成挑战、存储公钥，最关键的是对客户端发来的Attestation和Assertion进行严格的验证。这包括检查挑战是否匹配、来源（origin）是否正确、签名是否有效、以及处理各种标志位（如用户验证状态、凭证计数器等）以防止重放攻击。这部分逻辑虽然复杂，但有标准规范可循，并且有许多开源库可以帮助我们实现。

WebAuthn相较于传统密码，究竟安全在哪里？

这个问题，其实触及了WebAuthn的根本价值。它不仅仅是“方便”那么简单，其安全性的提升是革命性的。我个人觉得，WebAuthn最核心的优势在于它从根本上解决了传统密码体系的几个顽疾。

首先，它对网络钓鱼（Phishing）有天然的免疫力。传统密码的问题在于，你的秘密（密码）需要被你输入到某个地方。钓鱼网站就是利用这一点，诱骗你在一个假冒的网站上输入密码。一旦你输入了，密码就被窃取了。但WebAuthn不同，你的私钥从未离开过你的设备，也从未被发送到任何服务器。认证过程是设备与服务器之间通过加密挑战-响应机制完成的。即使你访问了一个钓鱼网站，它也无法获取你的私钥，也无法伪造出有效的签名。你的浏览器和认证器会检查网站的域名（Origin），如果与注册时的域名不符，认证就不会成功。

其次，它有效抵御了凭证填充（Credential Stuffing）和暴力破解攻击。很多人习惯在不同网站使用相同或相似的密码。一旦某个网站的数据库被攻破，泄露的密码就会被攻击者用来尝试登录其他网站，这就是凭证填充。WebAuthn为每个网站生成唯一的密钥对，即使一个网站的公钥被泄露，也无法用于登录其他网站。而且，私钥是硬件保护的，无法被暴力破解。

AI社交封面生成器

一句话/一张图一键智能生成社交媒体图片的AI设计神器

108

查看详情

再者，它利用了硬件级别的安全。大多数WebAuthn认证器都利用了设备上的安全芯片（如TPM、Secure Enclave），这些硬件被设计成极难被物理篡改或提取内部密钥。这比软件层面的加密要强大得多，因为即使操作系统被恶意软件攻破，私钥仍然可能安全地保存在硬件中。

最后，它消除了密码存储和传输的风险。服务器不再需要存储用户密码的哈希值，只需存储公钥。公钥是公开的，即使被泄露也无法用于逆向推导出私钥。这大大降低了服务器端数据泄露的风险。从我的角度看，这种从“共享秘密”到“非对称加密”的范式转变，才是WebAuthn带来安全革命的精髓所在。

WebAuthn的注册与登录流程，具体是怎样运作的？

要理解WebAuthn的运作，我们可以把整个过程想象成一场精心设计的“身份验证舞步”，其中服务器、浏览器和认证器（你的设备）各司其职，步步为营。

注册（Attestation）流程：

用户意图： 用户在你的网站上点击“启用无密码登录”或“注册”按钮。
服务器发起挑战： 你的服务器收到请求，生成一个高度随机的
```
challenge
```
登录后复制
（挑战值），以及一些关于你的网站（依赖方RP）和用户的信息（如用户ID、用户名）。这些信息会打包成一个
```
PublicKeyCredentialCreationOptions
```
登录后复制
对象，发送给客户端浏览器。这个挑战值是临时的，用过即废，防止重放攻击。
浏览器与认证器交互： 客户端的JavaScript收到这些选项后，会调用
```
navigator.credentials.create(options)
```
登录后复制
。浏览器接下来会接管，它会根据
```
options
```
登录后复制
中的要求，与用户设备上的认证器（可能是指纹传感器、面部识别模块，或者一个外接的YubiKey等）进行沟通。
用户验证与密钥生成： 认证器会提示用户进行验证，比如让你按指纹、扫脸，或者输入PIN码。一旦用户成功验证，认证器内部会生成一对全新的加密密钥：一个私钥和一个公钥。私钥被安全地存储在认证器内部，永不离开。同时，认证器还会生成一个
```
credential ID
```
登录后复制
（凭证ID）来唯一标识这对密钥。
返回Attestation对象： 认证器将公钥、凭证ID以及一个
```
attestationObject
```
登录后复制
（包含认证器对这些信息的“证明”，证明它是真实合法的认证器生成的）打包，返回给浏览器。
浏览器转发： 浏览器将收到的
```
PublicKeyCredential
```
登录后复制
对象（其中包含了公钥、凭证ID和attestationObject）发送回你的服务器。
服务器验证与存储： 服务器收到这些数据后，会进行一系列严格的验证：
- 检查
```
challenge
```
  登录后复制
  是否与之前发出的匹配。
- 验证
```
origin
```
  登录后复制
  （网站来源）是否正确。
- 解析并验证
```
attestationObject
```
  登录后复制
  ，确认公钥的来源和合法性。
- 确认无误后，服务器会将这个公钥和凭证ID与用户的账户关联并安全存储起来。

登录（Assertion）流程：

用户意图： 用户访问你的网站，点击“无密码登录”按钮。
服务器发起挑战： 你的服务器再次生成一个新的随机
```
challenge
```
登录后复制
，并将其发送给客户端。这次它会打包成
```
PublicKeyCredentialRequestOptions
```
登录后复制
对象，其中可能包含一个
```
allowCredentials
```
登录后复制
列表，告诉浏览器用户可能有哪些凭证ID可用（如果服务器知道）。
浏览器与认证器交互： 客户端JavaScript调用
```
navigator.credentials.get(options)
```
登录后复制
。浏览器再次接管，它会根据
```
options
```
登录后复制
中的要求，以及
```
allowCredentials
```
登录后复制
列表（如果提供），去查找或提示用户选择一个认证器。
用户验证与签名： 认证器会提示用户进行验证（指纹、面部或PIN）。验证成功后，认证器会使用内部存储的私钥，对服务器发来的
```
challenge
```
登录后复制
进行加密签名。
返回Assertion对象： 认证器将签名结果（一个
```
signature
```
登录后复制
）、
```
authenticatorData
```
登录后复制
（包含一些认证器状态信息）以及
```
clientDataJSON
```
登录后复制
（包含挑战、来源等）打包成一个
```
Assertion
```
登录后复制
对象，返回给浏览器。
浏览器转发： 浏览器将收到的
```
PublicKeyCredential
```
登录后复制
对象（其中包含了签名等信息）发送回你的服务器。
服务器验证： 服务器收到这些数据后，再次进行严格验证：
- 检查
```
challenge
```
  登录后复制
  是否与之前发出的匹配。
- 验证
```
origin
```
  登录后复制
  是否正确。
- 使用之前注册时存储的公钥，来验证
```
signature
```
  登录后复制
  是否有效。这是最关键的一步，只有私钥才能生成这个有效的签名。
- 检查
```
authenticatorData
```
  登录后复制
  中的标志位，比如用户是否真的在场（User Presence）或用户是否被验证（User Verification）。
- 验证凭证计数器（
```
signCount
```
  登录后复制
  ）是否递增，以防止重放攻击。
- 所有验证通过后，服务器就确认用户身份，完成登录。

整个过程中，私钥从未离开用户的设备，服务器也只存储公钥，这种设计从根本上提升了安全性。

在实际应用WebAuthn时，会遇到哪些挑战，又该如何应对？

虽然WebAuthn前景光明，但在实际落地过程中，我们确实会遇到一些挑战，这很正常，任何新技术都有其磨合期。

一个很现实的问题是兼容性与用户教育。并非所有用户的设备和浏览器都完美支持WebAuthn的所有功能，尤其是老旧设备。比如，有些设备可能只支持平台认证器（如指纹），不支持跨平台认证器（如USB安全密钥）。我们不能指望用户一下子就理解“认证器”、“私钥公钥”这些概念。 应对策略： 提供优雅的降级方案是关键。WebAuthn不应该是一个强制性的唯一登录方式，而应该作为一种增强选项。如果用户的设备不支持，或者他们选择不使用，那么传统的邮箱/密码登录、短信验证码等备用方案仍然需要存在。同时，在用户界面上，我们需要用简单易懂的语言解释WebAuthn的优势，并提供清晰的引导，例如“使用指纹/面部识别安全登录”而不是“注册FIDO2凭证”。

其次是账户恢复机制。如果用户丢失了所有注册了WebAuthn的设备，或者安全密钥损坏/丢失，他们该如何找回账户？这是很多开发者会忽略但又极其重要的一点。无密码登录固然方便，但如果失去了恢复能力，用户体验会很糟糕。 应对策略： 建立多重恢复方案。

多设备注册： 鼓励用户在多个设备（如手机和电脑）上注册WebAuthn凭证，或者注册多个安全密钥。这样即使丢失一个，还有备用。
备用验证方式： 仍然保留传统的账户恢复流程，比如通过绑定的邮箱或手机号进行验证。但这通常需要更严格的验证流程，以防止滥用。
恢复码： 可以考虑在注册WebAuthn时，生成一组一次性使用的恢复码，让用户妥善保管，以备不时之需。

再来是服务器端实现的复杂性。WebAuthn的协议细节相当复杂，涉及大量的加密学操作、数据编码解码、挑战验证、Attestation验证、Assertion验证等。自己从头实现一套符合规范的服务器端逻辑，工作量大且容易出错。 应对策略： 利用成熟的开源库或SDK。社区中已经有很多优秀的WebAuthn服务器端库，例如Node.js的