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
4.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
MIXI Mと社内外のサービスを支える認証基盤を作るためにやってきたこと #MTDC2024
ritou
2
280
Passkeys and Identity Federation @ OpenID Summit Tokyo 2024
ritou
1
470
様々なユースケースに利用できる "パスキー" の 導入事例の紹介とUXの課題解説 @ DroidKaigi 2023
ritou
3
3.8k
パスキーはユーザー認証を どう変えるのか?その特徴と導入における課題 @ devsumi 2023 9-C-1
ritou
6
11k
Android/Chromeで体験できる 認証のための標準化仕様の 現在と未来 @ DroidKaigi 2022
ritou
2
5.9k
C向けサービスで 使われている認証方式と安全な使い方
ritou
12
2.8k
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
890
GNAP超入門 ~ IW2021 C15
ritou
2
4.9k
OAuth 2.0仕様紹介 JAR, PAR, RAR @ iddance Lesson3
ritou
2
1.6k
Other Decks in Technology
See All in Technology
スクラムに出会って「できた」を実感できるようになってきた話 / Scrum makes me feel like I can do it
yayoi_dd
2
110
Dungeons and Dragons and Rails
joelq
0
250
エンジニアゼロの組織から内製開発の DX をどう実現したのか / How did we achieve DX in in-house development in an organization with zero engineers?
genkiogasawara
7
3.2k
汎用ポリシー言語Rego + OPAと認可・検証事例の紹介 / Introduction Rego & OPA for authorization and validation
mizutani
1
180
LLM評価の落とし穴~開発者目線で気をつけるポイント~
rishigami
12
3.3k
B2C、B2B プロダクトマネジメントの違い(および思考の罠) / B2C, B2B PM and reduction fallacy
ykmc09
5
2.5k
PhpStorm超絶技巧40分集中講義 #phpconkagawa
yusuke
4
790
Databricksの生成AI戦略
taka_aki
1
380
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
140
.NET GraphQL Client のリアル
sansantech
PRO
1
430
TiDBにおけるテーブル設計と最適化の事例
cygames
0
810
日本が誇るイタリアのダンスミュージック!? ユーロビートって何??
minorun365
PRO
2
230
Featured
See All Featured
Build your cross-platform service in a week with App Engine
jlugia
226
17k
KATA
mclloyd
16
12k
A Philosophy of Restraint
colly
197
16k
Infographics Made Easy
chrislema
238
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
2k
Thoughts on Productivity
jonyablonski
60
3.9k
A Tale of Four Properties
chriscoyier
153
22k
Designing with Data
zakiwarfel
96
4.8k
Producing Creativity
orderedlist
PRO
338
39k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Facilitating Awesome Meetings
lara
43
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
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