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で簡単にSPA Webアプリ 作成!JWT認証導入
Search
Takayuki
November 14, 2018
Technology
1
1.8k
Laravelで簡単にSPA Webアプリ 作成!JWT認証導入
Laravelで簡単にSPA Webアプリ作成!JWT認証導入
Takayuki
November 14, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
Laravel × Clean Architecture
bumptakayuki
0
330
エンジニアのキャリア論
bumptakayuki
0
200
地方カンファレンス主催のススメ
bumptakayuki
1
210
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
680
沖縄観光、名物を一挙紹介!
bumptakayuki
2
670
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.8k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
400
Other Decks in Technology
See All in Technology
2つのフロントエンドと状態管理
mixi_engineers
PRO
3
110
2025年になってもまだMySQLが好き
yoku0825
8
4.8k
職種の壁を溶かして開発サイクルを高速に回す~情報透明性と職種越境から考えるAIフレンドリーな職種間連携~
daitasu
0
170
Practical Agentic AI in Software Engineering
uzyn
0
110
TS-S205_昨年対比2倍以上の機能追加を実現するデータ基盤プロジェクトでのAI活用について
kaz3284
1
170
現場で効くClaude Code ─ 最新動向と企業導入
takaakikakei
1
250
AIエージェント開発用SDKとローカルLLMをLINE Botと組み合わせてみた / LINEを使ったLT大会 #14
you
PRO
0
120
AWSで始める実践Dagster入門
kitagawaz
1
620
5年目から始める Vue3 サイト改善 #frontendo
tacck
PRO
3
220
2025年夏 コーディングエージェントを統べる者
nwiizo
0
170
CDK CLIで使ってたあの機能、CDK Toolkit Libraryではどうやるの?
smt7174
4
180
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
230
Featured
See All Featured
Gamification - CAS2011
davidbonilla
81
5.4k
KATA
mclloyd
32
14k
Become a Pro
speakerdeck
PRO
29
5.5k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Reflections from 52 weeks, 52 projects
jeffersonlam
352
21k
Music & Morning Musume
bryan
46
6.8k
Scaling GitHub
holman
463
140k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Transcript
LaravelͰ؆୯ʹSPA WebΞϓϦ ࡞ʂJWTೝূಋೖ LaravelͰ؆୯ʹSPA WebΞϓϦ ࡞ʂJWTೝূಋೖ גࣜձࣾϦϏϧυ / @kanbo0605
3 LaravelͰͷ͍ํ Agenda 2 JWTೝূͱ 1 ࣗݾհ
1 ࣗݾհ
4 ࣗݾհ ◆໊લ ླ ೭(Suzuki Takayuki) ◆ࣗݾհ ɾ1990ɺਆಸݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015ʹϑϧεϐʔυʹೖࣾ͠ɺ2017ʹϑϦʔϥϯεΛ
ͬͨޙʹ201711݄ʹԭೄͰىۀɻ ◆Twitter @kanbo0605 ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4,Vue.js,Nuxt.js
2 JWTೝূͱ
6 SPAͷWebΞϓϦͰ ϩάΠϯػೳΛ࡞Δͷେม͡Ό ͳ͍Ͱ͔͢ʁʁ
7 JWTͱ JWTʢδϣοτʣͱ JSON Web Token ͷུͰɺిࢠॺ໊͖ͷ URL-safeͳJSONΛͬͨೝূํ ࣜͰ͢ɻ Ұ൪ͷେ͖͍རిࢠॺ໊͕ͭ
͍͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ ͕େ͖͍Ͱ͢ɻ
8 JWTͱ [ೝূϑϩʔͷΈ] ᶃΫϥΠΞϯτɺೝূใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔόೝূใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴 Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞ ΫηεΛߦ͏ɻ
9 JWTͱ ▪JWT༻ͷϝϦοτ JSONΣϒτʔΫϯͷ༻Λਪ͢Δ͍͔ͭ͘ͷཧ༝ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔϔομʔͱͯ͑͠Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ
ɾJWT͕ಠཱܕͰ͋Δ͜ͱ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
3 LaravelͰͷ͍ํ
ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ APIϦΫΤετ αʔόαΠυ Vuex Token͕ฦ٫͞ΕΔ Component Action Mutations State
Plugin /login Routing Middleware Dispatch Render Commit Mutate eyJ0eXAiOiJKV1QiLCJhbGci OiJIUzI1NiJ9.eyJpc3MiOiJod HRwOlwvXC9sb2NhbGhvc3 RcL2FwaVwvdjFcL2xvZ2luIiw iaWF0IjoxNTQxMzk3NDAyLC JleHAiOjE1NDE0MDEwMDIs Im5iZiI6MTU0MTM5NzQwMi wianRpIjoiSGx1eUVXRU5Jc TdWRHZ6ZyIsInN1YiI6MSwi cHJ2IjoiMWFiMTVlMTVhNG NiODBjOWY3MTJkZTQ3OD ViMmIyMDk4ZGFlMjhjMyJ9. Qkbo7Mf4kMlTbWT- r4L6GhSUUlTUE7p7OHPdob FEXiI Tokenͷྫ HTML CSS JS TokenΛड͚औͬ ͯɺlocalStorage ʹઃఆ ຖճɺToken͕ localStrageʹ͋ Δ͔νΣοΫɻ ͳ͚Εɺϩά Πϯը໘ʹϦμ ΠϨΫτ ຖճɺlocalStorage Λ֬ೝ͠ɺtokenΛ Authorizationϔο μʔʹઃఆ localStrage token tokenΛऔಘ αʔόαΠυଆͰ ϩάΠϯॲཧΛ࣮ߦ tokenΛൃߦɻ ϒϥβ͔ΒΞΫηε͠ɺ ϢʔβIDͱύεϫʔυΛೖྗ tokenΛઃఆ
1 2 ࣮͢Δͷ ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ ɾ/api/me ϢʔβʔͷใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ •
1 3 खॱ ᶃೝূػೳΛ࡞ ᶄcomposerͰjwt-authΛΠϯετʔϧ ᶅEmployeeϞσϧΛमਖ਼ ᶆguardΛमਖ਼ ᶇApiControllerΛੜ ᶈroutes/api.phpΛฤू
1 4 ᶃೝূػೳΛ࡞ $ php artisan make:auth $ php artisan
migrate ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞͢Δɻ ͜ΕͰ؆୯ʹೝূػೳΛ࡞Ͱ͖·͢ɻ
1 5 ᶄcomposerͰjwt-authΛΠϯετʔϧ jwt-authͷॳظઃఆΛߦ͍·͢ɻ jwt-authΛLaravelϓϩδΣΫτʹΠϯετʔϧ͠·͢ɻ config/jwt.php͕ੜ͞Ε·͢ɻ ࠷ޙʹൿີ伴Λੜ
1 6 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
1 7 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ
1 8 ᶆguardΛमਖ਼(config/auth.php) guardೝূΛཧ͢ΔΈͰɺσϑΥϧτͰ webͱapi͕͋Γ·͢ɻ webhtml͔ΒͷϩάΠϯΛཧ͍ͯ͠·͢ɻ Ұํɺapi໊લͷ௨ΓɺWebAPIͷϩάΠϯͰ͢ɻ jwt-authΛ͏ͷͰapiΛjwtʹม͑·͢ɻ config/auth.phpΛฤू
1 9 ᶇApiControllerΛੜ ࣍ʹAPIͷίϯτϩʔϥʔΛ࡞͠·͢ɻ app/Http/Controllers/ApiController.php͕ੜ͞Ε·͢ɻ
2 0 ᶇApiControllerΛੜ
2 1 ᶈroutes/api.phpΛฤू
2 2 ࣮ࡍʹಈ͔͢
2 3 ࣮ࡍʹಈ͔͢
2 4 ࣮ࡍʹಈ͔͢
2 5 ࣮ࡍʹಈ͔͢ curlͰࢼͯ͠Έ·͢ɻ emailͱpassword্ͷϢʔβʔΛొͨ͠ͱ͖ͷΛࢦఆ͠·͢ɻ ͦͯ͠τʔΫϯΛͬͯೝূ͕ඞཁͳurlʹΞΫηεͯ͠Έ·͢ɻ AuthorizationϔομʔʹBearer: <token>Λ͚ͯૹ৴͠·͢ɻ σʔλ͕ฦ͖ͬͯ·ͨ͠ɻ
2 6 ࢀߟ https://qiita.com/tkt989/items/15b49e9ea8d31d8228ce Laravel + Jwt Auth Ͱೝূ͖WebAPIΛ࡞Δ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token
JWTɺJSONΣϒτʔΫϯ
2 7 ࠂ phpΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂʂʂ 201910݄த