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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

THE SEED ONLINE

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

ただの Google Drive じゃね説

Slide 10

Slide 10 text

わかる

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

with OAuth Login

Slide 14

Slide 14 text

as OAuth ID Provider

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

認証難しい問題

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

認証難しい問題

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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