Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Laravel x nuxt.js ~認証難しい問題~
Search
Masaru Yamagishi
June 07, 2019
Programming
0
1.1k
Laravel x nuxt.js ~認証難しい問題~
at Laravel x Vue.js 勉強会 in 札幌 vol.1
https://larasap.connpass.com/event/130842/
Masaru Yamagishi
June 07, 2019
Tweet
Share
More Decks by Masaru Yamagishi
See All by Masaru Yamagishi
Babylon.js 勉強会 vol.4 JAPAN 活動紹介
myamagishi
0
80
PSR-15 はあなたのための ものではない? - phpcon2024
myamagishi
0
730
3D ブラウザゲーム開発を始めたい人のために準備している話
myamagishi
1
160
「DI」と仲良くなる
myamagishi
6
3.1k
大解剖!amphpを使って非同期 PHP を実現しよう!
myamagishi
1
3.5k
PHP で負荷試験のシナリオを書きたい!ので amphp を使って自作した件
myamagishi
2
970
秒間 10,000 リクエストを "簡単に"いなすゲームサーバーを Laravel で作る設計
myamagishi
19
14k
xR グラスが普及した新時代を妄想する - XRKaigi 2022
myamagishi
0
230
Reflection を使いこなして、 オブジェクトを型安全に マッピングしよう!
myamagishi
2
850
Other Decks in Programming
See All in Programming
テスト駆動Kaggle
isax1015
1
420
ソフトウェア品質を数字で捉える技術。事業成長を支えるシステム品質の マネジメント
takuya542
2
14k
ISUCON研修おかわり会 講義スライド
arfes0e2b3c
1
450
Claude Code + Container Use と Cursor で作る ローカル並列開発環境のススメ / ccc local dev
kaelaela
10
6k
レベル1の開発生産性向上に取り組む − 日々の作業の効率化・自動化を通じた改善活動
kesoji
0
240
状態遷移図を書こう / Sequence Chart vs State Diagram
orgachem
PRO
1
130
チームのテスト力を総合的に鍛えて品質、スピード、レジリエンスを共立させる/Testing approach that improves quality, speed, and resilience
goyoki
5
930
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
2
100
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
140
スタートアップの急成長を支えるプラットフォームエンジニアリングと組織戦略
sutochin26
1
6.1k
Node-RED を(HTTP で)つなげる MCP サーバーを作ってみた
highu
0
120
PHPでWebSocketサーバーを実装しよう2025
kubotak
0
290
Featured
See All Featured
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
740
KATA
mclloyd
30
14k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
6
310
Making Projects Easy
brettharned
116
6.3k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
Adopting Sorbet at Scale
ufuk
77
9.5k
GitHub's CSS Performance
jonrohan
1031
460k
A Tale of Four Properties
chriscoyier
160
23k
Scaling GitHub
holman
460
140k
Transcript
Laravel x nuxt.js ~認証難しい問題~ 山岸 “あかいいぬ” Masaru 2019/06/07
山岸 “あかいいぬ” Masaru - ㈱インフィニットループで 5 年ほど - PHP, golang,
JavaScript, TypeScript, GLSL - Laravel, Slim, nuxt.js, babylon.js - AWS, GCP https://il-m-yamagishi.github.io
None
None
https://github.com/virtual-cast/babylon-vrm-loader
https://virtualcast.jp/blog/2019/04/ux-dx-friendly-with-nuxt-js/ nuxt.js?
THE SEED ONLINE
THE SEED ONLINE xR 時代のアセット流通プラットフォーム 1. ブラウザで 3D モデルをアップロード 2.
プレビュー 3. Unity SDK でダウンロード バーチャルキャスト、Vタビで使える (今後もっと増える)
ただの Google Drive じゃね説
わかる
THE SEED ONLINE の未来 - 3D モデルだけでなく、音や画像なども対象に - アップロードしたものを販売出来るように(as UGC)
- 今バーチャルマーケットでやっていることをうちでもやりたい - THE SEED ONLINE ID で様々な VR 世界を渡り歩ける(as OAuth Provider) - 他にも色々考え中!
二段構成 Unity SDK https://seed.online https://api.seed.online WebView JSON API フロントエンド ユーザ
バックエンド
with OAuth Login
as OAuth ID Provider
Laravel Socialite Twitter, Facebook などの OAuth Provider ID を使って Laravel
ユーザ認証する niconico Provider を実装した(OAuth 周りの仕様つらい) あれ、でもフロントエンドは nuxt.js …?
認証難しい問題
認証難しい問題 ユーザは nuxt.js(node.js) サーバにアクセスする https://seed.online データは Laravel サーバから取得する https://api.seed.online どうやって
nuxt 上で Laravel 認証するか
認証難しい問題 Laravel デフォルトは Cookie でステートフル(セッション)認証を行う Laravel Passport は別途 SDK 向けに使うから使えない
Laravel Socialite で別サービスでログイン出来る必要もある
認証難しい問題 SDK + mail https://seed.online https://api.seed.online https://oauth.seed.online セッション情報を保持 (localStorage) ログインコールバック
WebView Authorize users DB API Request
認証難しい問題
tymon/jwt-auth No v1.0 in 3+ years, 400+ issues, only 1
project member #1810 実用にはちょっと...という状態
ステートレス化 nuxt <-> Laravel は json API でステートレスにしたい -> `Authorization:
Bearer token` のトークンをクッキーに入れる Middleware https:://carbon.now.sh 画像生成良い
ステートレス化 ログイン完了時にセッションIDを暗号化して json response EncryptCookies Middleware も入れておく
ステートレス化 nuxt 側はヘッダーに jwt ぽく入れるだけ
Socialite 対応 OAuth の仕様で、 Cookie ステートフルでなければならない Cookie に `;domain=seed.online` と明示して共有出来るようにした
サブドメインの異なるサービス間で cookie を共有する
Passport 対応 ログインと連携確認の描画は nuxt 側 Passport で `return view();` する場所を全て
nuxt にリダイレクトする形に変更 Cookie も Socialite 同様共有 OAuth 仕様つらい
リダイレクトバック対応 ログインしたらログインする前にいたページに戻りたい ログインを求める前に `window.sessionStorage` に今のパス情報を保存 ログイン後に復元してリダイレクト ※セキュリティ的に問題ないかチェックが必要
OAuth チュライ
fin.