日本語

webauthn
パスキー
mfa
nextjs

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

Next.js で WebAuthn を実装するためのハンズオンガイド。ライブコードの例付き。

Sijie

Developer

11/15/2023

ユーザー認証に何週間も費やすのはもうやめましょう

Logto でより速く安全なアプリをリリース。数分で認証を統合し、コア製品に集中できます。

始めましょう

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

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

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

Preview

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

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

前提条件

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

Next.js プロジェクト: まだ Next.js プロジェクトを設定していない場合は、クイックガイドを参照して始めてください。
Simple WebAuthn ライブラリ: WebAuthn をウェブサイトに組み込む作業量を軽減するいくつかのパッケージです。お好みのパッケージマネージャを使用して @simplewebauthn/browser、@simplewebauthn/server、および @simplewebauthn/typescript-types をインストールしてください。
セッションストレージ: WebAuthn チャレンジを管理するためにセッションストレージを使用します。vercel の KV を使用してこれを実現します。
ユーザーデータベース: ユーザーの登録されたパスキーを保存する場所です。簡単にするために、vercel の KV を使います。

では、ツールと素材が揃ったので、構築を開始する準備が整いました。

Vercel の KV を使用したセッションストレージの実装

KV ストレージの設定

プロダクションおよびローカル開発の両方で KV ストレージを初期化するのは簡単です。このガイドに従ってプロジェクトに KV ストアを接続し、環境値を取得します：https://vercel.com/docs/storage/vercel-kv/quickstart

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

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

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

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

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

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

WebAuthn 関数の準備

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

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

generateWebAuthnRegistrationOptions
verifyWebAuthnRegistration

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

generateWebAuthnLoginOptions
verifyWebAuthnLogin

こちらがコードです：

ウェブページを構築する

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

結論

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

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

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

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

Logto の多要素認証を試す

前提条件#

Vercel の KV を使用したセッションストレージの実装#

KV ストレージの設定#

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

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

WebAuthn 関数の準備#

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

結論#

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

前提条件#

Vercel の KV を使用したセッションストレージの実装#

KV ストレージの設定#

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

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

WebAuthn 関数の準備#

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

結論#

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

前提条件

Vercel の KV を使用したセッションストレージの実装

KV ストレージの設定

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

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

WebAuthn 関数の準備

ウェブページを構築する

結論

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

前提条件

Vercel の KV を使用したセッションストレージの実装

KV ストレージの設定

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

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

WebAuthn 関数の準備

ウェブページを構築する

結論

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