Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Laravelで簡単にSPA Webアプリ 作成!JWT認証導入
Takayuki
November 14, 2018
Technology
1
1.2k
Laravelで簡単にSPA Webアプリ 作成!JWT認証導入
Laravelで簡単にSPA Webアプリ作成!JWT認証導入
Takayuki
November 14, 2018
Tweet
Share
More Decks by Takayuki
See All by Takayuki
本当にあった怖いPHPコード7選
bumptakayuki
1
2.1k
Laravel Activity Logを使って簡単に変更履歴機能を実装しよう
bumptakayuki
0
160
vue.jsで漢字のふりがな自動変換を実装した話
bumptakayuki
1
340
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
bumptakayuki
1
200
LaravelのFat Controllerをどうリファクタしていくか
bumptakayuki
0
300
LaravelとNuxt.jsで保守性を高める構成を考えてみた
bumptakayuki
1
780
沖縄のスタートアップ企業が痛みを伴いながら、2つ目の自社プロダクト開発への挑戦
bumptakayuki
0
340
ベトナムや東京、日本各地を回って沖縄を選んだキャリア
bumptakayuki
0
620
炎上はクリスマスと共に来る
bumptakayuki
1
920
Other Decks in Technology
See All in Technology
脆弱性スキャナのOWASP ZAPを コードベースで扱ってみる / OWASP ZAP on a code base
task4233
1
200
金融領域のマルチプロダクトを効率よく開発・運用するためのシステム基盤と組織設計について / 2022-07-28-multi-product-platform
stajima
0
140
年90回以上のアップデートを実現する、Backlogを使ったスクラム開発
yoshiteruiwasaki
0
380
AWSを始める人に向けた7つの大切なこと / 7 tips for AWS beginners
hiranofumio
1
620
OpenShiftのサポートを始めるぞ!高頻度で更新されるOSSを効果的にキャッチアップする仕組みを考えました!
loftkun
0
320
ロボットの実行すらメンドクサイ!?
kou12092
0
110
金融スタートアップの上場準備で大事にしたマインドセット / 2022-08-04-the-mindset-in-preparing-for-ipo
stajima
0
300
ぼくらが選んだ次のMySQL 8.0 / MySQL80 Which We Choose
line_developers
PRO
7
2.7k
年700万円損するサーバレスの 認可システムをご紹介します!!
higuuu
3
290
テクニカルライティングの検定を受けてみた話 / "My Story About Taking the Technical Writing Exam
line_developers
PRO
1
190
eBPF-based Container Networking
johnlin
2
1.1k
ログラスを支える技術的投資の仕組み / loglass-technical-investment
urmot
8
1.8k
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
980
Happy Clients
brianwarren
89
5.6k
Design by the Numbers
sachag
271
17k
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
What's new in Ruby 2.0
geeforr
336
30k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
127
8.5k
Become a Pro
speakerdeck
PRO
3
900
The Invisible Side of Design
smashingmag
290
48k
Designing with Data
zakiwarfel
91
4k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
181
15k
The Cult of Friendly URLs
andyhume
68
4.8k
Faster Mobile Websites
deanohume
294
28k
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݄த