Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Webアプリ開発者向け パスキー対応の始め方
Search
ritou
November 15, 2023
Technology
4
6.5k
Webアプリ開発者向け パスキー対応の始め方
PWA Night vol.57 ~認証・認可〜の発表資料です。
https://pwanight.connpass.com/event/300275/
ritou
November 15, 2023
Tweet
Share
More Decks by ritou
See All by ritou
“パスワードレス認証への道" ユーザー認証の変遷とパスキーの関係
ritou
2
2.1k
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
12
4.2k
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 + α
ritou
1
94
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
4
1.7k
OIDF-J EIWG 振り返り
ritou
2
53
そのQRコード、安全ですか? / Cross Device Flow
ritou
4
540
MIXI Mと社内外のサービスを支える認証基盤を作るためにやってきたこと #MTDC2024
ritou
3
630
Passkeys and Identity Federation @ OpenID Summit Tokyo 2024
ritou
2
820
様々なユースケースに利用できる "パスキー" の 導入事例の紹介とUXの課題解説 @ DroidKaigi 2023
ritou
3
5k
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
180
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
150
ネットワーク保護はどう変わるのか?re:Inforce 2025最新アップデート解説
tokushun
0
110
AI導入の理想と現実~コストと浸透〜
oprstchn
0
120
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
340
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
340
変化する開発、進化する体系時代に適応するソフトウェアエンジニアの知識と考え方(JaSST'25 Kansai)
mizunori
1
240
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
130
Wasm元年
askua
0
160
AWS Summit Japan 2025 Community Stage - App workflow automation by AWS Step Functions
matsuihidetoshi
1
300
怖くない!はじめてのClaude Code
shinya337
0
240
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.2k
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Agile that works and the tools we love
rasmusluckow
329
21k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Code Reviewing Like a Champion
maltzj
524
40k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Fireside Chat
paigeccino
37
3.5k
A better future with KSS
kneath
239
17k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Transcript
WebΞϓϦ։ൃऀ͚ ύεΩʔରԠͷ࢝Ίํ Getting Started with Passkeys for Web App Developers
@ritou 2023/11/15 PWA Night vol.57 ʙೝূɾೝՄʙ
Ryo Ito (@ritou) • גࣜձࣾ MIXI - ΤϯδχΞ • OpenID
ϑΝϯσʔγϣϯɾδϟύϯ - ΤόϯδΣϦετ 2
ຊͷ༰ • ύεΩʔͷ֓ཁ • WebΞϓϦέʔγϣϯͷಋೖ • ϩάΠϯUI/UXͷհ 3
ύεΩʔ֓ཁ 4
ύεΩʔೝূͱ • ʮύεϫʔυ͕ෆཁͳೝূํࣜʯ • FIDOΞϥΠΞϯεͱW3C͕༷ࡦఆɺApple/Google/Microsoft͕ ରԠΛද໌ • ެ։伴҉߸ʹΑΔ҆શੑɺͷੜମೝূͳͲΛ༻͍ͨརศੑΛಛ ͱ͠ɺΫϨσϯγϟϧෳͷؒͰಉظՄೳ •
ϑΟογϯάੑΛ࣋ͪɺ୯ମͰMFAΛ࣮ݱՄೳ 5
ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥβ͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί
3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆͷͨΊʹɺ։ൃऀࣗମύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 6
ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥβ͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί
3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆͷͨΊʹɺ։ൃऀࣗମύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 7
WebΞϓϦέʔγϣϯͷಋೖ 8
ύεϫʔυϨεͷಓ 1. ύεϫʔυೝূʹ2FAΛՃ 2. طଘͷೝূํࣜʹύεΩʔೝূΛՃͯ͠ར༻ଅਐ <- ΠϚίί 3. ΞΧϯτొ࣌ͷύεΩʔొɺύεϫʔυೝূΛແޮԽ ʮύεΩʔʹରԠͯ͠ύεϫʔυΛແޮʹͰ͖ͳ͍ͳΒҙຯͳ͍ʯͱ
͍͏Α͏ʹɺظ͕ݱঢ়Λ͑ͯ͠·͏͜ͱ͋Δɻ 9
ύεΩʔରԠͷجຊ : ύεΩʔཧ + ϩάΠϯ • ύεΩʔཧ • ొɺߋ৽(໊લ)ɺআ •
ଞαʔϏεΛࢀߟʹͰ͖Δ෦͕ଟ͍ • ϩάΠϯ • طଘͷೝূํࣜʹύεΩʔೝূΛՃ • ͍͔ͭ͘ͷ࣮ύλʔϯ͕͋ΔͷͰɺUI/UXઃܭ͕ॏཁ 10
ϩάΠϯUI/UXͷհ 11
1. Identi fi er First 12
࠷ॳʹϢʔβʔࣝผࢠΛೖྗ͢Δύλʔϯ (Google, AmazonͳͲ) 13
Googleɿొঢ়گɺڥ͔ΒαʔϏε͕அ͠ ͯύεΩʔೝূΛཁٻ 14
Amazonɿ ύεΩʔొࡁΈϢʔβʔʹϘλϯ Λදࣔ͠ɺબͤ͞Δ 15
Identi fi er Firstύλʔϯ • FIDOೝূॳ͔Β͋ͬͨUI/UX • ύεΩʔొࡁΈͷϢʔβʔʹରͯ͠ύεΩʔೝূΛཁٻՄೳ • ͦͷϢʔβʔ༻ͷύεΩʔʹݶఆͰ͖Δ
• ొࡁΈͷύεΩʔ͕શͯͷڥͰ͑ΔͱݶΒͳ͍ • ϢʔβʔʹબΛҕͶΔͱεςοϓ͕૿͑Δ 16
2.Usernameless 17
ʮύεΩʔͰϩάΠϯʯϘλϯ
Usernamelessύλʔϯ • ϢʔβʔใͱҰॹʹೝূثʹΫϨσϯγϟϧΛอଘͰ͖ΔΑ͏ʹ ͳͬͯొͨ͠UI/UX (ηΩϡϦςΟΩʔ -> ϓϥοτϑΥʔϜೝূث) • Ϣʔβʔ͕ೳಈతʹύεΩʔೝূΛબ •
αʔϏεஅ͠ͳ͍(Ϙλϯͷग़͠Θ͚ͳͲ͋ΓಘΔ) • ͦͷڥʹར༻ՄೳͳύεΩʔ͕͋ΔͱݶΒͳ͍ • ύεΩʔΛొ͍ͯ͠ͳ͍Ϣʔβʔ͕ϘλϯΛԡ͔͢͠Εͳ͍ 19
3.Passkey Auto fi ll 20
ύεϫʔυϚωʔδϟʔͱύεΩʔೝূ • ύεΩʔೝূʮύεϫʔυϚωʔδϟʔΛར༻ͨ͠ύεϫʔυೝ ূʯΛΑΓਐԽͤͨ͞ೝূํࣜͱݴ͑Δ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍ͤͯ͞ʮެ։伴҉߸ํࣜʯͱੜ ମೝূͳͲͷʮϩʔΧϧೝূʯΛΈ߹ΘͤͨFIDOೝূΛ࣮ݱ 21
Password Auto fi ll • ϒϥβύεϫʔυϚωʔδϟʔʹґଘ • υϝΠϯఆ • autocompleteଐੑͷѻ͍
• બޙͷϢʔβʔΞΫγϣϯ • ϑΟογϯάੑͷൈ͚݀ • खಈͷίϐϖ͕Մೳ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍Ͱ͖ͳ͍
Passkey Auto fi ll Password Auto fi llͱಉ༷ͷUX ύεΩʔొ࣌ʹαʔϏε͕ࢦఆ ରͷυϝΠϯoriginͷ
ΞΧϯτ໊ϝʔϧΞυϨε ೝূ࣌ʹαʔϏε͕ࢦఆ ରͷυϝΠϯoriginͷ ϩʔΧϧೝূ͕ඞཁ͔Ͳ͏͔ ར༻ՄೳͳύεΩʔ͕ දࣔ͞Ε͍ͯΔ
Passkey Auto fi ll ໌ࣔతʹϩʔΧϧೝূΛ ཁٻͰ͖Δ
Passkey Auto fi ll࠾༻αʔϏε૿͍͑ͯΔ (MIXI MɺϝϧΧϦɺϚγϡϚϩ…) MIXI M ύεϫʔυΛར༻ͤͣʹSMS/Email OTPΛ࠾༻
Identi fi er FirstύλʔϯͷΑ͏ͳUI ʹద༻Մೳ
ϚωʔϑΥϫʔυ ID : ύεϫʔυϚωʔδϟʔ ͷར༻Λҙࣝͨ͠UI/UX ϝʔϧΞυϨεೖྗϑΥʔϜ͔͠ݟ͑ͳ͍ ύεϫʔυΛબΜͰҰൃͰϩάΠϯՄೳ ݟ͑ͳ͍ύεϫʔυϑΥʔϜ”͋Δ” ύεϫʔυɺύεΩʔ྆ํͷೝূͰಉͷ UXΛఏڙ
·ͱΊ 27
·ͱΊ • ύεΩʔೝূͷಛΛਖ਼͘͠ԡ͑͞Α͏ • WebΞϓϦέʔγϣϯͷಋೖʹ͓͍ͯɺ࠷ݶͷػೳʮύεΩʔ ཧʯͱʮϩάΠϯʯ • ϩάΠϯͷUI/UX3छྨ͙Β͍ʹྨͰ͖Δ • ʮPasskey
Auto fi llʯ͕Φεεϝ 28
࣭ɺ͍߹Θͤઌ ˏritou 29