使用するバージョン
laravel/framework : 8.65
tymon/jwt-auth : 1.0

Laravelの初期設定とかはこちらの記事も参考にしてください。
DBにusersテーブルがありデータがはいっているものとします。

Laravel8でシンプルなCMSを作るチュートリアル[2020年版]

ちなみにほぼ公式ドキュメントの通り進めます。

jwt-auth

インストールと初期設定

ライブラリのインストール

コンポーザーでインストールしましょう。

$ composer require tymon/jwt-auth

設定ファイルの書き出し

JWTに必要な設定ファイルのベースを書き出します。

$ php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

config/jwt.phpにファイルが生成されます。

シークレットキーの生成

$ php artisan jwt:secret

.envJWT_SECRETという項目が追加されているのを確認してください。

ユーザーモデルの修正

ユーザーモデルにJWTSubjectをimplementsして、getJWTIdentifiergetJWTCustomClaimsメソッドを追加します。

app/Models/User.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Tymon\JWTAuth\Contracts\JWTSubject;
class User extends Authenticatable implements JWTSubject
{
use HasFactory, Notifiable;
// ...
/**
* Get the identifier that will be stored in the subject claim of the JWT.
*
* @return mixed
*/
public function getJWTIdentifier()
{
return $this->getKey();
}
/**
* Return a key value array, containing any custom claims to be added to the JWT.
*
* @return array
*/
public function getJWTCustomClaims()
{
return [];
}
}

Authコンフィグの設定

guardsapiの部分を追加します。
基本はセッション認証にしたいのでdefaultsは変更しません。

config/auth.php
'guards' => [
'web' => [
'driver' => 'session',
'provider' => 'users',
],
'api' => [
'driver' => 'jwt',
'provider' => 'users',
],
],

ルーターの設定

API用のルーターを編集してAuthControllerにアクセスできるようにします。

routes/api.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\Api\AuthController;
Route::prefix('auth')->group(function () {
Route::post('login', [AuthController::class, 'login']);
Route::middleware('api')->group(function () {
Route::post('logout', [AuthController::class, 'logout']);
Route::post('refresh', [AuthController::class, 'refresh']);
Route::post('me', [AuthController::class, 'me']);
});
});

コントローラーの作成

artisanでコントローラーの作成

$ php artisan make:controller Api/AuthController

次のように編集します。

app/Http/Controllers/Api/AuthController.php
<?php
namespace App\Http\Controllers\Api;
use App\Http\Controllers\Controller;
class AuthController extends Controller
{
/**
* Get a JWT via given credentials.
*
* @return \Illuminate\Http\JsonResponse
*/
public function login()
{
$credentials = request(['email', 'password']);
if (! $token = auth('api')->attempt($credentials)) {
return response()->json(['error' => 'Unauthorized'], 401);
}
return $this->respondWithToken($token);
}
/**
* Get the authenticated User.
*
* @return \Illuminate\Http\JsonResponse
*/
public function me()
{
return response()->json(auth('api')->user());
}
/**
* Log the user out (Invalidate the token).
*
* @return \Illuminate\Http\JsonResponse
*/
public function logout()
{
auth('api')->logout();
return response()->json(['message' => 'Successfully logged out']);
}
/**
* Refresh a token.
*
* @return \Illuminate\Http\JsonResponse
*/
public function refresh()
{
return $this->respondWithToken(auth('api')->refresh());
}
/**
* Get the token array structure.
*
* @param string $token
*
* @return \Illuminate\Http\JsonResponse
*/
protected function respondWithToken($token)
{
return response()->json([
'access_token' => $token,
'token_type' => 'bearer',
'expires_in' => auth('api')->factory()->getTTL() * 60
]);
}
}

authヘルパーは引数をしない場合config/auth.phpdefaultsで設定したguardが実行されます。
引数を指定することでguardsを変更することができます。
api guardを使用する場合は引数にapiとします。
ヘルパーではなくファサードを使用する場合はAuth::guard('api')のようにします。

JavaScriptでAPI認証してみる

JavaScriptでAPIログインしてトークンを取得してみましょう。
ここでは、Laravelのビルトインサーバーをlocalhost:8000で立ち上げているものとします。

<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
axios
.post('http://localhost:8000/api/auth/login', {
email: 'user1@example.com',
password: '123456789'
})
.then(function (response) {
console.log(response.data);
});
</script>

レスポンスはaccess_token,expires_in,token_typeが返ると思います。
Bearerに取得したaccess_tokenの値を設定することで認証が必要なAPIにアクセスすることができます。

トークンを使用してAPIから情報を取得

作成したサンプルにログインしたユーザーの情報を取得するmeというAPIがあるのでこれを実行してみましょう。

axios
.get('http://localhost:8000/api/auth/me', {
headers: {
Authorization: 'Bearer [取得したトークン]',
}
})
.then(function (response) {
console.log(response.data);
});

[取得したトークン]の部分を先ほど取得したトークンに置き換えてください。
これでユーザー情報を取得することができたと思います。