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

02886e95c50822b9aa2552da1e518491?s=47 Takayuki
November 14, 2018

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

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

02886e95c50822b9aa2552da1e518491?s=128

Takayuki

November 14, 2018
Tweet

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݄த