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

by Takayuki

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

1 ࣗݾ঺հ

Slide 4

Slide 4 text

4 ࣗݾ঺հ ◆໊લ ླ໦ ޹೭(Suzuki Takayuki) ◆ࣗݾ঺հ ɾ1990೥ɺਆಸ઒ݝੜ·Εɻ ɾࣾձਓʹͳ͔ͬͯΒɺϓϩάϥϛϯάΛ࢝ΊΔɻ ɾ2015೥ʹϑϧεϐʔυʹೖࣾ͠ɺ2017೥ʹϑϦʔϥϯεΛ ΍ͬͨޙʹ2017೥11݄ʹԭೄͰىۀɻ ◆Twitter @kanbo0605 ◆εΩϧ ɾPHP, Symfony2,CakePHP3,Laravel5, ɾJavaScript, backbone.js,Angular4,Vue.js,Nuxt.js

Slide 5

Slide 5 text

2 JWTೝূͱ͸

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

9 JWTͱ͸ ■JWT࢖༻ͷϝϦοτ JSON΢ΣϒτʔΫϯͷ࢖༻Λਪ঑͢Δ͍͔ͭ͘ͷཧ༝͸ҎԼͷ௨ΓͰ͋Δɻ ɾURLͷύϥϝʔλʔ΍ϔομʔͱͯ͠࢖͑Δ ɾਫฏͷεέʔϧ͕༰қ ɾσόοάͱ؅ཧ͕؆୯ ɾτϥϑΟοΫର͢Δෛ୲͕গͳ͍ ɾຊདྷͷRESTαʔϏεΛ࡞੒Մೳ ɾϏϧτΠϯࣜͷ༗ޮظݶػೳ͕͍͍ͭͯΔ ɾJWT͕ಠཱܕͰ͋Δ͜ͱ https://camp.isaax.io/ja/tips-ja/jwt-json-web-token

Slide 10

Slide 10 text

3 LaravelͰͷ࢖͍ํ

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

1 4 ᶃೝূػೳΛ࡞੒ $ php artisan make:auth $ php artisan migrate ԼهͷίϚϯυΛ࣮ߦ͠ɺೝূػೳΛ࡞੒͢Δɻ ͜ΕͰ؆୯ʹೝূػೳΛ࡞੒Ͱ͖·͢ɻ

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

1 6 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ

Slide 17

Slide 17 text

1 7 ᶅEmployeeϞσϧΛमਖ਼ EmployeeϞσϧΛjwt-authʹରԠͤ͞ΔͨΊɺฤू͠·͢ɻ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

2 0 ᶇApiControllerΛੜ੒

Slide 21

Slide 21 text

2 1 ᶈroutes/api.phpΛฤू

Slide 22

Slide 22 text

2 2 ࣮ࡍʹಈ͔͢

Slide 23

Slide 23 text

2 3 ࣮ࡍʹಈ͔͢

Slide 24

Slide 24 text

2 4 ࣮ࡍʹಈ͔͢

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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