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
1.9k
Laravel Activity Logを使って簡単に変更履歴機能を実装しよう
bumptakayuki
0
110
vue.jsで漢字のふりがな自動変換を実装した話
bumptakayuki
1
270
Nuxt.jsのmiddlewareを使って権限チェックしたらスパゲティになってしまった話
bumptakayuki
1
160
LaravelのFat Controllerをどうリファクタしていくか
bumptakayuki
0
210
LaravelとNuxt.jsで保守性を高める構成を考えてみた
bumptakayuki
1
720
沖縄のスタートアップ企業が痛みを伴いながら、2つ目の自社プロダクト開発への挑戦
bumptakayuki
0
300
ベトナムや東京、日本各地を回って沖縄を選んだキャリア
bumptakayuki
0
570
炎上はクリスマスと共に来る
bumptakayuki
1
830
Other Decks in Technology
See All in Technology
⚡Lightdashを試してみた
k_data_analyst
0
220
新規ゲームのリリース(開発)前からのSRE活動
tmkoikee
1
520
LINEのData Platform室が実践する大規模分散環境のCapacity Planning
line_developers
PRO
0
750
プロダクション環境の信頼性を損ねず観測する技術
egmc
4
790
LINEポイントクラブにおける PerlからKotlinへの移行を振り返る / The migration from Perl to Kotlin at LINE Point Club
line_developers
PRO
0
140
testing journey / テストが嫌いでIT業界を離れるはずだったのに〜テスト嫌いが現場で品質改善を実施するまでの物語〜
aki_moon
1
410
[SRE NEXT 2022]組織に対してSREを適用するとはどういうことか
srenext
0
460
ZOZOTOWNのProduction Readiness Checklistと信頼性向上の取り組み / Improvement the reliability of ZOZOTOWN with Production Readiness Checklist
akitok_
5
2k
プロダクトグロースと技術のベースアップを両立させるRettyのアプリ開発スタイル / Achieve Product Growth and Tech Update
imaizume
1
300
SRE_チーム立ち上げから1年_気づいたら_SRE_っぽくない仕事まで貢献しちゃってる説
bitkey
PRO
0
2.6k
LINE WORKS API 2.0について
mmclsntr
0
140
キャッチアップ Android 13 / Catch up Android 13
yanzm
2
1.2k
Featured
See All Featured
Atom: Resistance is Futile
akmur
255
20k
Happy Clients
brianwarren
89
5.5k
Ruby is Unlike a Banana
tanoku
91
9.2k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
5 minutes of I Can Smell Your CMS
philhawksworth
196
18k
VelocityConf: Rendering Performance Case Studies
addyosmani
316
22k
Raft: Consensus for Rubyists
vanstee
126
5.4k
Product Roadmaps are Hard
iamctodd
34
6.1k
The MySQL Ecosystem @ GitHub 2015
samlambert
238
11k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
GitHub's CSS Performance
jonrohan
1020
410k
Making the Leap to Tech Lead
cromwellryan
113
6.9k
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݄த