意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn

フロントエンドカンファレンス北海道2025にてチームラボのフロントエンドエンジニアが登壇用に作成したスライドです。

フロントエンドカンファレンス北海道2025
開催日：2025年9月6日（土）
会場：エア・ウォーターの森（北海道札幌市）

Transcript

1. 意外と簡単！？フロントエンドで パスキー認証を実現する WebAuthn チームラボ 志⽥ 洋⽃ フロントエンドカンファレンス北海道2025
2. © teamLab Inc ‧チームラボ ‧パッケージチーム フロントエンド班 ‧モアイとルービックキューブが好きです 志⽥ 洋⽃ Shida Hiroto ⾃⼰紹介
3. © teamLab Inc “パスキー”使っていますか？
4. © teamLab Inc → パスワードの代わりに、   指紋や顔認証でかんたん‧安全にログインできる仕組み パスキーとは だまされない： 偽サイトではログインできない 盗まれない：秘密鍵は端末側から外にでない 忘れない： 指紋や顔認証で簡単にログイン
5. © teamLab Inc → パスキーを実現する Web API であり   ブラウザと認証器とのやりとりを⾏う WebAuthn (Web Authentication API) ブラウザ/アプリケーション サーバー 認証器 (ユーザ端末側 ) WebAuthn が担う範囲 チャレンジの取得 認証要求 認証結果 認証結果の検証
6. © teamLab Inc WebAuthn 具体例
7. © teamLab Inc パスキーの作成 const credential = await navigator.credentials.create({ publicKey: options // サーバーから取得 });
8. © teamLab Inc パスキーの⾃動作成 const credential = await navigator.credentials.create({ publicKey: options // サーバーから取得 mediation: 'conditional' }); 認証要求なし
9. © teamLab Inc パスキーログイン const credential = await navigator.credentials.get({ publicKey: options }); パスキーでログイン
10. © teamLab Inc パスキーログイン (Conditional UI) const credential = await navigator.credentials.get({ publicKey: options mediation: 'conditional' }); <input type="text" name="username" autocomplete="username webauthn"> フォームの input タグ
11. © teamLab Inc パスキーの利⽤可否チェック const capabilities = await PublicKeyCredential.getClientCapabilities(); if (capabilities.conditionalCreate) /** パスキー自動作成利用可能 */ const isPasskeySupport = PublicKeyCredential.isUserVerifyingPlatformAuthenticatorAvailable() TypeScript 5.8.2 から 新たにサポート const isPasskeyAutofillSupport = await PublicKeyCredential.isConditionalMediationAvailable() パスキーの作成ができる環境か パスキーの⾃動作成ができる環境か パスキーログイン (Conditional UI) ができる環境か
12. © teamLab Inc 簡単でしょ？
13. © teamLab Inc 簡単でしょ？ だがしかし！
14. © teamLab Inc サポートしきれてないバージョンがちらほら WebAuthnの（現時点の）難点 try { const credential = await navigator.credentials.create({ publicKey: options }); } catch (error) { console.log(error) } “NotAllowedError”：途中で中断した “InvalidStateError”：すでに登録済み など... Conditional UI によるパスキーログインができない パスキーエラーの値が⼀部異なる エラーハンドリング例 iOS Safari の⼀部 Android Chrome の⼀部
15. © teamLab Inc しかしこれからを考えるとメリットだらけ - なにより安全で楽なパスキーログイン - 最新の OS/端末ではほぼ最⼤限のパスキー機能が使える - 2025 4⽉末：Chrome でのパスキー⾃動作成対応 - WebAuthn の TypeScript サポートも追いついてきた パスキー/WebAuthn のこれから
16. © teamLab Inc しかしこれからを考えるとメリットだらけ - なにより安全で楽なパスキーログイン - 最新の OS/端末ではほぼ最⼤限のパスキー機能が使える - 2025 4⽉末：Chrome でのパスキー⾃動作成対応 - WebAuthn の TypeScript サポートも追いついてきた やるしかない！！ パスキー/WebAuthn のこれから
17. © teamLab Inc Zennにて登壇資料公開します！ Zenn “チームラボ フロントエンド班” で検索！！！
18. © teamLab Inc 参考記事 - web.dev - パスワードレスのログイン⽤のパスキーを作成する - web.dev - Chrome パソコン版の Google パスワード マネージャーでパスキーを⾃動的に作成する - web.dev - フォームの⾃動⼊⼒でパスキーを使⽤してログインする - Corbado - Passkeys iOS 18: Automatic Passkey Creation & Upgrades - npmdiff - (PublicKeyCredential.getClientCapabilities()」がTypeScript 5.8.2 から新たにサポート) - Webkit - Meet Face ID and Touch ID for the Web - Git repositories on chromium - faa43ab429e4c00469326ebe45de177320ba80af