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.4k
パスキー導入の課題と ベストプラクティス、今後の展望
ritou
12
4.6k
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 + α
ritou
1
99
Password-less Journey - パスキーへの移行を見据えたユーザーの準備 @ AXIES 2024
ritou
4
1.7k
OIDF-J EIWG 振り返り
ritou
2
59
そのQRコード、安全ですか? / Cross Device Flow
ritou
4
540
MIXI Mと社内外のサービスを支える認証基盤を作るためにやってきたこと #MTDC2024
ritou
3
650
Passkeys and Identity Federation @ OpenID Summit Tokyo 2024
ritou
2
830
様々なユースケースに利用できる "パスキー" の 導入事例の紹介とUXの課題解説 @ DroidKaigi 2023
ritou
3
5k
Other Decks in Technology
See All in Technology
激動の時代、新卒エンジニアはAIツールにどう向き合うか。 [LayerX Bet AI Day Countdown LT Day1 ツールの選択]
tak848
0
500
"Découvrir le Liberland"
rlifchitz
0
130
ObsidianをLLM時代のナレッジベースに! クリッピング→Markdown→CLI連携の実践
srvhat09
7
8.6k
20150719_Amazon Nova Canvas Virtual try-onアプリ 作成裏話
riz3f7
0
130
Deep Security Conference 2025:生成AI時代のセキュリティ監視 /dsc2025-genai-secmon
mizutani
5
3.9k
P2P ではじめる WebRTC のつまづきどころ
tnoho
1
140
研究開発部メンバーの働き⽅ / Sansan R&D Profile
sansan33
PRO
3
18k
今日からあなたもGeminiを好きになる
subaruhello
1
530
振り返りTransit Gateway ~VPCをいい感じでつなげるために~
masakiokuda
4
230
[SRE NEXT 2025] すみずみまで暖かく照らすあなたの太陽でありたい
carnappopper
2
860
Recoil脱却の現状と挑戦
kirik
2
110
SRE with AI:実践から学ぶ、運用課題解決と未来への展望
yoshiiryo1
1
680
Featured
See All Featured
Designing Experiences People Love
moore
142
24k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
A designer walks into a library…
pauljervisheath
207
24k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.9k
Intergalactic Javascript Robots from Outer Space
tanoku
271
27k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Optimising Largest Contentful Paint
csswizardry
37
3.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
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