Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

楽ちんユーザー認証付Spa

2,690 views

Published on

フロントエンドもくもく会 新年LT大会で Nuxt.js + Rails API + Auth0 + Heroku の話をしました。 @corocn

Published in: Engineering
  • Be the first to comment

  • Be the first to like this

楽ちんユーザー認証付Spa

  1. 1. 楽ちん認証付きSPA フロントエンドもくもく会 LT大会 @corocn
  2. 2. PROFILE ● @corocn(ころちゃん) ● Misoca Inc. ● Ruby (Rails), PHP, AWS ● サーバーサイドの人なのでフロントエンドは苦手 です(><)
  3. 3. 最近の話
  4. 4. SPAでアプリケーションを作るの が流行ってるそうですが
  5. 5. ぶっちゃけ複雑
  6. 6. 流行りのSPAで楽に開発できそうな構成を考えてみ ました
  7. 7. 最近のアプリ
  8. 8. SPA Mobile App REST API ServerlessMonolith RDB NoSQL Cloud FunctionsAPI Gateway Realtime DatabaseDynamoDB Microservice?
  9. 9. 楽したいので....
  10. 10. SPA Mobile App REST API ServerlessMonolith RDB NoSQL Cloud FunctionsAPI Gateway Realtime DatabaseDynamoDB Microservice?
  11. 11. 認証は? 今日一番話したいこと
  12. 12. Auth0を使う https://auth0.com/jp/
  13. 13. Auth0 ● クラウド認証プラットフォーム ● SDKが豊富で組み込みが楽 ● JsonWebToken (JWT) に対応 https://jwt.io/ ● RailsのDevise, OmniAuthあたりで時間を浪費した くないので使うことにした
  14. 14. チュートリアルも豊富 SPA用のサンプルなので、他にもあるよ
  15. 15. 連携できるサービスが豊富 Auth0との連携ができてればGoogle, Github, Twitterを使ってのユー ザー認証がすぐできる
  16. 16. Whitelist ● ささっと書ける
  17. 17. https://github.com/nuxt/example-auth0 Nuxt.js + Auth0の例 (しかしサンプルが壊れてて実際は動かない) GIF
  18. 18. 最終的にこうなった
  19. 19. REST API 専用のUser/Passwordはダルいので GoogleアカウントでSingleSignOnする 余談ですが、1レポジトリ、1サーバーで管理するために、 SPAモードで静的ファイルを生成して Railsの publicフォルダにぶち込むなどしています。本当は CDNに置いたほうが良いよね・・・ Webpackerがつらいので、 割り切ってAPIサーバーにしている
  20. 20. 2.G社の認 証ログイン ページへ 1.認証 3.認証成功 4.ユーザー作成 or 取得 ※JsonWebToken User ID等の情報を Payloadとして保持する 中身は見えるけど書き換 えられない localStorage 秘密鍵 公開鍵 8.正しいToken か検証 & ユー ザー情報取得 ペア 5.ユーザー情報 を含むJWTを返 す 6.保存 7.API呼ぶ
  21. 21. ちょっと複雑に見えるかもしれませんが、フロントと サーバーサイドを疎結合にした上で、いい感じに認 証できたと思っている (Auth0にロックインするという問題はある)
  22. 22. JWT便利
  23. 23. 駆け足だったので、どっかでちゃ んとまとめる予定です(技術書典 に出すかも)
  24. 24. 時間あれば色々試した話をします ● 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つらい
  25. 25. ありがとうございました

×