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

by ritou

Slide 1

Slide 1 text

WebΞϓϦ։ൃऀ޲͚ ύεΩʔରԠͷ࢝Ίํ Getting Started with Passkeys for Web App Developers @ritou 2023/11/15 PWA Night vol.57 ʙೝূɾೝՄʙ

Slide 2

Slide 2 text

Ryo Ito (@ritou) • גࣜձࣾ MIXI - ΤϯδχΞ • OpenID ϑΝ΢ϯσʔγϣϯɾδϟύϯ - ΤόϯδΣϦετ 2

Slide 3

Slide 3 text

ຊ೔ͷ಺༰ • ύεΩʔͷ֓ཁ • WebΞϓϦέʔγϣϯ΁ͷಋೖ • ϩάΠϯUI/UXͷ঺հ 3

Slide 4

Slide 4 text

ύεΩʔ֓ཁ 4

Slide 5

Slide 5 text

ύεΩʔೝূͱ͸ • ʮύεϫʔυ͕ෆཁͳೝূํࣜʯ • FIDOΞϥΠΞϯεͱW3C͕࢓༷ࡦఆɺApple/Google/Microsoft͕ ରԠΛද໌ • ެ։伴҉߸ʹΑΔ҆શੑɺ୺຤ͷੜମೝূͳͲΛ༻͍ͨརศੑΛಛ௃ ͱ͠ɺΫϨσϯγϟϧ͸ෳ਺ͷ୺຤ؒͰಉظՄೳ • ϑΟογϯά଱ੑΛ࣋ͪɺ୯ମͰMFAΛ࣮ݱՄೳ 5

Slide 6

Slide 6 text

ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί 3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 6

Slide 7

Slide 7 text

ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί 3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 7

Slide 8

Slide 8 text

WebΞϓϦέʔγϣϯ΁ͷಋೖ 8

Slide 9

Slide 9 text

ύεϫʔυϨε΁ͷಓ 1. ύεϫʔυೝূʹ2FAΛ௥Ճ 2. طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճͯ͠ར༻ଅਐ <- ΠϚίί 3. ΞΧ΢ϯτొ࿥࣌ͷύεΩʔొ࿥ɺύεϫʔυೝূΛແޮԽ ʮύεΩʔʹରԠͯ͠΋ύεϫʔυΛແޮʹͰ͖ͳ͍ͳΒҙຯͳ͍ʯͱ ͍͏Α͏ʹɺظ଴͕ݱঢ়Λ௒͑ͯ͠·͏͜ͱ΋͋Δɻ 9

Slide 10

Slide 10 text

ύεΩʔରԠͷجຊ : ύεΩʔ؅ཧ + ϩάΠϯ • ύεΩʔ؅ཧ • ొ࿥ɺߋ৽(໊લ)ɺ࡟আ • ଞαʔϏεΛࢀߟʹͰ͖Δ෦෼͕ଟ͍ • ϩάΠϯ • طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճ • ͍͔ͭ͘ͷ࣮૷ύλʔϯ͕͋ΔͷͰɺUI/UXઃܭ͕ॏཁ 10

Slide 11

Slide 11 text

ϩάΠϯUI/UXͷ঺հ 11

Slide 12

Slide 12 text

1. Identi fi er First 12

Slide 13

Slide 13 text

࠷ॳʹϢʔβʔࣝผࢠΛೖྗ͢Δύλʔϯ (Google, AmazonͳͲ) 13

Slide 14

Slide 14 text

Googleɿొ࿥ঢ়گɺ؀ڥ͔ΒαʔϏε͕൑அ͠ ͯύεΩʔೝূΛཁٻ 14

Slide 15

Slide 15 text

Amazonɿ ύεΩʔొ࿥ࡁΈϢʔβʔʹϘλϯ Λදࣔ͠ɺબ୒ͤ͞Δ 15

Slide 16

Slide 16 text

Identi fi er Firstύλʔϯ • FIDOೝূ౰ॳ͔Β͋ͬͨUI/UX • ύεΩʔొ࿥ࡁΈͷϢʔβʔʹରͯ͠ύεΩʔೝূΛཁٻՄೳ • ͦͷϢʔβʔ༻ͷύεΩʔʹݶఆͰ͖Δ • ొ࿥ࡁΈͷύεΩʔ͕શͯͷ؀ڥͰ࢖͑Δͱ͸ݶΒͳ͍ • Ϣʔβʔʹબ୒ΛҕͶΔͱεςοϓ͕૿͑Δ 16

Slide 17

Slide 17 text

2.Usernameless 17

Slide 18

Slide 18 text

ʮύεΩʔͰϩάΠϯʯϘλϯ

Slide 19

Slide 19 text

Usernamelessύλʔϯ • Ϣʔβʔ৘ใͱҰॹʹೝূثʹΫϨσϯγϟϧΛอଘͰ͖ΔΑ͏ʹ ͳͬͯొ৔ͨ͠UI/UX (ηΩϡϦςΟΩʔ -> ϓϥοτϑΥʔϜೝূث) • Ϣʔβʔ͕ೳಈతʹύεΩʔೝূΛબ୒ • αʔϏε͸൑அ͠ͳ͍(Ϙλϯͷग़͠Θ͚ͳͲ͸͋ΓಘΔ) • ͦͷ؀ڥʹར༻ՄೳͳύεΩʔ͕͋Δͱ͸ݶΒͳ͍ • ύεΩʔΛొ࿥͍ͯ͠ͳ͍Ϣʔβʔ͕ϘλϯΛԡ͔͢΋͠Εͳ͍ 19

Slide 20

Slide 20 text

3.Passkey Auto fi ll 20

Slide 21

Slide 21 text

ύεϫʔυϚωʔδϟʔͱύεΩʔೝূ • ύεΩʔೝূ͸ʮύεϫʔυϚωʔδϟʔΛར༻ͨ͠ύεϫʔυೝ ূʯΛΑΓਐԽͤͨ͞ೝূํࣜͱݴ͑Δ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍ͤͯ͞ʮެ։伴҉߸ํࣜʯͱੜ ମೝূͳͲͷʮϩʔΧϧೝূʯΛ૊Έ߹ΘͤͨFIDOೝূΛ࣮ݱ 21

Slide 22

Slide 22 text

Password Auto fi ll • ϒϥ΢β΍ύεϫʔυϚωʔδϟʔʹґଘ • υϝΠϯ൑ఆ • autocompleteଐੑͷѻ͍ • બ୒ޙͷϢʔβʔΞΫγϣϯ • ϑΟογϯά଱ੑͷൈ͚݀ • खಈͷίϐϖ͕Մೳ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍Ͱ͖ͳ͍

Slide 23

Slide 23 text

Passkey Auto fi ll Password Auto fi llͱಉ༷ͷUX ύεΩʔొ࿥࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋ ΞΧ΢ϯτ໊΍ϝʔϧΞυϨε ೝূ࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋ ϩʔΧϧೝূ͕ඞཁ͔Ͳ͏͔ ར༻ՄೳͳύεΩʔ͕ දࣔ͞Ε͍ͯΔ

Slide 24

Slide 24 text

Passkey Auto fi ll ໌ࣔతʹϩʔΧϧೝূΛ ཁٻͰ͖Δ

Slide 25

Slide 25 text

Passkey Auto fi ll࠾༻αʔϏε΋૿͍͑ͯΔ (MIXI MɺϝϧΧϦɺϚγϡϚϩ…) MIXI M ύεϫʔυΛར༻ͤͣʹSMS/Email OTPΛ࠾༻ Identi fi er FirstύλʔϯͷΑ͏ͳUI ʹ΋ద༻Մೳ

Slide 26

Slide 26 text

ϚωʔϑΥϫʔυ ID : ύεϫʔυϚωʔδϟʔ ͷར༻Λҙࣝͨ͠UI/UX ϝʔϧΞυϨεೖྗϑΥʔϜ͔͠ݟ͑ͳ͍ ύεϫʔυΛબΜͰ΋ҰൃͰϩάΠϯՄೳ ݟ͑ͳ͍ύεϫʔυϑΥʔϜ΋”͋Δ” ύεϫʔυɺύεΩʔ྆ํͷೝূͰಉ౳ͷ UXΛఏڙ

Slide 27

Slide 27 text

·ͱΊ 27

Slide 28

Slide 28 text

·ͱΊ • ύεΩʔೝূͷಛ௃Λਖ਼͘͠ԡ͑͞Α͏ • WebΞϓϦέʔγϣϯ΁ͷಋೖʹ͓͍ͯɺ࠷௿ݶͷػೳ͸ʮύεΩʔ ؅ཧʯͱʮϩάΠϯʯ • ϩάΠϯͷUI/UX͸3छྨ͙Β͍ʹ෼ྨͰ͖Δ • ʮPasskey Auto fi llʯ͕Φεεϝ 28

Slide 29

Slide 29 text

࣭໰ɺ໰͍߹Θͤઌ ˏritou 29