Next.js で WebAuthn を実装する: ハンズオンガイド

WebAuthn シリーズへようこそ。前回の記事では、WebAuthn の基本と、101 ガイドをカバーしました。初めて参加された方は、ぜひこれらの基礎資料をチェックして、キャッチアップしてください。

今日は、理論を実践に移すために準備しました。Next.js の新機能「サーバーアクション」を活用していきます。目標？Next.js のアプリケーションに WebAuthn を実装し、WebAuthn に備えます。

コーディングの海に飛び込む前に、旅の終わりに待っているものをチラリと見せましょう - 完全に機能するデモウェブサイトです。WebAuthn が動作しているのを見て、あなたが構築するものの味見をしてみてください。このデモウェブサイトでは、新しいユーザーを登録し、登録したパスキーでログインすることができます。

そして、ハンドマップが欲しい方のために！ここですべてのコードをパブリックGitHub リポジトリで入手できます。このリポジトリはあなたのガイドを無視し、私たちの実装のフルソースコードを提供します。

このエキサイティングな旅に出る準備はできましたか？ 始めましょう！

前提条件#

始める前に、必要なものを確認しましょう：

1. Next.js プロジェクト: まだ Next.js プロジェクトを設定していない場合は、クイックガイドを参照して始めてください。
2. Simple 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

セッション管理機能の実装#

2 つの関数をエクスポートしました：

• getCurrentSession: Next.js のクッキーヘルパーを使用して、現在のリクエストのセッションを作成し、その値を返します。
• updateCurrentSession: 現在のセッションにデータを保存します。

Vercel の KV を用いたユーザーデータベースの実装#

セッションの実装と同様に、シンプルなユーザーデータベースを実装しましょう。

ユーザーをメールで検索し、メールでユーザーデータを更新する関数を作成しました。覚えておいてください、これはデモンストレーション用のみであり、実際の製品では通常、ユーザーデータはデータベースに保存されます。

WebAuthn 関数の準備#

先に進む前に、登録と認証のフローの図を見てみましょう：

ご覧のとおり、2 つの関数を準備する必要があります：

1. generateWebAuthnRegistrationOptions
2. verifyWebAuthnRegistration

登録と同様に、ログインには2つの関数が必要です：

1. generateWebAuthnLoginOptions
2. verifyWebAuthnLogin

こちらがコードです：

ウェブページを構築する#

準備が整いましたので、ページを構築しましょう：

結論#

Next.js アプリケーションでの WebAuthn の実装の複雑なプロセスを無事終了しました。締めくくる際に、プロダクション環境での展開のための重要な考慮事項をいくつか紹介することが重要です。

プロダクション展開のための重要な考慮事項#

1. ユーザー識別子の調整: このチュートリアルでは、メールアドレスをユーザー識別子として使用しました。しかし、プロダクションのシナリオでは、**userIdやusername**などの別の識別子を使用する必要があるかもしれません。
2. データベース統合: セッションとユーザーデータの管理には Vercel の KV をシンプルなデモとして利用しましたが、実際のアプリケーションはより堅牢なデータベースシステム（PostgreSQL、MongoDB など）と統合するべきです。
3. WebAuthn オプションのカスタマイズ: 我々が検討した WebAuthn オプションは出発点に過ぎません。アプリケーションの要件やセキュリティポリシーによって、これらの設定を調整する必要があるかもしれません。アプリケーションの特定の要件に合わせてオプションをカスタマイズする方法については、WebAuthn ドキュメントおよびSimple WebAuthn ライブラリのドキュメントを参照してください。

この教育的冒険に参加してくれてありがとうございました。このシンプルな例でも WebAuthn の統合は簡単な作業ではありません。別のオプションとして、Logto の MFA で WebAuthn を試してみてください：