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

Vue.jsと守りのFirebase、そして何なのJWT!!

po3rin
June 19, 2018

 Vue.jsと守りのFirebase、そして何なのJWT!!

最近は Vue.js で SPA、Go言語で APIサーバーを実装しています。ここで意識するのはフロントエンドとバックエンドの分離です。分離させたい理由は二つ。

アプリ化の際や、今後、他のサービスと連携させるためにも、バックエンドはAPIサーバーに徹したい。Vue.jsで開発中にオートリロードしたい(Vue.jsをビルドして出来たファイルをGo言語でserveする形にすると、毎回ビルドするのが面倒)
しかし、これをやろうとすると認証どうするの問題が付いてきます。APIサーバ、フロントの両方をセキュアにしようとするとそれだけで時間取られます。そこで使うのが認証基盤である Firebase Authentication です。これを使うと爆速で認証が作れます。そう、爆速です。

GitHub: https://github.com/po3rin/vue-golang-fireauth
Qiita: https://qiita.com/po3rin/items/d3e016d01162e9d9de80

po3rin

June 19, 2018
Tweet

More Decks by po3rin

Other Decks in Programming

Transcript

  1. 7VFKTͱकΓͷ'JSFCBTF
    ͦͯ͠+85ͬͯԿʂʁ
    ˏQPSJO

    View Slide

  2. !QPSJO
    ৽ଔͰΰϦΰϦͷ৽نӦۀΛܦݧ͠ɺະܦݧ͔Β8
    ۀքʹస৬ɻ͓࢓ࣄ͸ϑϩϯτΤϯυͱσʔλαΠΤϯ
    εɻ޷͖ͳݴޠ͸+BWB4DSJQUɺ(Pݴޠɻ
    'SPOUFOE%FWFMPQNFOU%BUBTJFODF

    View Slide

  3. ΈΜͳฉ͍ͯ͘Εʂ
    Զ͸7VFKTͱ"1*αʔόΛ
    ׬શ෼཭͍ͤͨ͞
    όοΫΤϯυ͔Β7VFKTΛ7JFXͱͯ͠ฦ͢ͷͰ͸ͳ͘ɺ׬શʹಠཱͨ͠΋ͷʹ͠
    ͍ͨɻͳͥͳΒࠓޙͷΞϓϦԽ΍ɺผΞϓϦέʔγϣϯ͔Β΋"1*Λୟ͖ͨ͘ͳΔ
    ༧ఆ͔ͩΒʂ

    View Slide

  4. 7VFKT͸/HJOY͕ฦ͢Αʂ
    CVJMEͯ͠ϗεςΟϯά΋
    ͍ͱΑΖ͠
    αʔόʔαΠυݴޠͰ8αʔόΛ࣮૷͢ΔͷͰ͸ͳ͘ɺ/HJOYͰ7JFXΛฦ͢ܗ
    ʹͯ͠"1*αʔόͱಠཱͤ͞Δɻۙࠒ͸%PDLFS΋͍Δ͠/HJOYͰฦ͢ͷ͸؆୯ɻ΋
    ͪΖΜϏϧυͯ͠ϗεςΟϯάͯ͠΋͍͍ɻ

    View Slide

  5. ʮϑϩϯτͰͷೝূʯͱ
    ʮ"1*αʔόʔͰͷೝূʯ
    ྆ํ΍Βͳͬͪ͘Ό͋
    ͳΒͳ͍ͬͯͷ͕
    ΤϯδχΞͷਏ͍ͱͩ͜ͳ
    7VFKTଆ΋"1*΋ϩάΠϯϢʔβʔͰͳ͍ͱΞΫηεͰ͖ͳ͍Α͏ʹ͍ͨ͠ɺ׬
    શʹ෼཭ͤͨ͞৔߹ͬͯͲ͏͢Μͷʁʁ

    View Slide

  6. 7VFKT͸'JSFCBTFͷ"VUIFOUJDBUJPOͰೝূɻ"1*αʔόʔ͸ɺͦͷࡍʹฦͬͯ
    +85τʔΫϯΛݕূɻ྆ํͱ΋'JSFCBTF͚ͩͰकΓ͖ΕΔɻ
    ͦ͜Ͱ๻Βͷ'JSFCBTFʂ

    View Slide

  7. ᶃ4JHO*O
    ᶄ+85ฦ٫
    ᶅ+85͚ͭͯ3FRVFTU
    ᶆ+85ݕূͯ͠ ᶇ༗ޮͳ+85ͩΑ
    ᶈ༗ޮͳ+85΍ͬͨͰ3FTQPOTFฦ͢Θ

    View Slide

  8. ͬͯԿ͞

    View Slide

  9. 7VFKT͸'JSFCBTFͰϩάΠϯͨ͠ࡍʹؼͬͯ͘Δ+85ΛϩʔΧ
    ϧετϨʔδʹอ؅ɻ

    View Slide

  10. αʔόʔͱ௨৴͢Δࡍ͸"VUIPSJ[BUJPOϔομʔΛ͚ͭͯ+85Λૹ৴ʂʂ

    View Slide

  11. WVFSPVUFSͰ͸DVSSFOU6TFSϓϩύςΟͰݱࡏϩάΠϯ͍ͯ͠ΔϢʔβʔΛऔಘ͠ɺ
    ϩάΠϯ൑ఆɻϢʔβʔ͕ϩάΠϯ͍ͯ͠ͳ͍৔߹ɺDVSSFOU6TFS͸OVMMͰ͢ɻ

    View Slide

  12. ઌ΄Ͳ࣮૷ͨ͠CFGPSF&BDI͕'JSFCBTF͕ॳظԽ͞ΕΔલʹ࣮ߦ͞ΕΔͷͰɺΞ
    ϓϦέʔγϣϯͷ࠷ॳͷϩʔυ࣌ʹɹpSFCBTFBVUI
    DVSSFOU6TFS͕OVMMΛฦͯ͠
    ͠·͏ҝͰ͢ɻPO"VUI4UBUF$IBOHFEͰճආɻʢ΋ͬͱ͍͍ํ๏͋Δͷ͔ʁʣ

    View Slide

  13. ϑϩϯτ͔Βདྷͨ+85͸αʔόʔଆͰ΋'JSFCBTFΛ࢖ͬͯݕূɻ
    ຊདྷ͸ϛυϧ΢ΣΞͰϋϯυϥʔΛϥοϓ͢Δ͕ɺΘ͔Γ΍͍͢Α͏ʹ

    View Slide

  14. ɾ֎෦ͷೝূج൫࢖͑͹
    αʔόʔαΠυͱͷ׬શ෼཭΋ָউ
    ɾ+85͸ೝূʹศརɻ
    ଞͷαʔϏεͰ΋࢖͍ճͤΔ
    ·ͱΊ
    IUUQTHJUIVCDPNQPSJOWVFHPMBOHpSFBVUI
    IUUQTRJJUBDPNQPSJOJUFNTEFEFEEF

    View Slide

  15. ϖʔδ͸΋͏ଘࡏ͠·ͤΜ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ

    View Slide