Laravel/Vue.js勉強会#4

1. LaravelとNuxt.jsを業務で取り入れる際
に得た知見
株式会社ITプロパートナーズ
戎島功
森山智哉
2018/04/25 Laravel/Vue.js勉強会#4
1

2. 自己紹介
森山智哉
株式会社ITプロパートナーズ
エンジニア
Laravel / Vue / Nuxt /
Twitter: @frostndays
2

3. 自己紹介
戎島功（えびすじまいさお）
株式会社ITプロパートナーズ
エンジニア
Laravel / Vue.js / Nuxt.js
Twitter: @isao_x
3

4. 話すこと
1. プロジェクト概要
2. 認証方法について
3. Nuxt.js 環境設定の読み込み
4. axiosのラッパー
5. 開発の際に役立った便利ツール
4

5. ・株式会社ITプロパートナーズで新規開発中
・toC Webサービス
・大規模なSNSみたいなもの
１−１ プロジェクト概要
5

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サーバー / 管理画面フロント側サーバー

8. ・Laravel Passportとは
APIでログイン認証を行うためのLaravelのライブラリ
・使い方
laravelPassportで使用するTableを生成
認証用のルーティングが自動生成される
２−１ 認証方法について
8

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' => 'Barryvdh¥Cors¥HandleCors::class'], function() {
$callback = null;
$options = [
'prefix' => 'api/oauth',
'namespace' => '¥Laravel¥Passport¥Http¥Controllers',
];
Passport::routes($callback, $options);
});
}
11

12. ２−５ Laravel Passport トークン有効期限
12
・有効期限チェック機能の追加
使用するアクセストークンに有効期限を設定
。。が有効期限をチェックして期限切れかどうかを判定する機能は無い
ため

13. ２−５ Laravel Passport トークン有効期限
13
・有効期限チェック機能の追加
使用するアクセストークンに有効期限を設定
。。が有効期限をチェックして期限切れかどうかを判定する機能は無い
ため
有効期限をチェックする機能追加
有効期限が切れていていたらリフレッシュトークンを使用

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

23. ・PHPのコーディング規約はPSR-2を採用
https://www.php-fig.org/psr/psr-2/
・PHPのLintツールはPHP_CodeSnifferを採用
https://github.com/squizlabs/PHP_CodeSniffer
５−２ 開発の際に役立った便利ツールなど
23

24. ５−３ 開発の際に役立った便利ツールなど
24
・ES6のコーディング規約はeslintのeslint-config-airbnbがベース
https://github.com/airbnb/javascript/tree/master/packages/eslint-config-airbnb
・vue.jsのコーディング規約はvue.js公式のスタイルガイドがベース
https://jp.vuejs.org/v2/style-guide/index.html
・ES6のlintツールはeslintを採用
https://github.com/eslint/eslint

25. LaravelとVue.js(Nuxt.js)を使ってみて
25

26. LaravelとVue.js(Nuxt.js)を使ってみて
よかった！！
26

27. おしまい
ですが、、、
27

28. おしまい
ですが、、、
ITプロパートナーズではLaravel、Vue.jsで開発したいエンジ
ニアを募集しています。
28

29. おしまい
ですが、、、
ITプロパートナーズではLaravel、Vue.jsで開発したいエンジ
ニアを募集しています。
ご興味のある方は是非お声掛けください！！
29

30. おしまい
ご清聴ありがとうございました！！
30