Zenn
🔐

FIDO2 WebAuthnデモサイトを作ってみた！パスキー・複数認証器・ダークモード対応

に公開
Node.js
Security
WebAuthn
FIDO2
Passkey (パスキー)
tech

FIDO2 WebAuthnデモサイトを作ってみた！

今回は「パスワードレス認証」の国際標準規格であるFIDO2（WebAuthn）をローカル環境で体験できるデモサイトをNode.js（Express）と@simplewebauthn/serverで作成したので、その内容やポイントをまとめます。

🔑 FIDO2/WebAuthnとは？

  • FIDO2はパスワードレス認証の国際標準規格
  • WebAuthnはWeb向けのAPI仕様（W3C勧告）
  • 生体認証やセキュリティキー、パスキー（Passkey）で安全にログインできる

🚀 デモサイトの特徴

  • パスキー対応（Discoverable Credential/ユーザー名なし認証）
  • 複数認証器の管理（追加・削除・一覧表示）
  • 条件付きUI（ユーザー名入力欄でパスキー候補をレコメンド）
  • ダークモード切替
  • モダンなUI/UX（Bootstrap5, Font Awesome, レスポンシブ対応）
  • 詳細なエラーメッセージ・進捗表示

🌐 公開リポジトリ

https://github.com/kazuabe/fido2-webauthn-demo

※ GitHub Pages版は静的UIデモのみ。WebAuthnの本格動作はローカル端末で！

🛠️ セットアップ方法

1. 必要なもの

  • Node.js 18以上
  • モダンブラウザ（Chrome, Edge, Safari, Firefox）

2. インストール＆起動

# 依存パッケージをインストール
git clone https://github.com/kazuabe/fido2-webauthn-demo.git
cd fido2-webauthn-demo
npm install

# サーバー起動
npm start

3. アクセス

  • ブラウザで http://localhost:3000 にアクセス

✨ 使い方

アカウント登録

  1. ユーザー名・表示名を入力し「登録」
  2. 認証器（指紋・顔認証・セキュリティキー等）を選択
  3. 認証を完了

認証

  1. ユーザー名を入力（空欄でもOK）
  2. 「認証」ボタンで登録済み認証器でログイン

パスキー機能

  • ユーザー名入力欄にフォーカスすると登録済みパスキー候補が表示
  • ユーザー名なしで認証すると、登録済みアカウントから選択可能

認証器管理

  • 登録済み認証器の一覧表示・削除・追加が可能

⚠️ 注意点

  • このデモは学習・検証用途です。本番運用には追加のセキュリティ対策が必要です。
  • 認証情報はメモリ保存のため、サーバー再起動で消えます。
  • WebAuthnはHTTPS必須（ローカルは例外）

📚 参考リンク

FIDO2/WebAuthnの実装やパスキー体験に興味がある方は、ぜひリポジトリを参考にしてみてください！

Discussion