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
PRO
November 14, 2018
Technology
1
1.6k
Laravelで簡単にSPA Webアプリ 作成!JWT認証導入
Laravelで簡単にSPA Webアプリ作成!JWT認証導入
Takayuki
PRO
November 14, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
エンジニアのキャリア論
bumptakayuki
PRO
0
69
地方カンファレンス主催のススメ
bumptakayuki
PRO
1
130
Laravelで敢えて試す脆弱性のある書き方
bumptakayuki
PRO
1
580
地方でのPHPエンジニア採用って実際どうなの?
bumptakayuki
PRO
0
460
沖縄観光、名物を一挙紹介!
bumptakayuki
PRO
2
470
Laravel ShiftでLaravelのバージョンアップしてみた話
bumptakayuki
PRO
1
1.4k
flutterでイベントアプリを作ってみた
bumptakayuki
PRO
0
98
オフショア開発の辛みと学んだ事
bumptakayuki
PRO
0
320
ChatGPTにStripeのサンプルコードを書かせてみた
bumptakayuki
PRO
1
140
Other Decks in Technology
See All in Technology
20240724_cm_odyssey_hibiyatech
hiashisan
0
110
LLMアプリケーションの評価の実践と課題 ~PharmaXにおける今後の展望~
pharma_x_tech
2
170
What is DRE? - Road to SRE NEXT@広島
chanyou0311
3
630
クラウド利用者の「責任」をどう果たす?AWSセキュリティ対策のススメ #AWSSummit
hiashisan
0
280
さらに高品質・高速化を目指すAI時代のテスト設計支援と、めざす先 / AI Test Lab vol.1
shift_evolve
0
190
[NIKKEI Tech Talk] KDDI/KAG Scrum & Community for Engineering Training
curanosuke
2
220
ギークの理想が7つ集まるエムスリーで夢を叶えよう - エムスリー株式会社
m3_engineering
1
260
エンジニアの生存戦略 〜クラウド潮流の経験から紐解く技術トレンドのメカニズムと乗りこなし方〜
shimy
9
1.9k
Docker互換のセキュアなコンテナ実行環境「Podman」超入門
devops_vtj
6
3.2k
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
[I/O Extended Android 2024] What`s new in Android 2024
kyeongwan
0
220
フルリモートワークはエンジニアの夢を叶えたか? #cm_odyssey
mamohacy
2
600
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
26
1.6k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Producing Creativity
orderedlist
PRO
340
39k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Navigating Team Friction
lara
181
13k
Debugging Ruby Performance
tmm1
71
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Building Better People: How to give real-time feedback that sticks.
wjessup
357
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Designing Experiences People Love
moore
136
23k
Practical Orchestrator
shlominoach
185
10k
Agile that works and the tools we love
rasmusluckow
325
20k
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݄த