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

Transcript

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