Laravel x nuxt.js ～認証難しい問題～

at Laravel x Vue.js 勉強会 in 札幌 vol.1 https://larasap.connpass.com/event/130842/

Transcript

1. Laravel x nuxt.js
   ～認証難しい問題～
   山岸 “あかいいぬ” Masaru
   2019/06/07
   

   View Slide

2. 山岸 “あかいいぬ” Masaru
   - ㈱インフィニットループで 5 年ほど
   - PHP, golang, JavaScript, TypeScript, GLSL
   - Laravel, Slim, nuxt.js, babylon.js
   - AWS, GCP
   https://il-m-yamagishi.github.io
   

   View Slide

3. View Slide

4. View Slide

5. https://github.com/virtual-cast/babylon-vrm-loader
   

   View Slide

6. https://virtualcast.jp/blog/2019/04/ux-dx-friendly-with-nuxt-js/
   nuxt.js?
   

   View Slide

7. THE SEED ONLINE
   

   View Slide

8. THE SEED ONLINE
   xR 時代のアセット流通プラットフォーム
   1. ブラウザで 3D モデルをアップロード
   2. プレビュー
   3. Unity SDK でダウンロード
   バーチャルキャスト、Vタビで使える
   (今後もっと増える)
   

   View Slide

9. ただの
   Google Drive
   じゃね説
   

   View Slide

10. わかる
    

    View Slide

11. THE SEED ONLINE の未来
    - 3D モデルだけでなく、音や画像なども対象に
    - アップロードしたものを販売出来るように(as UGC)
    - 今バーチャルマーケットでやっていることをうちでもやりたい
    - THE SEED ONLINE ID で様々な VR 世界を渡り歩ける(as OAuth Provider)
    - 他にも色々考え中!
    

    View Slide

12. 二段構成
    Unity SDK
    https://seed.online
    https://api.seed.online
    WebView
    JSON API
    フロントエンド
    ユーザ
    バックエンド
    

    View Slide

13. with OAuth Login
    

    View Slide

14. as OAuth ID Provider
    

    View Slide

15. Laravel Socialite
    Twitter, Facebook などの OAuth Provider ID を使って Laravel ユーザ認証する
    niconico Provider を実装した(OAuth 周りの仕様つらい)
    あれ、でもフロントエンドは nuxt.js …?
    

    View Slide

16. 認証難しい問題
    

    View Slide

17. 認証難しい問題
    ユーザは nuxt.js(node.js) サーバにアクセスする https://seed.online
    データは Laravel サーバから取得する https://api.seed.online
    どうやって nuxt 上で Laravel 認証するか
    

    View Slide

18. 認証難しい問題
    Laravel デフォルトは Cookie でステートフル(セッション)認証を行う
    Laravel Passport は別途 SDK 向けに使うから使えない
    Laravel Socialite で別サービスでログイン出来る必要もある
    

    View Slide

19. 認証難しい問題
    SDK
    + mail
    https://seed.online
    https://api.seed.online https://oauth.seed.online
    セッション情報を保持
    (localStorage)
    ログインコールバック
    WebView Authorize
    users DB
    API Request
    

    View Slide

20. 認証難しい問題
    

    View Slide

21. tymon/jwt-auth
    No v1.0 in 3+ years, 400+ issues, only 1 project member #1810
    実用にはちょっと...という状態
    

    View Slide

22. ステートレス化
    nuxt <-> Laravel は json API でステートレスにしたい
    -> `Authorization: Bearer token` のトークンをクッキーに入れる Middleware
    https:://carbon.now.sh 画像生成良い
    

    View Slide

23. ステートレス化
    ログイン完了時にセッションIDを暗号化して json response
    EncryptCookies Middleware も入れておく
    

    View Slide

24. ステートレス化
    nuxt 側はヘッダーに jwt ぽく入れるだけ
    

    View Slide

25. Socialite 対応
    OAuth の仕様で、 Cookie ステートフルでなければならない
    Cookie に `;domain=seed.online` と明示して共有出来るようにした
    サブドメインの異なるサービス間で cookie を共有する
    

    View Slide

26. Passport 対応
    ログインと連携確認の描画は nuxt 側
    Passport で `return view();` する場所を全て nuxt にリダイレクトする形に変更
    Cookie も Socialite 同様共有
    OAuth 仕様つらい
    

    View Slide

27. リダイレクトバック対応
    ログインしたらログインする前にいたページに戻りたい
    ログインを求める前に `window.sessionStorage` に今のパス情報を保存
    ログイン後に復元してリダイレクト
    ※セキュリティ的に問題ないかチェックが必要
    

    View Slide

28. OAuth
    チュライ
    

    View Slide

29. fin.
    

    View Slide