monteecristoo’s blog

https://twitter.com/irakaarozo

Authentication Laravel with Vue.js

f:id:monteecristoo:20170819184517j:plain9

Backend

@UserController.php

/*--------------------------------------
| For Frontend Authentication |
---------------------------------------*/
public function signup(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email|unique:users',
'password' => 'required'
]);

$user = new User([
'name' => $request->input('name'),
'email' => $request->input('email'),
'password' => bcrypt($request->input('password'))
]);
$user->save();
return response()->json([
'message' => 'Successfully created user!'
], 201);
}
}

@api.php

/*---------------------------------------------
| For Authentication from Frontend
----------------------------------------------*/
Route::post('/user', [
'users' => 'UserController@signup'
]);

 

Frontend

http requestのheaderには、

Content-Type applicatiob/json  →→ laravel側にjsonリクエストとして認識させる

X-Requested-With XMLHttpRequest  →→ ajaxリクエストであることの表明

10

 

tokenの管理(セットアップ)

  • jwt-authを使用

composer.json

"require": {
    "tymon/jwt-auth": "0.5.*"
}

を加筆

composer update  →→ jwt-authをインストール

  • Service Provider に jwt-auth を登録

@config/app.php

'providers' => [

/*
* Package Service Providers...
*/

Tymon\JWTAuth\Providers\JWTAuthServiceProvider::class,

]

を加筆

  • aliases に jwt-auth の facade を追加

@config/app.php

'aliases' => [

'JWTAuth' => Tymon\JWTAuth\Facades\JWTAuth::class,

を加筆

  • config の編集を発効
php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\JWTAuthServiceProvider"

jwt.php が生成される( jwt-auth の config ファイル)

  •  JWT Authentication Secret key の生成
php artisan jwt:generate

jwt.php

'secret' => env('JWT_SECRET', 'hoge'),

が加筆される

 

token の管理(ロジック)

public function Signin(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|email',
'password' => 'required'
]);
$credentials = $request->only('email', 'password');
try {
  if(!$token = JWTAuth::attempt($credentials))  /* credentialのチェック */
  {
    return response()->json([
      'error' => 'Invalid Credentials!'
    ], 401);
  }
} catch(JWTException $e) {
  return response()->json([
    'error' => 'Could not create token!'
  , 500]);
}
return response()->json([
  'token' => $token  /* tokenの発行 */
], 200);
}

11