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
2. !QPSJO ৽ଔͰΰϦΰϦͷ৽نӦۀΛܦݧ͠ɺະܦݧ͔Β8&# ۀքʹస৬ɻ͓࢓ࣄ͸ϑϩϯτΤϯυͱσʔλαΠΤϯ εɻ޷͖ͳݴޠ͸+BWB4DSJQUɺ(Pݴޠɻ 'SPOUFOE
   %FWFMPQNFOU
   
   %BUBTJFODF
3. ΈΜͳฉ͍ͯ͘Εʂ
   Զ͸7VFKTͱ"1*αʔόΛ
   ׬શ෼཭͍ͤͨ͞ όοΫΤϯυ͔Β
   7VFKT
   Λ
   7JFXͱͯ͠ฦ͢ͷͰ͸ͳ͘ɺ׬શʹಠཱͨ͠΋ͷʹ͠ ͍ͨɻͳͥͳΒࠓޙͷΞϓϦԽ΍ɺผΞϓϦέʔγϣϯ͔Β΋"1*Λୟ͖ͨ͘ͳΔ ༧ఆ͔ͩΒʂ
4. 7VFKT
   ͸
   /HJOY
   ͕ฦ͢Αʂ
   CVJMEͯ͠ϗεςΟϯά΋
   ͍ͱΑΖ͠ αʔόʔαΠυݴޠͰ8&#αʔόΛ࣮૷͢ΔͷͰ͸ͳ͘ɺ/HJOYͰ7JFXΛฦ͢ܗ ʹͯ͠"1*αʔόͱಠཱͤ͞Δɻۙࠒ͸%PDLFS΋͍Δ͠/HJOYͰฦ͢ͷ͸؆୯ɻ΋ ͪΖΜϏϧυͯ͠ϗεςΟϯάͯ͠΋͍͍ɻ
5. ʮϑϩϯτͰͷೝূʯͱ
   ʮ"1*αʔόʔͰͷೝূʯ
   ྆ํ΍Βͳͬͪ͘Ό͋
   ͳΒͳ͍ͬͯͷ͕
   ΤϯδχΞͷਏ͍ͱͩ͜ͳ 7VFKT
   ଆ΋
   "1*
   ΋ϩάΠϯϢʔβʔͰͳ͍ͱΞΫηεͰ͖ͳ͍Α͏ʹ͍ͨ͠ɺ׬ શʹ෼཭ͤͨ͞৔߹ͬͯͲ͏͢Μͷʁʁ
6. 7VFKT
   ͸'JSFCBTF
   ͷ
   "VUIFOUJDBUJPO
   Ͱೝূɻ"1*αʔόʔ͸ɺͦͷࡍʹฦͬͯ +85τʔΫϯΛݕূɻ྆ํͱ΋'JSFCBTF͚ͩͰकΓ͖ΕΔɻ ͦ͜Ͱ๻Βͷ'JSFCBTFʂ
7. ᶃ
   4JHO*O ᶄ
   +85ฦ٫ ᶅ
   +85͚ͭͯ3FRVFTU ᶆ+85ݕূͯ͠ ᶇ
   ༗ޮͳ+85ͩΑ
   ᶈ
   ༗ޮͳ+85΍ͬͨͰ3FTQPOTFฦ͢Θ
8. ͬͯԿ͞
9. 7VFKT
   ͸'JSFCBTFͰϩάΠϯͨ͠ࡍʹؼͬͯ͘Δ
   +85
   ΛϩʔΧ ϧετϨʔδʹอ؅ɻ
10. αʔόʔͱ௨৴͢Δࡍ͸
    "VUIPSJ[BUJPO
    ϔομʔΛ͚ͭͯ
    +85Λૹ৴ʂʂ
11. WVFSPVUFSͰ͸DVSSFOU6TFS
    ϓϩύςΟͰݱࡏϩάΠϯ͍ͯ͠ΔϢʔβʔΛऔಘ͠ɺ ϩάΠϯ൑ఆɻϢʔβʔ͕ϩάΠϯ͍ͯ͠ͳ͍৔߹ɺDVSSFOU6TFS
    ͸
    OVMM
    Ͱ͢ɻ
12. ઌ΄Ͳ࣮૷ͨ͠
    CFGPSF&BDI
    ͕
    'JSFCBTF
    ͕ॳظԽ͞ΕΔલʹ࣮ߦ͞ΕΔͷͰɺΞ ϓϦέʔγϣϯͷ࠷ॳͷϩʔυ࣌ʹɹpSFCBTFBVUI DVSSFOU6TFS
    ͕
    OVMM
    Λฦͯ͠ ͠·͏ҝͰ͢ɻPO"VUI4UBUF$IBOHFE
    Ͱճආɻʢ΋ͬͱ͍͍ํ๏͋Δͷ͔ʁʣ
13. ϑϩϯτ͔Βདྷͨ+85͸
    αʔόʔଆͰ΋
    'JSFCBTF
    Λ࢖ͬͯݕূɻ
    ຊདྷ͸ϛυϧ΢ΣΞͰϋϯυϥʔΛϥοϓ͢Δ͕ɺΘ͔Γ΍͍͢Α͏ʹ
14. ɾ֎෦ͷೝূج൫࢖͑͹
    αʔόʔαΠυͱͷ׬શ෼཭΋ָউ
    ɾ+85͸ೝূʹศརɻ
    ଞͷαʔϏεͰ΋࢖͍ճͤΔ ·ͱΊ IUUQTHJUIVCDPNQPSJOWVFHPMBOHpSFBVUI IUUQTRJJUBDPNQPSJOJUFNTEFEFEEF
15. ϖʔδ͸΋͏ଘࡏ͠·ͤΜ
    ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂ