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
5.7k
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
OIDF-J EIWG 振り返り
ritou
1
6
そのQRコード、安全ですか? / Cross Device Flow
ritou
3
270
MIXI Mと社内外のサービスを支える認証基盤を作るためにやってきたこと #MTDC2024
ritou
2
360
Passkeys and Identity Federation @ OpenID Summit Tokyo 2024
ritou
2
610
様々なユースケースに利用できる "パスキー" の 導入事例の紹介とUXの課題解説 @ DroidKaigi 2023
ritou
3
4.3k
パスキーはユーザー認証を どう変えるのか?その特徴と導入における課題 @ devsumi 2023 9-C-1
ritou
6
12k
Android/Chromeで体験できる 認証のための標準化仕様の 現在と未来 @ DroidKaigi 2022
ritou
2
6.5k
C向けサービスで 使われている認証方式と安全な使い方
ritou
12
2.9k
現状のFedCMの動作解説と OIDCとの親和性について- OpenID TechNight vol.19
ritou
2
1k
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
46k
Next.js のページ遷移を全力で止める
ypresto
9
3.7k
Mocking in Rust Applications
taiki45
2
420
ネットワークだけ隔離されたコンテナ作成デモ / Kichijoji.pm36
tenforward
1
250
Discovering AI Models
picardparis
4
3.9k
言葉は感情の近似値である。その感情と言葉の誤差を最小化しよう ~コミュニケーションにおけるアナログ/デジタル変換の課題に立ち向かう~
nktamago
0
250
プロダクトエンジニアを支えるための開発生産性向上施策
tsukakei
0
150
不動産売買取引におけるAIの可能性とプロダクトでのAI活用
zabio3
0
280
内製化を目指す事業会社が、システム開発会社と共に進める「開発生産性改善」の取り組み事例 #devsumi
yuwji
1
170
Segment Anything Model 2
tenten0727
3
720
急拡大する開発組織を支えるナレッジワークの E2E テスト基盤
kworkdev
PRO
0
210
より快適なエラーログ監視を目指して
leveragestech
4
1.5k
Featured
See All Featured
Building Your Own Lightsaber
phodgson
101
6k
Making Projects Easy
brettharned
113
5.8k
The Cost Of JavaScript in 2023
addyosmani
42
5.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
4 Signs Your Business is Dying
shpigford
179
21k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
8.9k
Optimising Largest Contentful Paint
csswizardry
31
2.8k
Intergalactic Javascript Robots from Outer Space
tanoku
268
26k
Producing Creativity
orderedlist
PRO
340
39k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
A better future with KSS
kneath
235
17k
Navigating Team Friction
lara
183
13k
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