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.2k
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
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 + α
ritou
0
67
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
4
1.6k
OIDF-J EIWG 振り返り
ritou
2
36
そのQRコード、安全ですか? / Cross Device Flow
ritou
4
420
MIXI Mと社内外のサービスを支える認証基盤を作るためにやってきたこと #MTDC2024
ritou
3
520
Passkeys and Identity Federation @ OpenID Summit Tokyo 2024
ritou
2
750
様々なユースケースに利用できる "パスキー" の 導入事例の紹介とUXの課題解説 @ DroidKaigi 2023
ritou
3
4.8k
パスキーはユーザー認証を どう変えるのか?その特徴と導入における課題 @ devsumi 2023 9-C-1
ritou
6
13k
Android/Chromeで体験できる 認証のための標準化仕様の 現在と未来 @ DroidKaigi 2022
ritou
2
7.2k
Other Decks in Technology
See All in Technology
AIエージェント元年
shukob
0
150
RemoveだらけのPHPUnit 12に備えよう
cocoeyes02
0
260
大規模アジャイルフレームワークから学ぶエンジニアマネジメントの本質
staka121
PRO
3
1k
PHPで印刷所に入稿できる名札データを作る / Generating Print-Ready Name Tag Data with PHP
tomzoh
0
180
Perlの生きのこり - エンジニアがこの先生きのこるためのカンファレンス2025
kfly8
2
260
AWSではじめる Web APIテスト実践ガイド / A practical guide to testing Web APIs on AWS
yokawasa
7
620
ディスプレイ広告(Yahoo!広告・LINE広告)におけるバックエンド開発
lycorptech_jp
PRO
0
300
Active Directory攻防
cryptopeg
PRO
8
5.3k
1行のコードから社会課題の解決へ: EMの探究、事業・技術・組織を紡ぐ実践知 / EM Conf 2025
9ma3r
8
3.5k
EMConf JP 2025 懇親会LT / EMConf JP 2025 social gathering
sugamasao
2
180
手を動かしてレベルアップしよう!
maruto
0
200
Exadata Database Service on Cloud@Customer セキュリティ、ネットワーク、および管理について
oracle4engineer
PRO
2
1.5k
Featured
See All Featured
The World Runs on Bad Software
bkeepers
PRO
67
11k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
How to Ace a Technical Interview
jacobian
276
23k
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Navigating Team Friction
lara
183
15k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Invisible Side of Design
smashingmag
299
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Fontdeck: Realign not Redesign
paulrobertlloyd
83
5.4k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
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