今日からできる！ はじめてのパスキー認証

このスライドでは、次世代のユーザー認証方式「パスキー」の仕組みと実装方法を解説しています。
パスワード管理の煩雑さやセキュリティリスクを回避しつつ、簡単かつ安全な認証を可能にするパスキー認証を、フロントエンドとバックエンドのコード例を交えて具体的に紹介します。

SvelteKitを活用した実装例や、公開鍵暗号の基本もなんとなく網羅しています。

このスライドはSvelte Japan Offline Meetup #3で発表しました。

Google Slideのリンクはこちら
今日からできる！ はじめてのパスキー認証

今日からできる！ はじめてのパスキー認証 by HIBIKI CUBE is licensed under CC BY-ND 4.0

Transcript

1. 今日からできる！ はじめてのパスキー認証 〜芳醇なSvelteKitを添えて〜
2. 自己紹介 HIBIKI CUBE @hibiki_cube
3. 突然ですがみなさん
4. 想像してみてください 新しく個人開発 やりたいな〜〜
5. 個人開発を始めるとして… あんな機能… こんな機能も…
6. みなさんなら… じゃあログインも できた方がいいな…
7. みなさんなら… じゃあログインも できた方がいいな… どうやって ユーザー認証を 実現しますか？
8. ユーザー認証の実装方法イロイロ
9. ユーザー認証の実装方法イロイロ • BASIC認証 • ユーザーID / パスワード • メールアドレスにマジックリンクを送信 • GoogleやTwitterなどでソーシャルログイン • 門番の人にワイロを渡す
10. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード • メールアドレスにマジックリンクを送信 • GoogleやTwitterなどでソーシャルログイン • 門番の人にワイロを渡す
11. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード → パスワード管理が必要。再設定とかどうする？ • メールアドレスにマジックリンクを送信 • GoogleやTwitterなどでソーシャルログイン • 門番の人にワイロを渡す
12. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード → パスワード管理が必要。再設定とかどうする？ • メールアドレスにマジックリンクを送信 → メールの送受信が煩雑 • GoogleやTwitterなどでソーシャルログイン • 門番の人にワイロを渡す
13. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード → パスワード管理が必要。再設定とかどうする? • メールアドレスにマジックリンクを送信 → メールの送受信が煩雑 • GoogleやTwitterなどでソーシャルログイン → そこがサ終したらどうする? • 門番の人にワイロを渡す
14. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード → パスワード管理が必要。再設定とかどうする? • メールアドレスにマジックリンクを送信 → メールの送受信が煩雑 • GoogleやTwitterなどでソーシャルログイン → そこがサ終したらどうする? • 門番の人にワイロを渡す → 毎回お金がなくなって悲しい
15. ユーザー認証の実装方法イロイロ • BASIC認証 → IDやパスワードの管理が煩雑 • ユーザーID / パスワード → パスワード管理が必要。再設定とかどうする? • メールアドレスにマジックリンクを送信 → メールの送受信が煩雑 • GoogleやTwitterなどでソーシャルログイン → そこがサ終したらどうする? • 門番の人にワイロを渡す → 毎回お金がなくなって悲しい
16. パスワードを管理したくない • ハッシュ化するとはいえ、パスワードをDB上で管理するドキドキ • パスワードを入れても大丈夫なフォーム・ページを作るドキドキ • パスワードが流れても平気な通信経路にするドキドキ • パスワード忘れた時の再設定処理とか、全然ワクワクしない • そもそもパスワードが漏洩して何かなった時が怖すぎる • → できればパスワードは使いたくない
17. ここで現る救世主 Passkeys
18. パスキーとは • 次世代のユーザー認証の方式 • 公開鍵暗号の仕組みを使って認証する • 機密性のある情報は誰にも公開されない • ログイン時に入力するものは何もなし • 生体認証とセットで動作 • フィッシングができない仕組み
19. パスキーとは • 次世代のユーザー認証の方式 • 公開鍵暗号の仕組みを使って認証する • 機密性のある情報は誰にも公開されない • ログイン時に入力するものは何もなし • 生体認証とセットで動作 • フィッシングができない仕組み
20. 公開鍵暗号で認証する仕組み
21. 公開鍵暗号で認証する仕組み
22. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵
23. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵 俺の鍵持っといて
24. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵
25. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵 ログインしたいな
26. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵 ログインしたいな じゃあこの問題を 解いてみな
27. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵 秘密鍵で 署名したよ
28. 公開鍵暗号で認証する仕組み 秘密鍵 公開鍵 秘密鍵で 署名したよ 確かに正しい鍵だ 通ってよし！
29. パスキー認証に必要なユーザー操作 プロンプトを確認して 生体認証するだけ
30. フィッシングができない仕組み • 各パスキーはRP IDでサービスに紐づいている • パスキーと対応するオリジンでないと使えない • どんなに見た目を似せたサイトでも、パスキーを使うことは不可能 HIBIKI @ Google google.com 🔒goo9le.com
31. それではいよいよ…… パスキー認証 やってみよう！
32. お手軽な方法もあるが……
33. 自由度が低いのが難点
34. それなら…… 自前で 実装しちゃおう!
35. 必要なもの フロントエンド • APIとやり取りする仕組み • デバイスの認証機とやり取りする仕組み バックエンド • ユーザーとパスキーを管理するDB • チャレンジを発行するAPI • 署名されたチャレンジを検証するAPI • セッションを管理する仕組み
36. ユーザーとパスキーを管理するDB
37. ユーザー登録画面 <script lang='ts'> import type { VerifiedRegistrationResponse } from '@simplewebauthn/server'; import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import { goto, invalidateAll } from '$app/navigation'; import { startRegistration } from '@simplewebauthn/browser'; let username = $state(''); async function createPasskey() { if (username === '') { return; } const { options } = await (await fetch('/api/auth/register', { method: 'POST', body: JSON.stringify({ username }), credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, })).json().catch((err) => { console.error(err); }) as { options: PublicKeyCredentialCreationOptionsJSON | null }; if (!options) return; const registrationResponse = await startRegistration({ optionsJSON: options }); const verificationJSON: VerifiedRegistrationResponse = await (await fetch('/api/auth/register/verify-challenge', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(registrationResponse), })).json(); if (verificationJSON.verified) { await invalidateAll(); goto('/'); } } </script> <form action=""> <label>ユーザー名 <input type='text' required bind:value={username}> </label> <button onclick={createPasskey} disabled={username === ''}>登録</button> </form> 登録をリクエスト
38. ユーザー作成とチャレンジ発行をするAPI import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import type { RequestHandler } from './$types'; import { users } from '$lib/db/schema'; import { db } from '$lib/drizzle'; import { generateRegistrationOptions } from '@simplewebauthn/server'; import { error, json } from '@sveltejs/kit'; import { PUBLIC_RP_ID, PUBLIC_RP_NAME } from '$env/static/public'; export const POST: RequestHandler = async ({ request, locals: { session } }) => { const userName = (await request.json() as { username?: string }).username; if (!userName) return error(400, 'Parameter missing'); const [user] = await db.insert(users).values({ name: userName }).returning(); const options: PublicKeyCredentialCreationOptionsJSON = await generateRegistrationOptions({ rpName: PUBLIC_RP_NAME, rpID: PUBLIC_RP_ID, userName, userID: new TextEncoder().encode(user.id), attestationType: 'none', authenticatorSelection: { residentKey: 'required', userVerification: 'preferred', authenticatorAttachment: 'platform', }, }); await session.regenerate(); session.cookie.path = '/'; await session.setData({ userId: user.id, challenge: options.challenge, }); await session.save(); return json({ options }); }; 新規ユーザーを作成
39. ユーザー作成とチャレンジ発行をするAPI import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import type { RequestHandler } from './$types'; import { users } from '$lib/db/schema'; import { db } from '$lib/drizzle'; import { generateRegistrationOptions } from '@simplewebauthn/server'; import { error, json } from '@sveltejs/kit'; import { PUBLIC_RP_ID, PUBLIC_RP_NAME } from '$env/static/public'; export const POST: RequestHandler = async ({ request, locals: { session } }) => { const userName = (await request.json() as { username?: string }).username; if (!userName) return error(400, 'Parameter missing'); const [user] = await db.insert(users).values({ name: userName }).returning(); const options: PublicKeyCredentialCreationOptionsJSON = await generateRegistrationOptions({ rpName: PUBLIC_RP_NAME, rpID: PUBLIC_RP_ID, userName, userID: new TextEncoder().encode(user.id), attestationType: 'none', authenticatorSelection: { residentKey: 'required', userVerification: 'preferred', authenticatorAttachment: 'platform', }, }); await session.regenerate(); session.cookie.path = '/'; await session.setData({ userId: user.id, challenge: options.challenge, }); await session.save(); return json({ options }); }; チャレンジを発行
40. ユーザー作成とチャレンジ発行をするAPI import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import type { RequestHandler } from './$types'; import { users } from '$lib/db/schema'; import { db } from '$lib/drizzle'; import { generateRegistrationOptions } from '@simplewebauthn/server'; import { error, json } from '@sveltejs/kit'; import { PUBLIC_RP_ID, PUBLIC_RP_NAME } from '$env/static/public'; export const POST: RequestHandler = async ({ request, locals: { session } }) => { const userName = (await request.json() as { username?: string }).username; if (!userName) return error(400, 'Parameter missing'); const [user] = await db.insert(users).values({ name: userName }).returning(); const options: PublicKeyCredentialCreationOptionsJSON = await generateRegistrationOptions({ rpName: PUBLIC_RP_NAME, rpID: PUBLIC_RP_ID, userName, userID: new TextEncoder().encode(user.id), attestationType: 'none', authenticatorSelection: { residentKey: 'required', userVerification: 'preferred', authenticatorAttachment: 'platform', }, }); await session.regenerate(); session.cookie.path = '/'; await session.setData({ userId: user.id, challenge: options.challenge, }); await session.save(); return json({ options }); }; セッションに保存
41. ユーザー登録画面 <script lang='ts'> import type { VerifiedRegistrationResponse } from '@simplewebauthn/server'; import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import { goto, invalidateAll } from '$app/navigation'; import { startRegistration } from '@simplewebauthn/browser'; let username = $state(''); async function createPasskey() { if (username === '') { return; } const { options } = await (await fetch('/api/auth/register', { method: 'POST', body: JSON.stringify({ username }), credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, })).json().catch((err) => { console.error(err); }) as { options: PublicKeyCredentialCreationOptionsJSON | null }; if (!options) return; const registrationResponse = await startRegistration({ optionsJSON: options }); const verificationJSON: VerifiedRegistrationResponse = await (await fetch('/api/auth/register/verify-challenge', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(registrationResponse), })).json(); if (verificationJSON.verified) { await invalidateAll(); goto('/'); } } </script> <form action=""> <label>ユーザー名 <input type='text' required bind:value={username}> </label> <button onclick={createPasskey} disabled={username === ''}>登録</button> </form>
42. ユーザー認証とチャレンジの署名 <script lang='ts'> import type { VerifiedRegistrationResponse } from '@simplewebauthn/server'; import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import { goto, invalidateAll } from '$app/navigation'; import { startRegistration } from '@simplewebauthn/browser'; let username = $state(''); async function createPasskey() { if (username === '') { return; } const { options } = await (await fetch('/api/auth/register', { method: 'POST', body: JSON.stringify({ username }), credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, })).json().catch((err) => { console.error(err); }) as { options: PublicKeyCredentialCreationOptionsJSON | null }; if (!options) return; const registrationResponse = await startRegistration({ optionsJSON: options }); const verificationJSON: VerifiedRegistrationResponse = await (await fetch('/api/auth/register/verify-challenge', {auth/register/verify-challenge', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(registrationResponse), })).json(); if (verificationJSON.verified) { await invalidateAll(); goto('/'); } } </script> <form action=""> <label>ユーザー名 <input type='text' required bind:value={username}> </label> <button onclick={createPasskey} disabled={username === ''}>登録</button> </form> auth/register/verify-challenge', { 認証器に登録と 認証を依頼
43. ユーザー認証とチャレンジの署名 <script lang='ts'> import type { VerifiedRegistrationResponse } from '@simplewebauthn/server'; import type { PublicKeyCredentialCreationOptionsJSON } from '@simplewebauthn/types'; import { goto, invalidateAll } from '$app/navigation'; import { startRegistration } from '@simplewebauthn/browser'; let username = $state(''); async function createPasskey() { if (username === '') { return; } const { options } = await (await fetch('/api/auth/register', { method: 'POST', body: JSON.stringify({ username }), credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, })).json().catch((err) => { console.error(err); }) as { options: PublicKeyCredentialCreationOptionsJSON | null }; if (!options) return; const registrationResponse = await startRegistration({ optionsJSON: options }); const verificationJSON: VerifiedRegistrationResponse = await (await fetch('/api/auth/register/verify-challenge', { method: 'POST', credentials: 'same-origin', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(registrationResponse), })).json(); if (verificationJSON.verified) { await invalidateAll(); goto('/'); } } </script> <form action=""> <label>ユーザー名 <input type='text' required bind:value={username}> </label> <button onclick={createPasskey} disabled={username === ''}>登録</button> </form> 署名したチャレンジを 送り返す
44. 署名されたチャレンジを検証するAPI import type { RegistrationResponseJSON } from '@simplewebauthn/types'; import type { RequestHandler } from './$types'; import { Buffer } from 'node:buffer'; import { passkeys } from '$lib/db/schema'; import { db } from '$lib/drizzle'; import { verifyRegistrationResponse } from '@simplewebauthn/server'; import { json } from '@sveltejs/kit'; import { PUBLIC_ORIGIN, PUBLIC_RP_ID } from '$env/static/public'; export const POST: RequestHandler = async ({ request, locals: { session } }) => { const registrationResponseJSON: RegistrationResponseJSON = await request.json(); const expectedChallenge = session.data.challenge; if (!expectedChallenge) return json({ error: 'Parameters incorrect' }, { status: 400, statusText: 'Bad Request' }); const verification = await (async () => { try { return await verifyRegistrationResponse({ response: registrationResponseJSON, expectedChallenge, expectedOrigin: PUBLIC_ORIGIN, expectedRPID: PUBLIC_RP_ID, }); } catch (error) { console.error(error); } })(); if (!verification) return json({ error: 'Challenge verification failed' }, { status: 400, statusText: 'Bad Request' }); const { verified } = verification; const { registrationInfo } = verification; const user = await db.query.users.findFirst({ where: ({ id }, { eq }) => eq(id, session.data.userId ?? ''), }); if (verified && registrationInfo && user) { const { credential, credentialDeviceType, credentialBackedUp, } = registrationInfo; await db.insert(passkeys) .values({ user_id: user.id, webauthn_user_id: user.id, id: credential.id, public_key: Buffer.from(credential.publicKey), counter: credential.counter, transports: credential.transports?.join(',') ?? null, device_type: credentialDeviceType, backed_up: credentialBackedUp, }); session.cookie.path = '/'; await session.setData({ userId: user.id }); await session.save(); } return json({ verified }); }; await verifyRegistrationResponse({ response: registrationResponseJSON, expectedChallenge, expectedOrigin: PUBLIC_ORIGIN, expectedRPID: PUBLIC_RP_ID, }); チャレンジの応答を検証
45. 署名されたチャレンジを検証するAPI import type { RegistrationResponseJSON } from '@simplewebauthn/types'; import type { RequestHandler } from './$types'; import { Buffer } from 'node:buffer'; import { passkeys } from '$lib/db/schema'; import { db } from '$lib/drizzle'; import { verifyRegistrationResponse } from '@simplewebauthn/server'; import { json } from '@sveltejs/kit'; import { PUBLIC_ORIGIN, PUBLIC_RP_ID } from '$env/static/public'; export const POST: RequestHandler = async ({ request, locals: { session } }) => { const registrationResponseJSON: RegistrationResponseJSON = await request.json(); const expectedChallenge = session.data.challenge; if (!expectedChallenge) return json({ error: 'Parameters incorrect' }, { status: 400, statusText: 'Bad Request' }); const verification = await (async () => { try { return await verifyRegistrationResponse({ response: registrationResponseJSON, expectedChallenge, expectedOrigin: PUBLIC_ORIGIN, expectedRPID: PUBLIC_RP_ID, }); } catch (error) { console.error(error); } })(); if (!verification) return json({ error: 'Challenge verification failed' }, { status: 400, statusText: 'Bad Request' }); const { verified } = verification; const { registrationInfo } = verification; const user = await db.query.users.findFirst({ where: ({ id }, { eq }) => eq(id, session.data.userId ?? ''), }); if (verified && registrationInfo && user) { const { credential, credentialDeviceType, credentialBackedUp, } = registrationInfo; await db.insert(passkeys) .values({ user_id: user.id, webauthn_user_id: user.id, id: credential.id, public_key: Buffer.from(credential.publicKey), counter: credential.counter, transports: credential.transports?.join(',') ?? null, device_type: credentialDeviceType, backed_up: credentialBackedUp, }); session.cookie.path = '/'; await session.setData({ userId: user.id }); await session.save(); } return json({ verified }); }; await db.insert(passkeys) .values({ user_id: user.id, webauthn_user_id: user.id, id: credential.id, public_key: Buffer.from(credential.publicKey), counter: credential.counter, transports: credential.transports?.join(',') ?? null, device_type: credentialDeviceType, backed_up: credentialBackedUp, }); パスキーをDBに登録
46. ユーザー登録完了！
47. 詳細はアドカレの記事も読んでみてください！
48. コードはGitHubにもあります！
49. ご清聴 ありがとうございました！