WebAuthn: 用指纹开启网络世界的大门

在这个数字身份至关重要的时代,我们终于迎来了一个革命性的身份验证标准 - WebAuthn。这项技术不仅仅是对传统密码的简单替代,更是对整个网络安全生态系统的一次彻底重塑。让我们一起深入探讨这项令人兴奋的技术,看看它将如何改变我们的数字生活。

🌟 WebAuthn:安全与便捷的完美结合

WebAuthn(Web Authentication)是一项由 W3C 和 FIDO 联盟共同制定的网络认证标准,旨在为 web 应用提供安全、便捷的无密码认证方式。它的核心理念是利用公钥加密技术,让用户可以通过生物识别(如指纹、面部识别)或物理安全密钥来进行身份验证,而无需记住和输入复杂的密码。

WebAuthn 的工作原理

WebAuthn 的工作流程可以简单概括为以下几个步骤:

注册阶段:
- 用户在网站上注册时,浏览器会生成一对公私钥。
- 私钥安全地存储在用户的设备上,公钥则发送给网站服务器保存。
认证阶段:
- 用户登录时,网站服务器发送一个挑战(challenge)给浏览器。
- 浏览器使用存储的私钥对挑战进行签名,并将签名结果发回服务器。
- 服务器使用之前保存的公钥验证签名,从而确认用户身份。

这个过程不仅安全,而且对用户来说非常简单直观。想象一下,只需轻轻触摸你的手机或笔记本电脑,就能安全地登录任何网站,再也不用记住复杂的密码了。

💻 实战:实现 WebAuthn 无密码登录

让我们通过一个实际的例子来看看如何在 web 应用中实现 WebAuthn 认证。我们将使用 Node.js 和 Express 来构建后端,前端则使用 vanilla JavaScript。

项目设置

首先,我们需要设置我们的项目环境:

git clone https://github.com/josephden16/webauthn-demo.git
cd webauthn-demo
git checkout start-here
npm install

创建一个 .env文件,并添加必要的环境变量:

PORT=8000
MONGODB_URL=<YOUR MONGODB CONNECTION STRING>

创建登录和注册表单

在 public/index.html中,我们创建一个简单的表单:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>WebAuthn Demo</title>
  <script src="https://unpkg.com/@simplewebauthn/browser/dist/bundle/index.umd.min.js"></script>
</head>
<body>
  <h1>WebAuthn Demo</h1>
  <div id="error" style="color: red;"></div>
  <input id="username" type="text" placeholder="Username">
  <button id="registerBtn">Register</button>
  <button id="loginBtn">Login</button>
  <div id="welcomeMessage" style="display:none;">
    <h2>Welcome, <span id="usernameDisplay"></span>!</h2>
  </div>
  <script src="/script.js"></script>
</body>
</html>

实现注册功能

在 public/script.js中,我们添加注册功能:

const { startRegistration } = SimpleWebAuthnBrowser;

async function handleRegister() {
  const username = document.getElementById('username').value;
  
  // 获取注册选项
  const optionsRes = await fetch(`/api/register/start?username=${username}`);
  const options = await optionsRes.json();

  // 开始注册过程
  const attResp = await startRegistration(options);

  // 验证注册结果
  const verificationRes = await fetch('/api/register/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...attResp, username })
  });

  const verificationResult = await verificationRes.json();

  if (verificationResult.verified) {
    alert('Registration successful!');
  } else {
    alert('Registration failed.');
  }
}

document.getElementById('registerBtn').addEventListener('click', handleRegister);

实现登录功能

同样在 script.js中,我们添加登录功能:

const { startAuthentication } = SimpleWebAuthnBrowser;

async function handleLogin() {
  const username = document.getElementById('username').value;

  // 获取认证选项
  const optionsRes = await fetch(`/api/login/start?username=${username}`);
  const options = await optionsRes.json();

  // 开始认证过程
  const attResp = await startAuthentication(options);

  // 验证认证结果
  const verificationRes = await fetch('/api/login/verify', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ ...attResp, username })
  });

  const verificationResult = await verificationRes.json();

  if (verificationResult.verified) {
    document.getElementById('usernameDisplay').textContent = username;
    document.getElementById('welcomeMessage').style.display = 'block';
  } else {
    alert('Authentication failed.');
  }
}

document.getElementById('loginBtn').addEventListener('click', handleLogin);

后端实现

在后端,我们需要实现相应的 API 端点来处理注册和登录请求。以下是一个简化的示例:

import express from 'express';
import { generateRegistrationOptions, verifyRegistrationResponse, 
         generateAuthenticationOptions, verifyAuthenticationResponse } 
         from '@simplewebauthn/server';

const app = express();

app.post('/api/register/start', async (req, res) => {
  const options = await generateRegistrationOptions({
    rpName: 'WebAuthn Demo',
    rpID: 'localhost',
    userID: 'user-unique-id',
    userName: req.query.username,
  });
  
  // 保存 challenge 以便后续验证
  req.session.currentChallenge = options.challenge;

  res.json(options);
});

app.post('/api/register/verify', async (req, res) => {
  const { body } = req;

  const verification = await verifyRegistrationResponse({
    credential: body,
    expectedChallenge: req.session.currentChallenge,
    expectedOrigin: 'http://localhost:8000',
    expectedRPID: 'localhost',
  });

  if (verification.verified) {
    // 保存用户凭证信息到数据库
  }

  res.json({ verified: verification.verified });
});

// 类似地实现 /api/login/start 和 /api/login/verify 端点

app.listen(8000, () => console.log('Server running on port 8000'));

🌈 WebAuthn 的优势与局限性

优势

增强安全性: WebAuthn 利用公钥加密技术,有效防止密码泄露和钓鱼攻击。
改善用户体验: 用户无需记忆复杂密码,使用生物识别或物理密钥更加便捷。
跨平台支持: 主流浏览器和操作系统广泛支持,保证了一致的用户体验。
多因素认证: 可以轻松实现强大的多因素认证。

局限性

技术复杂性: 对于复杂或遗留系统,集成 WebAuthn 可能具有技术挑战。
用户教育: 新技术可能需要对用户进行教育,以提高接受度。
硬件依赖: 某些认证方式可能需要特定硬件支持。

🚀 结语

WebAuthn 代表了身份验证的未来。它不仅提高了安全性,还大大改善了用户体验。通过实践,我们看到了如何在实际项目中实现 WebAuthn,为用户提供一种更安全、更便捷的登录方式。

随着技术的不断发展和完善,我们可以期待看到更多创新的应用场景。也许在不久的将来,我们将彻底告别密码,迎来一个更安全、更便捷的数字世界。让我们共同期待和拥抱这个由 WebAuthn 带来的美好未来！

参考文献：

W3C. (2021). Web Authentication: An API for accessing Public Key Credentials - Level 2.
FIDO Alliance. (2021). FIDO2: WebAuthn & CTAP.
Denedo, O. (2024). Implementing WebAuthn for passwordless logins. LogRocket Blog.
Mozilla Developer Network. (2021). Web Authentication API.
Google. (2021). Enabling Strong Authentication with WebAuthn.

WebAuthn: 用指纹开启网络世界的大门

🌟 WebAuthn:安全与便捷的完美结合

WebAuthn 的工作原理

💻 实战:实现 WebAuthn 无密码登录

项目设置

创建登录和注册表单

实现注册功能

实现登录功能

后端实现

🌈 WebAuthn 的优势与局限性

优势

局限性

🚀 结语

相关帖子

写了个或许是免费 + 开源中最安全（特指不考虑侧信道攻击）的随机密码生成器

分享代码片段实现简单锁定笔记

web 权限提升总结

7. 栈溢出

siyuan 要是能生成推广链接，拉新送积分，会不会好一点

在行级公式前面加上 `$$` 转成公式块

思源笔记网页收藏插件中，只能 markdown 下文档内容，能不能也设置一个像 onenote 网页剪裁工具的全界面截图功能（界面不需要鼠标向下滑动自动截图到最后）

欢迎来到这里！