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

Transcript

1. 1.

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

2. 2.

   山岸 “あかいいぬ” Masaru - ㈱インフィニットループで 5 年ほど - PHP, golang,

   JavaScript, TypeScript, GLSL - Laravel, Slim, nuxt.js, babylon.js - AWS, GCP https://il-m-yamagishi.github.io
3. 3.

   None
4. 4.

   None
5. 5.

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

6. 6.

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

7. 7.

   THE SEED ONLINE

8. 8.

   THE SEED ONLINE xR 時代のアセット流通プラットフォーム 1. ブラウザで 3D モデルをアップロード 2.

   プレビュー 3. Unity SDK でダウンロード バーチャルキャスト、Vタビで使える (今後もっと増える)
9. 9.

   ただの Google Drive じゃね説

10. 10.

    わかる

11. 11.

    THE SEED ONLINE の未来 - 3D モデルだけでなく、音や画像なども対象に - アップロードしたものを販売出来るように(as UGC)

    - 今バーチャルマーケットでやっていることをうちでもやりたい - THE SEED ONLINE ID で様々な VR 世界を渡り歩ける(as OAuth Provider) - 他にも色々考え中!
12. 12.

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

    バックエンド
13. 13.

    with OAuth Login

14. 14.

    as OAuth ID Provider

15. 15.

    Laravel Socialite Twitter, Facebook などの OAuth Provider ID を使って Laravel

    ユーザ認証する niconico Provider を実装した(OAuth 周りの仕様つらい) あれ、でもフロントエンドは nuxt.js …?
16. 16.

    認証難しい問題

17. 17.

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

    nuxt 上で Laravel 認証するか
18. 18.

    認証難しい問題 Laravel デフォルトは Cookie でステートフル(セッション)認証を行う Laravel Passport は別途 SDK 向けに使うから使えない

    Laravel Socialite で別サービスでログイン出来る必要もある
19. 19.

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

    WebView Authorize users DB API Request
20. 20.

    認証難しい問題

21. 21.

    tymon/jwt-auth No v1.0 in 3+ years, 400+ issues, only 1

    project member #1810 実用にはちょっと...という状態
22. 22.

    ステートレス化 nuxt <-> Laravel は json API でステートレスにしたい -> `Authorization:

    Bearer token` のトークンをクッキーに入れる Middleware https:://carbon.now.sh 画像生成良い
23. 23.

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

24. 24.

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

25. 25.

    Socialite 対応 OAuth の仕様で、 Cookie ステートフルでなければならない Cookie に `;domain=seed.online` と明示して共有出来るようにした

    サブドメインの異なるサービス間で cookie を共有する
26. 26.

    Passport 対応 ログインと連携確認の描画は nuxt 側 Passport で `return view();` する場所を全て

    nuxt にリダイレクトする形に変更 Cookie も Socialite 同様共有 OAuth 仕様つらい
27. 27.

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

28. 28.

    OAuth チュライ

29. 29.

    fin.