在 Next.js 中實施 WebAuthn：實戰指南

歡迎回到我們的 WebAuthn 系列。在之前的文章中，我們已經涵蓋了 WebAuthn 的基礎知識 和 101 指南。如果你剛剛加入我們，不妨查看這些基礎文章來快速了解。

今天，我們要捲起袖子，把理論付諸於實踐。我們將利用 Next.js 的新功能 "Server Actions"。我們的目標是實現在 Next.js 應用中實施 WebAuthn，並準備好使用 WebAuthn。

在我們深入探索代碼海洋之前，先讓我們看看旅程的終點 - 一個功能齊全的演示網站 。訪問它來查看 WebAuthn 的實際應用，並體驗你將要建設的內容。在這個演示網站中，你可以註冊新用戶並使用剛註冊的通行密碼登入。

而對於那些喜歡手持地圖的人，我們也為你準備好了！我們討論的所有代碼都在公眾的 GitHub 資源庫 中 。這個資源庫是你的伴侶指南，提供我們實施方案的完整源代碼。

準備好踏上這段激動人心的冒險了嗎？讓我們開始吧！

先決條件#

在我們開始之前，讓我們確保我們擁有一切所需：

1. 一個 Next.js 項目：如果你還沒設置 Next.js 項目，這裡有一個快速指南可以幫助你開始。
2. 簡單 WebAuthn 庫：幾個包可以幫助減少將 WebAuthn 整合到網站所需的工作量。使用你喜歡的包管理器來安裝 @simplewebauthn/browser、@simplewebauthn/server 和 @simplewebauthn/typescript-types
3. 會話存儲：我們將使用會話存儲來管理 WebAuthn 挑戰。我們將使用 vercel 的 KV 來實現這一點。
4. 一個用戶數據庫：一個儲存我們用戶的註冊通行密碼的地方。為了簡化，我們也將使用 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 文檔 和 簡單 WebAuthn 庫的文檔 指導如何根據特定需求自定義這些選項。

感謝你加入我們的教育冒險。即使在這個簡單的例子中，集成 WebAuthn 也不是一個簡單的任務，還有另一個選擇，試試 Logto 的 MFA 的 WebAuthn：