在 Next.js 中实现 WebAuthn：动手指南

欢迎回到我们的 WebAuthn 系列。在我们之前的文章中，我们介绍了 WebAuthn 的基础知识，以及一个 101 指南。如果你刚刚加入，请随时查看这些基础文章以快速了解。

今天，我们将卷起袖子，把理论付诸实践。我们将利用 Next.js 的新特性“Server Actions”。我们的目标是什么？在 Next.js 应用中实现 WebAuthn，并为 WebAuthn 做好准备。

在我们深入编码的海洋之前，先看一下你在旅程结束时可以期待什么-一个功能齐全的演示网站。探索它，看看 WebAuthn 的实际应用，并了解你将要构建的内容。在这个演示网站中，你可以注册新用户并用刚刚注册的 passkey 登录。

对于那些倾向于持有地图的人，我们为你提供帮助！我们将讨论的所有代码都可以在我们的公共 GitHub 仓库 中找到。这个仓库是你的伴侣指南，提供我们实现的完整源代码。

准备好踏上这次激动人心的冒险了吗？让我们开始吧！

前提条件#

在我们开始之前，确保我们拥有一切所需：

1. 一个 Next.js 项目：如果你还没有设置一个 Next.js 项目，这里有一个快速指南 帮助你开始。
2. 简单 WebAuthn 库：几个包可以帮助减少将 WebAuthn 集成到网站所需的工作量。使用你喜欢的包管理器安装 @simplewebauthn/browser、@simplewebauthn/server 和 @simplewebauthn/typescript-types
3. 会话存储：我们将使用会话存储来管理 WebAuthn 挑战。我们将使用 vercel 的 KV 来实现这一目标。
4. 用户数据库：一个存储我们用户注册的 passkey 的地方。为了简化演示，我们也将使用 vercel 的 KV。

现在，随着我们的工具和材料在手，我们准备开始构建。

用 Vercel 的 KV 实现会话存储#

设置 KV 存储#

无论是在生产环境还是本地开发中，初始化一个 KV 存储都很容易，按照这篇指南将 KV 存储连接到你的项目并获取环境值：https://vercel.com/docs/storage/vercel-kv/quickstart

实现会话管理功能#

我们导出了两个函数：

• getCurrentSession：使用 Next.js 的 cookie 助手为当前请求创建一个会话，并返回其值。
• updateCurrentSession：将数据保存到当前会话中。

用 Vercel 的 KV 实现用户数据库#

与我们的会话实现类似，让我们实现一个简单的用户数据库。

我们创建了根据电子邮件查找用户的函数，以及根据电子邮件更新用户数据的函数。记住，这仅用于演示，在实际产品中，用户数据通常存储在数据库中。

准备 WebAuthn 功能#

在我们继续之前，让我们看看注册和认证流程的图表：

如你所见，我们需要准备两个函数：

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

类似于注册，登录需要两个函数：

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

以下是代码：

构建网页#

我们已经完成了准备工作，让我们构建页面：

结论#

恭喜你通过在 Next.js 应用中实现 WebAuthn 的复杂性。作为结束，重要的是要解决在生产环境中部署它的一些关键考虑因素。

生产部署的关键考虑#

1. 用户标识符调整：在本教程中，我们使用电子邮件地址作为用户标识符。然而，在生产环境中，你可能需要使用不同的标识符，比如 userId 或 username。
2. 数据库集成：虽然我们使用 Vercel 的 KV 作为简单的演示来管理会话和用户数据，但一个真实世界的应用应该集成一个更强大的数据库系统（如 PostgreSQL、MongoDB 等）。
3. 自定义 WebAuthn 选项：我们探索的 WebAuthn 选项是一个起点。根据你的应用需求和安全策略，你可能需要调整这些设置。查阅 WebAuthn 文档 和 Simple WebAuthn 库的文档 以获取关于定制这些选项以满足你特定需求的指导。

感谢你加入我们的教育探险。即便在这个最小的示例中，集成 WebAuthn 也不是一个简单的任务，还有另一种选择，尝试 Logto 的多因素认证中的 WebAuthn：