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

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