Laravel Sanctumを使ってSPA認証を実装する

Laravel Sanctumとは

Laravel Sanctumは、SPA（シングルページアプリケーション）、モバイルアプリケーション、およびシンプルなトークン・ベースのAPI向けの簡単な認証システムを提供します。

設定方法

インストール

Composerを使ってインストールします。

composer require laravel/sanctum

次に下記コマンドを実行します。これにより、vendor/laravel/sanctum/database/migrationsの中身がdatabase/migrationsにコ、vendor/laravel/sanctum/config/sanctum.phpがconfig/sanctum.phpにコピーされます。

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

今回「database\migrations\2019_12_14_000001_create_personal_access_tokens_table.php」は使用しないため、削除します。

rm database/migrations/2019_12_14_000001_create_personal_access_tokens_table.php

続いて、apiミドルウェアを追加します。EnsureFrontendRequestsAreStatefulがコメントアウトされているので、コメントを外します。

• SPAからの受信リクエストがLaravelのセッションクッキーを使用して認証できるようになる
• サードパーティまたはモバイルアプリケーションからのリクエストがAPIトークンを使用して認証できるようにする役割を果たす

app\Http\Kernel.php

'api' => [
-   // \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, 
+   \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class, 
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class
],

これでSanctumのインストールは完了です。続いて、SPA認証の設定をしていきます

SPA認証の設定方法

ファーストパーティドメインの設定

まず、SPAがリクエストを行うドメインを設定します。これらのドメインは、sanctum設定ファイルのstateful設定オプションを使用します。この設定は、APIにリクエストを行うときにLaravelセッションクッキーを使用して「ステートフル」な認証を維持するドメインを指定します。
config('sanctum.stateful')を設定する必要があるので各環境に合わせて .envにドメインとポート番号を設定する。ローカル環境では設定は不要だが、設定する場合はSANCTUM_STATEFUL_DOMAINS=localhostのように設定する。

.env

SANCTUM_STATEFUL_DOMAINS=localhost:3000

CORS

レスポンスヘッダのAccess-Control-Allow-Credentialsがtrueを返すように設定する

config\cors.php

- 'supports_credentials' => false,
+ 'supports_credentials' => true,

実際にルートの保護をしてみよう

ルートを保護するには、routes/api.phpファイル内のAPIルートにsanctum認証ガードを指定する必要があります。このガードは、受信リクエストがSPAからのステートフル認証済みリクエストとして認証されるか、リクエストがサードパーティからのものである場合は有効なAPIトークンヘッダを含むことを保証します。

routes\api.php

use Illuminate\Http\Request;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

まとめ

以上で、Laravel SanctumのSPA認証の設定方法の解説は終わりです。この続きとしては、Laravel Fortifyを追加で導入して、ユーザー新規作成や、パスワード更新などのルートを追加するなどして使用します。今回は割愛しますが、また折を見て記事にしたいと思います