Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

ritou
November 15, 2023

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

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

ritou

November 15, 2023
Tweet

More Decks by ritou

Other Decks in Technology

Transcript

  1. WebΞϓϦ։ൃऀ޲͚


    ύεΩʔରԠͷ࢝Ίํ
    Getting Started with Passkeys


    for Web App Developers
    @ritou 2023/11/15 PWA Night vol.57 ʙೝূɾೝՄʙ

    View full-size slide

  2. Ryo Ito (@ritou)
    • גࣜձࣾ MIXI - ΤϯδχΞ


    • OpenID ϑΝ΢ϯσʔγϣϯɾδϟύϯ - ΤόϯδΣϦετ
    2

    View full-size slide

  3. ຊ೔ͷ಺༰
    • ύεΩʔͷ֓ཁ


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


    • ϩάΠϯUI/UXͷ঺հ
    3

    View full-size slide

  4. ύεΩʔ֓ཁ
    4

    View full-size slide

  5. ύεΩʔೝূͱ͸
    • ʮύεϫʔυ͕ෆཁͳೝূํࣜʯ


    • FIDOΞϥΠΞϯεͱW3C͕࢓༷ࡦఆɺApple/Google/Microsoft͕
    ରԠΛද໌


    • ެ։伴҉߸ʹΑΔ҆શੑɺ୺຤ͷੜମೝূͳͲΛ༻͍ͨརศੑΛಛ௃
    ͱ͠ɺΫϨσϯγϟϧ͸ෳ਺ͷ୺຤ؒͰಉظՄೳ


    • ϑΟογϯά଱ੑΛ࣋ͪɺ୯ମͰMFAΛ࣮ݱՄೳ
    5

    View full-size slide

  6. ύεΩʔීٴͷྲྀΕ
    1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ


    • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ


    2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί


    3. Ϣʔβʔ͕ར༻


    ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ
    ͢Δඞཁ͕͋Δͷ͕ݱঢ়
    6

    View full-size slide

  7. ύεΩʔීٴͷྲྀΕ
    1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ


    • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ


    2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί


    3. Ϣʔβʔ͕ར༻


    ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ
    ͢Δඞཁ͕͋Δͷ͕ݱঢ়
    7

    View full-size slide

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

    View full-size slide

  9. ύεϫʔυϨε΁ͷಓ
    1. ύεϫʔυೝূʹ2FAΛ௥Ճ


    2. طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճͯ͠ར༻ଅਐ <- ΠϚίί


    3. ΞΧ΢ϯτొ࿥࣌ͷύεΩʔొ࿥ɺύεϫʔυೝূΛແޮԽ


    ʮύεΩʔʹରԠͯ͠΋ύεϫʔυΛແޮʹͰ͖ͳ͍ͳΒҙຯͳ͍ʯͱ
    ͍͏Α͏ʹɺظ଴͕ݱঢ়Λ௒͑ͯ͠·͏͜ͱ΋͋Δɻ
    9

    View full-size slide

  10. ύεΩʔରԠͷجຊ : ύεΩʔ؅ཧ + ϩάΠϯ
    • ύεΩʔ؅ཧ


    • ొ࿥ɺߋ৽(໊લ)ɺ࡟আ


    • ଞαʔϏεΛࢀߟʹͰ͖Δ෦෼͕ଟ͍


    • ϩάΠϯ


    • طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճ


    • ͍͔ͭ͘ͷ࣮૷ύλʔϯ͕͋ΔͷͰɺUI/UXઃܭ͕ॏཁ
    10

    View full-size slide

  11. ϩάΠϯUI/UXͷ঺հ
    11

    View full-size slide

  12. 1. Identi
    fi
    er First
    12

    View full-size slide

  13. ࠷ॳʹϢʔβʔࣝผࢠΛೖྗ͢Δύλʔϯ


    (Google, AmazonͳͲ)
    13

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. Identi
    fi
    er Firstύλʔϯ
    • FIDOೝূ౰ॳ͔Β͋ͬͨUI/UX


    • ύεΩʔొ࿥ࡁΈͷϢʔβʔʹରͯ͠ύεΩʔೝূΛཁٻՄೳ


    • ͦͷϢʔβʔ༻ͷύεΩʔʹݶఆͰ͖Δ


    • ొ࿥ࡁΈͷύεΩʔ͕શͯͷ؀ڥͰ࢖͑Δͱ͸ݶΒͳ͍


    • Ϣʔβʔʹબ୒ΛҕͶΔͱεςοϓ͕૿͑Δ
    16

    View full-size slide

  17. 2.Usernameless
    17

    View full-size slide

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

    View full-size slide

  19. Usernamelessύλʔϯ
    • Ϣʔβʔ৘ใͱҰॹʹೝূثʹΫϨσϯγϟϧΛอଘͰ͖ΔΑ͏ʹ
    ͳͬͯొ৔ͨ͠UI/UX (ηΩϡϦςΟΩʔ -> ϓϥοτϑΥʔϜೝূث)


    • Ϣʔβʔ͕ೳಈతʹύεΩʔೝূΛબ୒


    • αʔϏε͸൑அ͠ͳ͍(Ϙλϯͷग़͠Θ͚ͳͲ͸͋ΓಘΔ)


    • ͦͷ؀ڥʹར༻ՄೳͳύεΩʔ͕͋Δͱ͸ݶΒͳ͍


    • ύεΩʔΛొ࿥͍ͯ͠ͳ͍Ϣʔβʔ͕ϘλϯΛԡ͔͢΋͠Εͳ͍
    19

    View full-size slide

  20. 3.Passkey Auto
    fi
    ll
    20

    View full-size slide

  21. ύεϫʔυϚωʔδϟʔͱύεΩʔೝূ
    • ύεΩʔೝূ͸ʮύεϫʔυϚωʔδϟʔΛར༻ͨ͠ύεϫʔυೝ
    ূʯΛΑΓਐԽͤͨ͞ೝূํࣜͱݴ͑Δ


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

    View full-size slide

  22. Password Auto
    fi
    ll
    • ϒϥ΢β΍ύεϫʔυϚωʔδϟʔʹґଘ


    • υϝΠϯ൑ఆ


    • autocompleteଐੑͷѻ͍


    • બ୒ޙͷϢʔβʔΞΫγϣϯ


    • ϑΟογϯά଱ੑͷൈ͚݀


    • खಈͷίϐϖ͕Մೳ


    • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍Ͱ͖ͳ͍

    View full-size slide

  23. Passkey Auto
    fi
    ll
    Password Auto
    fi
    llͱಉ༷ͷUX


    ύεΩʔొ࿥࣌ʹαʔϏε͕ࢦఆ


    ର৅ͷυϝΠϯ΍originͷ஋


    ΞΧ΢ϯτ໊΍ϝʔϧΞυϨε


    ೝূ࣌ʹαʔϏε͕ࢦఆ


    ର৅ͷυϝΠϯ΍originͷ஋


    ϩʔΧϧೝূ͕ඞཁ͔Ͳ͏͔
    ར༻ՄೳͳύεΩʔ͕


    දࣔ͞Ε͍ͯΔ

    View full-size slide

  24. Passkey Auto
    fi
    ll
    ໌ࣔతʹϩʔΧϧೝূΛ


    ཁٻͰ͖Δ

    View full-size slide

  25. Passkey Auto
    fi
    ll࠾༻αʔϏε΋૿͍͑ͯΔ


    (MIXI MɺϝϧΧϦɺϚγϡϚϩ…)
    MIXI M


    ύεϫʔυΛར༻ͤͣʹSMS/Email
    OTPΛ࠾༻


    Identi
    fi
    er FirstύλʔϯͷΑ͏ͳUI
    ʹ΋ద༻Մೳ

    View full-size slide

  26. ϚωʔϑΥϫʔυ ID : ύεϫʔυϚωʔδϟʔ
    ͷར༻Λҙࣝͨ͠UI/UX
    ϝʔϧΞυϨεೖྗϑΥʔϜ͔͠ݟ͑ͳ͍


    ύεϫʔυΛબΜͰ΋ҰൃͰϩάΠϯՄೳ


    ݟ͑ͳ͍ύεϫʔυϑΥʔϜ΋”͋Δ”


    ύεϫʔυɺύεΩʔ྆ํͷೝূͰಉ౳ͷ
    UXΛఏڙ

    View full-size slide

  27. ·ͱΊ
    • ύεΩʔೝূͷಛ௃Λਖ਼͘͠ԡ͑͞Α͏


    • WebΞϓϦέʔγϣϯ΁ͷಋೖʹ͓͍ͯɺ࠷௿ݶͷػೳ͸ʮύεΩʔ
    ؅ཧʯͱʮϩάΠϯʯ


    • ϩάΠϯͷUI/UX͸3छྨ͙Β͍ʹ෼ྨͰ͖Δ


    • ʮPasskey Auto
    fi
    llʯ͕Φεεϝ
    28

    View full-size slide

  28. ࣭໰ɺ໰͍߹Θͤઌ


    ˏritou
    29

    View full-size slide