1. 楽ちん認証付きSPA
フロントエンドもくもく会 LT大会
@corocn

2. PROFILE
● @corocn（ころちゃん）
● Misoca Inc.
● Ruby (Rails), PHP, AWS
● サーバーサイドの人なのでフロントエンドは苦手
です（＞＜）

3. 最近の話

4. SPAでアプリケーションを作るの
が流行ってるそうですが

5. ぶっちゃけ複雑

6. 流行りのSPAで楽に開発できそうな構成を考えてみ
ました

7. 最近のアプリ

8. SPA
Mobile
App
REST API
ServerlessMonolith
RDB NoSQL
Cloud FunctionsAPI Gateway
Realtime DatabaseDynamoDB
Microservice?

9. 楽したいので....

10. SPA
Mobile
App
REST API
ServerlessMonolith
RDB NoSQL
Cloud FunctionsAPI Gateway
Realtime DatabaseDynamoDB
Microservice?

11. 認証は？
今日一番話したいこと

12. Auth0を使う
https://auth0.com/jp/

13. Auth0
● クラウド認証プラットフォーム
● SDKが豊富で組み込みが楽
● JsonWebToken (JWT) に対応 https://jwt.io/
● RailsのDevise, OmniAuthあたりで時間を浪費した
くないので使うことにした

15. チュートリアルも豊富
SPA用のサンプルなので、他にもあるよ

16. 連携できるサービスが豊富
Auth0との連携ができてればGoogle, Github, Twitterを使ってのユー
ザー認証がすぐできる

17. Whitelist
● ささっと書ける

18. https://github.com/nuxt/example-auth0
Nuxt.js + Auth0の例
（しかしサンプルが壊れてて実際は動かない）
GIF

19. 最終的にこうなった

20. REST API
専用のUser/Passwordはダルいので
GoogleアカウントでSingleSignOnする
余談ですが、1レポジトリ、1サーバーで管理するために、 SPAモードで静的ファイルを生成して Railsの
publicフォルダにぶち込むなどしています。本当は CDNに置いたほうが良いよね・・・
Webpackerがつらいので、
割り切ってAPIサーバーにしている

21. 2.G社の認
証ログイン
ページへ
1.認証
3.認証成功
4.ユーザー作成
or 取得
※JsonWebToken
User ID等の情報を
Payloadとして保持する
中身は見えるけど書き換
えられない
localStorage
秘密鍵
公開鍵
8.正しいToken
か検証 & ユー
ザー情報取得
ペア
5.ユーザー情報
を含むJWTを返
す
6.保存
7.API呼ぶ

22. ちょっと複雑に見えるかもしれませんが、フロントと
サーバーサイドを疎結合にした上で、いい感じに認
証できたと思っている
（Auth0にロックインするという問題はある）

23. JWT便利

24. 駆け足だったので、どっかでちゃ
んとまとめる予定です（技術書典
に出すかも）

25. 時間あれば色々試した話をします
● Vue.js + AWS Amplify (Cognito)
○ IAMやら権限周りが複雑
○ JWTを仕組みとして使ってる
● Nuxt.js + Firebase
○ Cronを使うのにGAEのPub/Subとか使う必要有
○ Realtime Databaseのクセが強い
● Nuxt.js + Rails API + Devise + Heroku
○ NuxtからRailsにリダイレクトしたりと地獄
○ Deviseつらい

26. ありがとうございました