狠狠撸

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

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

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

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

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

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

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

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

楽ちんユーサ?ー认証付厂辫补

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

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

Whitelist
● ささっと書ける

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

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

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

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

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

時間あれば色々試した話をします
● 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つらい

ありがとうございました

狠狠撸

楽ちんユーサ?ー认証付厂辫补

More Related Content

楽ちんユーサ?ー认証付厂辫补