Laravelで簡単にSPA Webアプリ 作成！JWT認証導入

Transcript

1. LaravelͰ؆୯ʹSPA WebΞϓϦ ࡞੒ʂJWTೝূಋೖ LaravelͰ؆୯ʹSPA WebΞϓϦ ࡞੒ʂJWTೝূಋೖ גࣜձࣾϦϏϧυ / @kanbo0605

2. 3 LaravelͰͷ࢖͍ํ Agenda 2 JWTೝূͱ͸ 1 ࣗݾ঺հ

3. 1 ࣗݾ঺հ

4. 4 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥϯεΛ

   ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆Twitter @kanbo0605 ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4,Vue.js,Nuxt.js

5. 2 JWTೝূͱ͸

6. 6 SPAͷWebΞϓϦͰ ϩάΠϯػೳΛ࡞Δͷେม͡Ό ͳ͍Ͱ͔͢ʁʁ

7. 7 JWTͱ͸ JWTʢδϣοτʣͱ͸ JSON Web Token ͷུͰɺిࢠॺ໊෇͖ͷ URL-safeͳJSONΛ࢖ͬͨೝূํ ࣜͰ͢ɻ Ұ൪ͷେ͖͍ར఺͸ిࢠॺ໊͕ͭ

   ͍͍ͯΔͷͰɺվ͟Μ͞Εͳ͍ࣄ ͕େ͖͍Ͱ͢ɻ

8. 8 JWTͱ͸ [ೝূϑϩʔͷ࢓૊Έ] ᶃΫϥΠΞϯτ͸ɺೝূ৘ใ(ϩάΠϯIDͱύεϫʔυ)Λૹ৴͢Δɻ ᶄαʔό͸ೝূ৘ใΛऔಘͯ͠user_idͱexp(༗ޮظݶ)ΛؚΉɺJSONΛൿີ伴 Ͱ҉߸Խͯ͠JWTͱͯ͠ฦ٫͢Δɻ ᶅΫϥΠΞϯτ͸ड͚औͬͨJWTΛೝূϦΫΤετͱͯ͠ѻͬͯɺϦιʔεʹΞ ΫηεΛߦ͏ɻ

9. 9 JWTͱ͸ ▪JWT࢖༻ͷϝϦοτ JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ

   ɾJWT͕ಠཱܕͰ͋Δ͜ͱ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token

10. 3 LaravelͰͷ࢖͍ํ

11. ϑϩϯτΤϯυ ϑϩϯτΤϯυͷϩάΠϯॲཧϑϩʔ 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Λઃఆ

12. 1 2 ࣮૷͢Δ΋ͷ ɾ/api/login ϢʔβʔͱύεϫʔυΛૹΔͱτʔΫϯ͕ൃߦ͞ΕΔɻ ɾ/api/me Ϣʔβʔͷ৘ใΛฦ͢ɻτʔΫϯ͕ແ͍ͱΞΫηεͰ͖ͳ͍ɻ •

13. 1 3 खॱ ᶃೝূػೳΛ࡞੒ ᶄcomposerͰjwt-authΛΠϯετʔϧ ᶅEmployeeϞσϧΛमਖ਼ ᶆguardΛमਖ਼ ᶇApiControllerΛੜ੒ ᶈroutes/api.phpΛฤू

14. 1 4 ᶃೝূػೳΛ࡞੒ $ php artisan make:auth $ php artisan

    migrate ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞੒͢Δɻ ͜ΕͰ؆୯ʹೝূػೳΛ࡞੒Ͱ͖·͢ɻ

15. 1 5 ᶄcomposerͰjwt-authΛΠϯετʔϧ jwt-authͷॳظઃఆΛߦ͍·͢ɻ jwt-authΛLaravelϓϩδΣΫτʹΠϯετʔϧ͠·͢ɻ config/jwt.php͕ੜ੒͞Ε·͢ɻ ࠷ޙʹൿີ伴Λੜ੒

16. 1 6 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ

17. 1 7 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ

18. 1 8 ᶆguardΛमਖ਼(config/auth.php) guard͸ೝূΛ؅ཧ͢Δ࢓૊ΈͰɺσϑΥϧτͰ͸ webͱapi͕͋Γ·͢ɻ
 web͸html͔ΒͷϩάΠϯΛ؅ཧ͍ͯ͠·͢ɻ
 Ұํɺapi͸໊લͷ௨ΓɺWebAPIͷϩάΠϯͰ͢ɻ jwt-authΛ࢖͏ͷͰapiΛjwtʹม͑·͢ɻ config/auth.phpΛฤू

19. 1 9 ᶇApiControllerΛੜ੒ ࣍ʹAPIͷίϯτϩʔϥʔΛ࡞੒͠·͢ɻ app/Http/Controllers/ApiController.php͕ੜ੒͞Ε·͢ɻ

20. 2 0 ᶇApiControllerΛੜ੒

21. 2 1 ᶈroutes/api.phpΛฤू

22. 2 2 ࣮ࡍʹಈ͔͢

23. 2 3 ࣮ࡍʹಈ͔͢

24. 2 4 ࣮ࡍʹಈ͔͢

25. 2 5 ࣮ࡍʹಈ͔͢ curlͰࢼͯ͠Έ·͢ɻ emailͱpassword͸্ͷϢʔβʔΛొ࿥ͨ͠ͱ͖ͷΛࢦఆ͠·͢ɻ ͦͯ͠τʔΫϯΛ࢖ͬͯೝূ͕ඞཁͳurlʹΞΫηεͯ͠Έ·͢ɻ AuthorizationϔομʔʹBearer: <token>Λ෇͚ͯૹ৴͠·͢ɻ σʔλ͕ฦ͖ͬͯ·ͨ͠ɻ

26. 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΢ΣϒτʔΫϯ

27. 2 7 ࠂ஌ phpΧϯϑΝϨϯεԭೄ։࠵͠·͢ʂʂʂ 2019೥10݄த