Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥

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. Ryo Ito (@ritou) • גࣜձࣾ MIXI - ΤϯδχΞ • OpenID

    ϑΝ΢ϯσʔγϣϯɾδϟύϯ - ΤόϯδΣϦετ 2
  2. ύεΩʔීٴͷྲྀΕ 1. ϓϥοτϑΥʔϜɺϒϥ΢β͕ύεΩʔೝূʹରԠ • WebAuthn APIͷαϙʔτɺύεϫʔυϚωʔδϟʔ΁ͷอଘ 2. αʔϏε͕ύεΩʔೝূʹରԠ <- ΠϚίί

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

    3. Ϣʔβʔ͕ར༻ ϓϥΫςΟεෆ଍ͷͨΊʹɺ։ൃऀࣗମ΋ύεΩʔೝূΛར༻ͯ͠ཧղ ͢Δඞཁ͕͋Δͷ͕ݱঢ় 7
  4. ύεΩʔରԠͷجຊ : ύεΩʔ؅ཧ + ϩάΠϯ • ύεΩʔ؅ཧ • ొ࿥ɺߋ৽(໊લ)ɺ࡟আ •

    ଞαʔϏεΛࢀߟʹͰ͖Δ෦෼͕ଟ͍ • ϩάΠϯ • طଘͷೝূํࣜʹύεΩʔೝূΛ௥Ճ • ͍͔ͭ͘ͷ࣮૷ύλʔϯ͕͋ΔͷͰɺUI/UXઃܭ͕ॏཁ 10
  5. Usernamelessύλʔϯ • Ϣʔβʔ৘ใͱҰॹʹೝূثʹΫϨσϯγϟϧΛอଘͰ͖ΔΑ͏ʹ ͳͬͯొ৔ͨ͠UI/UX (ηΩϡϦςΟΩʔ -> ϓϥοτϑΥʔϜೝূث) • Ϣʔβʔ͕ೳಈతʹύεΩʔೝূΛબ୒ •

    αʔϏε͸൑அ͠ͳ͍(Ϙλϯͷग़͠Θ͚ͳͲ͸͋ΓಘΔ) • ͦͷ؀ڥʹར༻ՄೳͳύεΩʔ͕͋Δͱ͸ݶΒͳ͍ • ύεΩʔΛొ࿥͍ͯ͠ͳ͍Ϣʔβʔ͕ϘλϯΛԡ͔͢΋͠Εͳ͍ 19
  6. Password Auto fi ll • ϒϥ΢β΍ύεϫʔυϚωʔδϟʔʹґଘ • υϝΠϯ൑ఆ • autocompleteଐੑͷѻ͍

    • બ୒ޙͷϢʔβʔΞΫγϣϯ • ϑΟογϯά଱ੑͷൈ͚݀ • खಈͷίϐϖ͕Մೳ • ύεϫʔυϚωʔδϟʔͷར༻Λڧ੍Ͱ͖ͳ͍
  7. Passkey Auto fi ll Password Auto fi llͱಉ༷ͷUX ύεΩʔొ࿥࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋

    ΞΧ΢ϯτ໊΍ϝʔϧΞυϨε ೝূ࣌ʹαʔϏε͕ࢦఆ ର৅ͷυϝΠϯ΍originͷ஋ ϩʔΧϧೝূ͕ඞཁ͔Ͳ͏͔ ར༻ՄೳͳύεΩʔ͕ දࣔ͞Ε͍ͯΔ