Recommended
More Related Content
What's hot
Similar to LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
Similar to LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25 (20)
LaravelとNuxt.jsを業務で取り入れる際に得た知見 Laravel/Vue.js勉強会#4 2018/04/25
- 2. 自己紹介 森山智哉 エンジニア Laravel / Vue / Nuxt / Twitter: @frostndays 2
- 3. 自己紹介 戎島功（えびすじまいさお） エンジニア Laravel / Vue.js / Nuxt.js Twitter: @isao_x 3
- 4. 話すこと 1. プロジェクト概要 2. 認証方法について 3. Nuxt.js 環境設定の読み込み 4. axiosのラッパー 5. 開発の際に役立った便利ツール 4
- 6. １−２ 技術スタック ・MySQL ・Nginx ・AWS ・AmazonLinux ・Docker ・Git ・PHP 7.1.7 ・Laravel 5.5 ・HTML 5 ・CSS 3/SCSS ・JavaScript/ECMAScript2015(ES6) ・Vue.js 2.9.3 ・Nuxt.js 1.0.0 6
- 7. １−３ サーバー構成 ユーザー 管理者 7 APIサーバー / 管理画面フロント側サーバー
- 9. ２−２ Laravel Passportでの認証フロー ③ AccessTokenを渡す ① ID/password ④ ヘッダーにAccessTokenをセット ⑤ 認証が必要なぺージにアクセス ② AccessTokenを発行 9
- 10. ２−３ Laravel Passport facebook認証 ・使用したライブラリ danjdewhurst/laravel-passport-facebook-login ・使い方 laravelPassportと同様のエンドポイントを使用する ID/passの代わりにFacebookのアクセストークンを POSTする userテーブルにはfacebookID用のカラムを用意する 10
- 11. ２−４ Laravel Passport エンドポイント変更 デフォルトのエンドポイント oauth/token を api/oauth/token に変更 app/Providers/AuthServiceProvider.php public function boot() { $this->registerPolicies(); Route::group([ 'middleware' => 'BarryvdhCorsHandleCors::class'], function() { $callback = null; $options = [ 'prefix' => 'api/oauth', 'namespace' => 'LaravelPassportHttpControllers', ]; Passport::routes($callback, $options); }); } 11
- 14. ２−５ Laravel Passport トークン有効期限 14 public function checkToken(ResourceServer $server, Request $request) { // ヘッダーのアクセストークンを取得 $psr = (new DiactorosFactory)->createRequest($request); $psr = $server->validateAuthenticatedRequest($psr); $reqToken = $psr->getAttribute('oauth_access_token_id'); // 有効期限が切れていないかチェック $accessToken = OauthAccessToken::where('id', $reqToken) ->where('expires_at', '>', Carbon::now()) ->first(); }
- 15. nuxt.config.js module.exports = { env: { baseUrl: process.env.BASE_URL || 'http://localhost:3000' } } ３−１ Nuxt.js 環境設定の読み込み 15 通常、Nuxt.jsでは、apiサーバーのurlとか、laravel passportで生成したsecret keyと かっていう環境固有の定数をnuxt.config.jsで定義します。 こんな感じです↓（Nuxt.js公式ドキュメントより引用）
- 16. ３−２ Nuxt.js 環境設定の読み込み 16 env.js exports.env = { BASE_URL: 'http://localhost:3000', CLIENT_ID: 2, PASSPORT_SECRET: 'dummyMWN3ojUoBUWww5o3w5TrviGbW8BI9Vdummy', }; 今回、Laravelと同じようにenvファイルを用意してそれで定数を管理したいと思ったの で、env.jsというファイルを作って、そこで環境固有の定数を定義しました。 こんな感じです↓
- 17. nuxt.config.js const env = require('./env.js'); module.exports = Object.assign(env, { … } env.jsをnuxt.config.jsでrequireする ３−３ Nuxt.js 環境設定の読み込み 17
- 18. ４−１ axiosのラッパー services/http.js import axios from 'axios'; const axiosBase = axios.create({ baseURL: '', timeout: 10000, headers: { 'Access-Control-Allow-Origin': '*', 'X-Requested-With': 'XMLHttpRequest', }, }); 18
- 19. ４−２ axiosのラッパー services/http.js get(url, config = {}) { return axiosBase.get(url, config); }, post(url, data = {}, config = {}) { return axiosBase.post(url, data, config); }, delete(url, config = {}) { return axiosBase.delete(url, config); }, 19
- 20. services/http.js axiosBase.interceptors.request.use((config) => { // 特定のURL指定が無い場合のみ、 server/client 判定 if (!config.baseURL) { config.baseURL = process.server ? process.env.API_URL_SERVER : process.env.API_URL_CLIENT; } return config; }, error => Promise.reject(error)); ４−３ axiosのラッパー 20
- 21. ４−４ axiosのラッパー services/http.js setAuthorizationToken(token) { if (token) { axiosBase.defaults.headers.common.authorization = `Bearer ${token}`; } else { delete axiosBase.defaults.headers.common.authorization; } }, 21
- 22. ・Clockwork（ブラウザでのLaravelのデバッグに役立つchrome拡張） https://chrome.google.com/webstore/detail/clockwork/dmggabnehkmmfmdffgajcflpdjlnoemp ・sequel-pro-laravel-export（migrationを自動生成するsequelPro拡張） https://github.com/cviebrock/sequel-pro-laravel-export ・SQL to Laravel Builder（SQLからクエリビルダーへ変換するWebサービス） http://www.midnightcowboycoder.com/ ・Vue.js devtools（ブラウザでのVue.jsのデバッグに役立つchrome拡張） https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=ja ５−１ 開発の際に役立った便利ツールなど 22
- 27. おしまい ですが、、、 27