Webアプリ開発者向け パスキー対応の始め方

PWA Night vol.57 ～認証・認可〜の発表資料です。
https://pwanight.connpass.com/event/300275/

1. WebΞϓϦ։ൃऀ޲͚ ύεΩʔରԠͷ࢝Ίํ Getting Started with Passkeys for Web App Developers @ritou 2023/11/15 PWA Night vol.57 ʙೝূɾೝՄʙ
2. Ryo Ito (@ritou) • גࣜձࣾ MIXI - ΤϯδχΞ • OpenID ϑΝ΢ϯσʔγϣϯɾδϟύϯ - ΤόϯδΣϦετ 2
3. ຊ೔ͷ಺༰ • ύεΩʔͷ֓ཁ • WebΞϓϦέʔγϣϯ΁ͷಋೖ • ϩάΠϯUI/UXͷ঺հ 3
4. ύεΩʔ֓ཁ 4
5. ύεΩʔೝূͱ͸ • ʮύεϫʔυ͕ෆཁͳೝূํࣜʯ • FIDOΞϥΠΞϯεͱW3C͕࢓༷ࡦఆɺApple/Google/Microsoft͕ ରԠΛද໌ • ެ։伴҉߸ʹΑΔ҆શੑɺ୺຤ͷੜମೝূͳͲΛ༻͍ͨརศੑΛಛ௃ ͱ͠ɺΫϨσϯγϟϧ͸ෳ਺ͷ୺຤ؒͰಉظՄೳ • ϑΟογϯά଱ੑΛ࣋ͪɺ୯ମͰMFAΛ࣮ݱՄೳ 5
6. ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί 3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 6
7. ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί 3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 7
8. WebΞϓϦέʔγϣϯ΁ͷಋೖ 8
9. ύεϫʔυϨε΁ͷಓ 1. ύεϫʔυೝূʹ2FAΛ௥Ճ 2. طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճͯ͠ར༻ଅਐ <- ΠϚίί 3. ΞΧ΢ϯτొ࿥࣌ͷύεΩʔొ࿥ɺύεϫʔυೝূΛແޮԽ ʮύεΩʔʹରԠͯ͠΋ύεϫʔυΛແޮʹͰ͖ͳ͍ͳΒҙຯͳ͍ʯͱ ͍͏Α͏ʹɺظ଴͕ݱঢ়Λ௒͑ͯ͠·͏͜ͱ΋͋Δɻ 9
10. ύεΩʔରԠͷجຊ : ύεΩʔ؅ཧ + ϩάΠϯ • ύεΩʔ؅ཧ • ొ࿥ɺߋ৽(໊લ)ɺ࡟আ • ଞαʔϏεΛࢀߟʹͰ͖Δ෦෼͕ଟ͍ • ϩάΠϯ • طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճ • ͍͔ͭ͘ͷ࣮૷ύλʔϯ͕͋ΔͷͰɺUI/UXઃܭ͕ॏཁ 10
11. ϩάΠϯUI/UXͷ঺հ 11
12. 1. Identi fi er First 12
13. ࠷ॳʹϢʔβʔࣝผࢠΛೖྗ͢Δύλʔϯ (Google, AmazonͳͲ) 13
14. Googleɿొ࿥ঢ়گɺ؀ڥ͔ΒαʔϏε͕൑அ͠ ͯύεΩʔೝূΛཁٻ 14
15. Amazonɿ ύεΩʔొ࿥ࡁΈϢʔβʔʹϘλϯ Λදࣔ͠ɺબ୒ͤ͞Δ 15
16. Identi fi er Firstύλʔϯ • FIDOೝূ౰ॳ͔Β͋ͬͨUI/UX • ύεΩʔొ࿥ࡁΈͷϢʔβʔʹରͯ͠ύεΩʔೝূΛཁٻՄೳ • ͦͷϢʔβʔ༻ͷύεΩʔʹݶఆͰ͖Δ • ొ࿥ࡁΈͷύεΩʔ͕શͯͷ؀ڥͰ࢖͑Δͱ͸ݶΒͳ͍ • Ϣʔβʔʹબ୒ΛҕͶΔͱεςοϓ͕૿͑Δ 16
17. 2.Usernameless 17
18. ʮύεΩʔͰϩάΠϯʯϘλϯ
19. Usernamelessύλʔϯ • Ϣʔβʔ৘ใͱҰॹʹೝূثʹΫϨσϯγϟϧΛอଘͰ͖ΔΑ͏ʹ ͳͬͯొ৔ͨ͠UI/UX (ηΩϡϦςΟΩʔ -> ϓϥοτϑΥʔϜೝূث) • Ϣʔβʔ͕ೳಈతʹύεΩʔೝূΛબ୒ • αʔϏε͸൑அ͠ͳ͍(Ϙλϯͷग़͠Θ͚ͳͲ͸͋ΓಘΔ) • ͦͷ؀ڥʹར༻ՄೳͳύεΩʔ͕͋Δͱ͸ݶΒͳ͍ • ύεΩʔΛొ࿥͍ͯ͠ͳ͍Ϣʔβʔ͕ϘλϯΛԡ͔͢΋͠Εͳ͍ 19
20. 3.Passkey Auto fi ll 20
21. ύεϫʔυϚωʔδϟʔͱύεΩʔೝূ • ύεΩʔೝূ͸ʮύεϫʔυϚωʔδϟʔΛར༻ͨ͠ύεϫʔυೝ ূʯΛΑΓਐԽͤͨ͞ೝূํࣜͱݴ͑Δ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍ͤͯ͞ʮެ։伴҉߸ํࣜʯͱੜ ମೝূͳͲͷʮϩʔΧϧೝূʯΛ૊Έ߹ΘͤͨFIDOೝূΛ࣮ݱ 21
22. Password Auto fi ll • ϒϥ΢β΍ύεϫʔυϚωʔδϟʔʹґଘ • υϝΠϯ൑ఆ • autocompleteଐੑͷѻ͍ • બ୒ޙͷϢʔβʔΞΫγϣϯ • ϑΟογϯά଱ੑͷൈ͚݀ • खಈͷίϐϖ͕Մೳ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍Ͱ͖ͳ͍
23. Passkey Auto fi ll Password Auto fi llͱಉ༷ͷUX ύεΩʔొ࿥࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋ ΞΧ΢ϯτ໊΍ϝʔϧΞυϨε ೝূ࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋ ϩʔΧϧೝূ͕ඞཁ͔Ͳ͏͔ ར༻ՄೳͳύεΩʔ͕ දࣔ͞Ε͍ͯΔ
24. Passkey Auto fi ll ໌ࣔతʹϩʔΧϧೝূΛ ཁٻͰ͖Δ
25. Passkey Auto fi ll࠾༻αʔϏε΋૿͍͑ͯΔ (MIXI MɺϝϧΧϦɺϚγϡϚϩ…) MIXI M ύεϫʔυΛར༻ͤͣʹSMS/Email OTPΛ࠾༻ Identi fi er FirstύλʔϯͷΑ͏ͳUI ʹ΋ద༻Մೳ
26. ϚωʔϑΥϫʔυ ID : ύεϫʔυϚωʔδϟʔ ͷར༻Λҙࣝͨ͠UI/UX ϝʔϧΞυϨεೖྗϑΥʔϜ͔͠ݟ͑ͳ͍ ύεϫʔυΛબΜͰ΋ҰൃͰϩάΠϯՄೳ ݟ͑ͳ͍ύεϫʔυϑΥʔϜ΋”͋Δ” ύεϫʔυɺύεΩʔ྆ํͷೝূͰಉ౳ͷ UXΛఏڙ
27. ·ͱΊ 27
28. ·ͱΊ • ύεΩʔೝূͷಛ௃Λਖ਼͘͠ԡ͑͞Α͏ • WebΞϓϦέʔγϣϯ΁ͷಋೖʹ͓͍ͯɺ࠷௿ݶͷػೳ͸ʮύεΩʔ ؅ཧʯͱʮϩάΠϯʯ • ϩάΠϯͷUI/UX͸3छྨ͙Β͍ʹ෼ྨͰ͖Δ • ʮPasskey Auto fi llʯ͕Φεεϝ 28
29. ࣭໰ɺ໰͍߹Θͤઌ ˏritou 29