はじめに
こんにちは。ログラスのエンジニアの鈴木(@sunazukin_it)です。
毎年この季節は花粉に苦しめられているのですが、今年は早めに耳鼻科で薬をもらったので、なんとか生活できています🌲
さて、先日、代表の布川から発信があったように、ログラスではエンジニアの生産性向上のためにCursorのライセンスが配布されました。今回は、以前から気になっていた認証方式であるパスキーについて、Cursorを使ってアプリケーションを動かしながら紹介していきたいと思います！
Cursorを使ってパスキー認証のアプリケーションを開発してみた
パスキーとは？
概要
以下はFIDO Alliance[1]からの引用です。
A passkey is a FIDO authentication credential based on FIDO standards, that allows a user to sign in to apps and websites with the same process that they use to unlock their device (biometrics, PIN, or pattern).
パスキーはFIDO標準に基づくFIDO認証資格情報です。パスキーを利用することでデバイスのロック解除に使用するのと同じプロセス（生体認証、PIN、またはパターン）でアプリやWebサイトにサインインできます。
パスキーの主な特徴は以下の通りです。
- パスワードレスで認証できる
- デバイスに保存される秘密鍵を使用して認証する
- サーバーにはパスワードが保存されない
- 生体認証（指紋、顔認証など）を利用できる
- フィッシング攻撃に強い
- クロスデバイスで利用できる
種類
パスキーには以下の2つの種類があります。
- 同期パスキー
- クレデンシャル・マネージャーに安全に保存され、デバイス（携帯電話、タブレット、コンピュータ）間でアクセス可能なパスキー
- デバイス固定パスキー
- 単一のデバイス（セキュリティキー）にバインドされ、そのデバイスとしてのみ使用可能なパスキー
規格
パスキーに関連する代表的な規格として、FIDO2・WebAuthn・CTAP2があります。
-
FIDO2
- Fast IDentity Online 2
- FIDOアライアンスとW3C（World Wide Web Consortium）が共同で策定した、パスワードレス認証を実現するための技術規格です
- 主にWebAuthnとCTAP2の2つから構成されています
-
https://fidoalliance.org/wp-content/uploads/FIDO2-Graphic-v2.png
-
WebAuthn
- Webアプリケーション上でFIDO2認証を実現するためのAPI仕様です
- ブラウザと認証デバイス間の通信を標準化しています
-
CTAP2
- Client To Authenticator Protocol 2
- プラットフォーム（OS）やWebブラウザと認証器（ハードウェアキーや生体認証装置など）間の通信を定めた規格です
構成要素
パスキーでの認証を実現するための構成要素として、主に以下の4つがあります。
- RPサーバー
- Relying Party
- パスキーを登録し、認証するサービスのこと
- RPアプリケーション
- RPサーバーとやりとりするアプリケーションのこと
- ブラウザ
- 認証デバイス
- FIDO2クレデンシャル（秘密鍵相当）を保管するデバイス
処理フロー
代表例としてパスキーの登録と認証を紹介します。
- 登録
- RPサーバーでランダムなチャレンジを生成し、ドメイン・ユーザー情報とあわせてブラウザ経由で認証デバイスに送信します
- 認証デバイスで公開鍵暗号ペアを作成し、秘密鍵などをFIDO2クレデンシャルとして保存します
- 公開鍵をブラウザ経由でRPサーバーに返却します
- RPサーバーで返却された値を検証し、公開鍵を保存します
- 秘密鍵はサーバーには保存されません
-
登録フロー https://www.w3.org/TR/webauthn-3/images/webauthn-registration-flow-01.svg
- 認証
- RPサーバーでランダムなチャレンジを生成し、ブラウザ経由で認証デバイスに送信します
- 認証デバイスでユーザーに生体認証 or PINコードなどによる認証を要求します
- 認証に成功したら、署名済みのレスポンスを生成し、ブラウザ経由でRPサーバーに返却します
- RPサーバーで返却された値を検証します
-
認証フロー https://www.w3.org/TR/webauthn-3/images/webauthn-authentication-flow-01.svg
Cursorを使った実装
前節で紹介したパスキーの登録と認証をCursorを使って実装してみます。自分では一切コーディングせず、Cursorに指示するだけで実装を完了できることを確かめてみます。
事前準備
今回はSimpleWebAuthnというライブラリを使います。そのため、SimpleWebAuthnの公式サイトをDocsに登録します。
実際に利用したプロンプト
以下の7つのプロンプトを投げました。何度か同じエラーが発生することはありましたが、数回試すと適切な修正案を提示してくれました。
ローカル環境でパスキーの登録・認証ができるWebアプリケーションを作ってください。
---
サーバーを起動してブラウザでアクセスしたところ、エラーが出ました。エラー内容を確認して修正してください。
---
ビルド時にエラーが発生しています。ビルドのエラーが解消するまで修正を繰り返してください。
---
パスキー登録時にエラーが発生しました。エラー内容を確認して修正してください。
---
まだパスキー登録時にエラーが発生しています。エラー内容を確認して修正してください。
---
パスキーのログインでエラーが発生しました。エラー内容を確認して修正してください。
---
パスキーでログインする際に「このユーザーにはパスキーが登録されていません」というエラーがでます。エラー内容を確認して修正してください。
サンプル
実際に作成されたプログラムと画面は以下の通りです。
Cursorを使った開発の感想
Cursorを使ってみて感じたメリット・デメリットは以下の通りです。
- メリット
- 今まで利用したことがないパスキーという認証方式を用いたアプリケーションを自然言語での指示だけで実装できる
- 初期構築をまるっと実施してくれる（今回はNext.js）
- AIエージェントに作業指示している間に別作業を進められる
- デメリット
- 細かい実装の調整には複数回のやり取りする必要がある
- 自分で直した方が早いという気持ちをおさえる強い気持ちが必要である
参考資料
おわりに
Cursorを使ってアプリケーションを開発しながら、パスキーについて紹介しました。今回の経験を通じて、Cursorがアプリケーションの実装を力強くサポートしてくれることがわかりました。
ログラスでは一緒に働くエンジニアを大募集中です！興味をもっていただいた方はカジュアル面談でぜひお話ししましょう！
-
パスワードへの過度の依存を減らすための認証標準という焦点を絞った使命を持つオープンな業界団体(https://fidoalliance.org/overview/?lang=ja) ↩︎
Discussion