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
280
エンジニアのキャリア論
bumptakayuki
0
190
地方カンファレンス主催のススメ
bumptakayuki
1
200
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
2
1.1k
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
0
650
沖縄観光、名物を一挙紹介!
bumptakayuki
2
640
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
1
2.6k
flutterでイベントアプリを作ってみた
bumptakayuki
0
160
オフショア開発の辛みと学んだ事
bumptakayuki
0
390
Other Decks in Technology
See All in Technology
インフラ寄りSREの生存戦略
sansantech
PRO
5
1.6k
20250705 Headlamp: 專注可擴展性的 Kubernetes 用戶界面
pichuang
0
280
CRE Camp #1 エンジニアリングを民主化するCREチームでありたい話
mntsq
1
140
Glacierだからってコストあきらめてない? / JAWS Meet Glacier Cost
taishin
1
170
Lufthansa ®️ USA Contact Numbers: Complete 2025 Support Guide
lufthanahelpsupport
0
210
AWS CDK 開発を成功に導くトラブルシューティングガイド
wandora58
2
110
Delegating the chores of authenticating users to Keycloak
ahus1
0
160
MobileActOsaka_250704.pdf
akaitadaaki
0
150
さくらのIaaS基盤のモニタリングとOpenTelemetry/OSC Hokkaido 2025
fujiwara3
3
460
「クラウドコスト絶対削減」を支える技術—FinOpsを超えた徹底的なクラウドコスト削減の実践論
delta_tech
4
170
【Oracle Cloud ウェビナー】インフラのプロフェッショナル集団KELが考えるOCIでのソリューション実現
oracle4engineer
PRO
1
100
ビジネス職が分析も担う事業部制組織でのデータ活用の仕組みづくり / Enabling Data Analytics in Business-Led Divisional Organizations
zaimy
0
130
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.7k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
4 Signs Your Business is Dying
shpigford
184
22k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
Embracing the Ebb and Flow
colly
86
4.7k
YesSQL, Process and Tooling at Scale
rocio
173
14k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
For a Future-Friendly Web
brad_frost
179
9.8k
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݄த