WebAuthn-study

自社ブログ記事について、解説用のサンプルコードです。

ディレクトリ構造

• full-scratchディレクトリ
  • 外部ライブラリを使わず、WebAuthnの登録/認証処理を行うクライアント/サーバーを実装
• with-libraryディレクトリ
  • 外部ライブラリを使って、WebAuthnの登録/認証処理を行うクライアント/サーバーを実装

環境構築方法

full-scratchディレクトリにおいても、with-libraryディレクトリにおいても、以下の手順で環境構築を行ってください。

1. クライアント (sample-webauthn-app) の環境構築
   • sample-webauthn-appディレクトリに移動
   • npm ciを実行
2. サーバー (sample-webauthn-server) の環境構築
   • sample-webauthn-serverディレクトリに移動
   • pip install -r requirements.txtを実行

実行方法

1. クライアント (sample-webauthn-app) の起動

• sample-webauthn-appディレクトリに移動
• npm run devを実行

2. サーバー (sample-webauthn-server) の起動

• sample-webauthn-serverディレクトリに移動
• python main.pyを実行

3. ブラウザでhttp://localhost:3000にアクセス
4. Name と DisplayName を入力し、Register ボタンをクリック
5. 正常に完了したら、「Successfully registered.」というステータスメッセージが表示される
6. 5.を確認した後に、Login ボタンをクリック
7. 正常に完了したら、「Successfully logged in.」というステータスメッセージが表示される