パスキーのすべて ── 導入・UX設計・実装の紹介 / 20250213 パスキー開発者の集い

ヌーラボ主催「パスキー開発者の集い」の講演資料になります。
https://nulab.connpass.com/event/341051/

2025年1月28日に「パスキーのすべて ── 導入・UX設計・実装」を発売しました。
https://gihyo.jp/book/2025/978-4-297-14653-5

著者よりパスキーの概要やポイントをお伝えしつつ、書籍の紹介をさせていただきました。

Transcript

1. パスキーのすべて 導入・UX設計・実装 の紹介 えーじ 倉林雅 小岩井航介 パスキー開発者の集い
2. ブラウザ開発チームでWeb 開発者向けの認証技術など の啓蒙を担当しています。 えーじ 倉林雅 小岩井航介 OpenID・OAuth技術の 啓発・教育活動に携わり、 現在は某インターネット企業に てプロダクトマネージャを担当し ています。 ID・認証に関することを中心 に、新しい技術を調べたり、調 べたことを発表したり、仕様を 書いたり、広めたりしていま す。 2

3. 3
 「パスキーのすべて」の概要 「パスキー」はパスワードレス認証を実現する認証技術です。 本書では、開発者はもちろん、企画職やデザイン職、セキュリティ担当などの認 証に携わる方々に向けた内容になっています。 • 従来の認証技術の課題と比較して何が優れているのか • パスキーの導入で知っておくべき特性 • パスキーの登録・認証・管理画面などのUX設計 • WebサイトだけでなくiOSやAndroidの具体的な実装 • パスキーが登場する以前の歴史から最新の仕様までの解説 • 読者の疑問や質問に答えるコラムも充実 2025年1月28日発売 紙版・電子版 絶賛発売中
4. 本書の構成 4
 第1章　パスキー導入が求められる背景 ── 既存の認証方法とパスキーの背景を知ろう 第2章　パスキーを理解する ── パスキーの特徴や利点を理解しよう 第3章　パスキーのユーザー体験 ── パスキーの体験をイメージしよう 第4章　サポート環境 ── ユーザーの環境ごとに利用できる機能を確認しよう 第5章　パスキーの UXを実装する ── UXの実現に必要なメソッドやパラメータを知ろう 第6章　WebAuthn APIリファレンス ── クライアントとサーバの実装の詳細を確認しよう 第7章　スマホアプリ向けの実装 ── AndroidとiOSにおける実装を確認しよう 第8章　パスキーのより高度な使い方 ── より効果的な活用とUX向上方法を知ろう 第9章　パスキー周辺のエコシステム ── 標準化の流れや開発者向け情報を確認しよう 付録A　クライアント用 Extensionの解説 ── 後方互換や先進的な活用のための拡張機能をみてみよう 付録B　iOS実装サンプル ── サンプルアプリを動かしてみよう 本書についての詳細はこちら
5. コラム一覧 5
 第1章 ❏ NIST SP 800-63 ❏ 公開鍵暗号をざっくりと理解する 第2章 ❏ ディスカバラブルでないクレデンシャル ❏ パスキーは多要素認証ではない場合も あるのでは？ ❏ アカウントのライフサイクルとパスキーの関係 性 第3章 ❏ パスキーの他人との共有 ❏ クロスデバイス認証のしくみ 第5章 ❏ PINを使わず，生体認証だけでパスキーを 利用できるようにすることはできますか？ 第6章 ❏ パスキーの同期を禁止する方法はある？ 第7章 ❏ アプリで利用している生体認証とパスキーは 何が違うの？ 本書についての詳細はこちら
7. パスキーの基本 7

8. なぜパスキーは必要とされるのか • パスワードによる認証の限界 ◦ 弱いパスワード（辞書攻撃） ◦ 再利用されたパスワード（リスト攻撃） ◦ フィッシング • パスワードマネージャー ◦ リテラシが高くなければ利用されない • 二要素認証（ワンタイムパスワード方式） ◦ フィッシング 8

9. • 安全かつ簡単に利用できる認証 ◦ デバイスの生体認証を実行するだけ ◦ パスワード単体やOTPベースの二要素認証よりも安全 パスキーの登場 9

10. • アカウントに紐づける形で公開鍵ペアを作成 ◦ デバイスのアンロック機構がトリガー ◦ 公開鍵をサーバーに登録、秘密鍵はデバイスに保存 • ログイン時はその秘密鍵（パスキー）を使って署名を行う 公開鍵暗号方式 10
 Server Client 秘密鍵（パスキー）
 公開鍵

11. パスワードマネージャーで管理 11
 • パスワードマネージャーで管理され、ログイン時はドメインがチェックされる • 秘密鍵（パスキー）はパスワードマネージャーを介してデバイス間を同期 Client Password Manager
12. パスキーの安全性 • 公開鍵はパスワードのように漏洩しても署名を偽造されにくい • 公開鍵ペアはユニークなので、盗まれても別サイトで再利用できない • パスワードマネージャーに管理されるので、フィッシングに引っかかりにくい 12

13. パスキーの利用環境 13
 • Google パスワードマネージャー • Apple パスワード（ iCloud キーチェーン） • Windows Hello • 1Password • Dashlane • Bitwarden • etc
14. パスキーの利用環境 14
 Windows macOS iOS/iPadOS Android Linux ChromeOS Googleパスワードマネージャー 🔄*1*2 🔄*1 🔄 🔄 🔄*1 🔄*1 Appleパスワード 🔄 🔄 Windows Hello ✅ 3Pパスワードマネージャー 🔄*3 🔄*3 🔄 🔄 🔄*3 🔄*3 *1 Chromeのみ *2 要TPM *3 拡張機能として
15. パスキーのユーザー体験 15

16. デザインすべきユーザー体験 同じアカウントに対して複数のパスキーを登録できるなど、従来の認証技術に ないUXを踏まえてデザインする必要がある。 16
 新規登録 パスキーの追加 ユーザー認証 ログイン パスキーの管理 再認証
17. パスキーの登録 登録のUXは大きく2つに分類できる。 • アカウントの新規登録に登録 • 既存アカウントへ任意のタイミングで登録 既存アカウントへの登録には工夫が必要。 • ログイン直後にパスキー登録を促す プロモーションを表示 • パスキーの管理画面から登録 • パスワードログイン時に自動登録など 17

18. パスキーの認証 ログイン体験は2つ考えられる。 ワンボタンログイン方式 • ログインボタンをタップしアカウント を選択して認証する フォームオートフィル方式 • パスワードログインのフォームの オートフィル機能にアカウントを表 示し認証する 18

19. パスキーの管理画面 1つのアカウントに複数のパスキーを登録できるため管 理画面を提供であり、ユーザーにとってわかりやすい 管理画面のUXが必要である。 • パスキーの名前とアイコン • 登録日時・最終使用日時・使用したOS • 同期パスキーとデバイス固定パスキーのラベル • 名前の編集ボタン • 削除ボタンなど 19
 S

20. その他のユーザー体験 今回取り上げたユーザー体験の他に考慮しなければならない点はある。 • パスキーの再認証 ◦ ログイン済みのアカウントに制限して再認証をさせる • クロスデバイス認証 ◦ パスキーが登録済みのスマートフォンを利用して、パスキーのない PCや スマートフォンにログインさせる ◦ 表示したQRコードを読み取ってBluetoothで通信してログインする 20

21. WebAuthn Level3 での修正点 21

22. W3C WebAuthn仕様はバージョンを Levelで表現 22

23. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 23

24. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 24
 FIDO2からパスキーに 移行するために必須な変更
25. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 25
 パスキーのUXを改善する ための変更
26. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 26
 パスキーの実装を簡単に するための機能追加
27. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 27
 パスキーの利便性を上げるため の機能追加（デモあり）
28. Level3の主な修正点一覧 • Timeout 時間の変更 • BE, BS フラグ • クロスデバイス認証　(hybrid) • Attestationがnoneの場合もAAGUIDを付与できる • hints パラメータ • JSON シリアライゼーション • getClientCapabilities() メソッド • Conditional Get, Creation • Signal API • cross-origin iframe内でのパスキー作成 • Related Origins (複数ドメインでのパスキーの共有） 28
 パスキーを利用できる場所を拡 大するための変更
29. Conditional Get/Creation・Signal API デモ 29

30. 30
 パスキーのすべて 導入・UX設計・実装 の紹介 書店・オンラインストアにて絶賛発売中 よろしくお願いいたします
31. One More Thing… 31

32. 2025年３月２４日（月） 夜の予定を空けておいてください。 詳細は近日公開！ 32