昨日 14:56
バックエンド laravel フロントエンドNextJS クッキーを使って認証 まずはLaravel11 sctumuで認証構築 Postmanで確認したい
ChatGPT
はい。
Laravel 11をバックエンド、Next.jsをフロントエンドにして、Sanctumの「Cookie + Session」方式で認証する構成で進めるのがよいです。
まずは Next.jsはまだ触らず、Laravel 11 + Sanctumを構築してPostmanで完全に確認しましょう。
Laravel公式でも、Next.jsのようなSPAにはSanctumのSPA認証を使い、APIトークンではなくLaravelのセッションCookieを使う方式が推奨されています。
今回の構成はこうします。
Next.js
│
│ Cookie
▼
Laravel 11
│
├─ Sanctum
├─ Session
├─ CSRF
└─ MySQL
最終的には、
POST /sanctum/csrf-cookie
↓
POST /api/login
↓
LaravelがセッションCookie発行
↓
GET /api/user
↓
ログインユーザー取得
という流れになります。
- Laravel 11プロジェクト
まだ作っていない場合、
composer create-project laravel/laravel laravel-backend “^11.0”
cd laravel-backend
Laravel 11ではSanctumを
php artisan install:api
で導入できます。公式ドキュメントでもこの方法が案内されています。
実行します。
php artisan install:api
途中で質問が出たら、基本的にはデフォルトで進めてください。
その後、
php artisan migrate
- データベース設定
.env
例えばMySQLなら、
APP_NAME=Laravel
APP_ENV=local
APP_KEY=
APP_DEBUG=true
APP_URL=http://localhost:8000
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=next_laravel
DB_USERNAME=root
DB_PASSWORD=
データベースを作成します。
CREATE DATABASE next_laravel;
そして、
php artisan migrate
- Userモデル確認
app/Models/User.php
Laravel 11 + Sanctumなら、最終的にはこのような形にしておけばOKです。
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Foundation\Auth\User as Authenticatable;
use Illuminate\Notifications\Notifiable;
use Laravel\Sanctum\HasApiTokens;
class User extends Authenticatable
{
use HasApiTokens, HasFactory, Notifiable;
protected $fillable = [
'name',
'email',
'password',
];
protected $hidden = [
'password',
'remember_token',
];
protected function casts(): array
{
return [
'email_verified_at' => 'datetime',
'password' => 'hashed',
];
}}
ただし、今回のCookie認証ではSanctumのAPIトークンを発行するわけではありません。
ここは重要です。
❌ localStorageにSanctum tokenを保存
❌ Authorization: Bearer xxx
⭕ Laravel Session Cookie
⭕ XSRF-TOKEN
SanctumのSPA認証はCookieベースのセッション認証です。
- Sanctumのstateful設定
Laravel 11ではここが非常に重要です。
bootstrap/app.php
確認してください。
<?php
use Illuminate\Foundation\Application;
use Illuminate\Foundation\Configuration\Exceptions;
use Illuminate\Foundation\Configuration\Middleware;
return Application::configure(basePath: dirname(DIR))
->withRouting(
web: DIR.’/../routes/web.php’,
api: DIR.’/../routes/api.php’,
commands: DIR.’/../routes/console.php’,
health: ‘/up’,
)
->withMiddleware(function (Middleware $middleware) {
$middleware->statefulApi();
})
->withExceptions(function (Exceptions $exceptions) {
//
})->create();特に、
$middleware->statefulApi();
が重要です。
Laravel公式でも、SPAからのCookie認証を有効にするために statefulApi() を使用するよう説明されています。
- Sanctumのstateful domains
.envに、
SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000
を設定します。
ただし、今回Postmanから確認する段階ではlocalhost:8000からアクセスするので、まずはPostman確認を優先した設定にしても構いません。
最終的にNext.jsを
http://localhost:3000
Laravelを
http://localhost:8000
で動かすなら、
SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000
としておきます。
ポート番号まで含める必要があります。
- CORS設定
Laravel 11では config/cors.php が最初から存在しない場合があります。
その場合、
php artisan config:publish cors
を実行します。
Laravel公式もSPAでCORSをカスタマイズする場合、このコマンドを使用するよう案内しています。
config/cors.php
<?php
return [
'paths' => [
'api/*',
'sanctum/csrf-cookie',
],
'allowed_methods' => ['*'],
'allowed_origins' => [
'http://localhost:3000',
],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,];
特に、
‘supports_credentials’ => true,
が重要です。
- Session設定
.env
SESSION_DRIVER=file
SESSION_LIFETIME=120
SESSION_DOMAIN=null
SESSION_SECURE_COOKIE=false
SESSION_SAME_SITE=lax
ローカル環境ではこれで始めましょう。
まだ
SESSION_DOMAIN=.example.com
などにはしません。
- Login APIを作る
今回はLaravel側にシンプルなAPIを作ります。
まずController。
php artisan make:controller AuthController
app/Http/Controllers/AuthController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;
use Illuminate\Validation\ValidationException;
class AuthController extends Controller
{
public function login(Request $request)
{
$credentials = $request->validate([
‘email’ => [‘required’, ‘email’],
‘password’ => [‘required’],
]);
if (!Auth::attempt($credentials)) {
throw ValidationException::withMessages([
'email' => ['メールアドレスまたはパスワードが正しくありません。'],
]);
}
$request->session()->regenerate();
return response()->json([
'message' => 'ログインしました',
'user' => $request->user(),
]);
}
public function user(Request $request)
{
return response()->json(
$request->user()
);- APIルート
routes/api.php
<?php
use App\Http\Controllers\AuthController;
use Illuminate\Support\Facades\Route;
Route::post(‘/login’, [AuthController::class, ‘login’]);
Route::middleware(‘auth:sanctum’)->group(function () {
Route::get('/user', [AuthController::class, 'user']);
Route::post('/logout', [AuthController::class, 'logout']);});
これで、
POST /api/login
GET /api/user
POST /api/logout
ができます。
- テストユーザーを作る
まず、
php artisan tinker
そして、
\App\Models\User::create([
‘name’ => ‘Test User’,
‘email’ => ‘test@example.com’,
‘password’ => ‘password123’,
]);
終了。
exit
- Laravel起動
php artisan serve
通常、
http://127.0.0.1:8000
または
http://localhost:8000
になります。
- ここからPostman
ここが今回の重要部分です。
Step 1 CSRF Cookie取得
Postmanで、
GET
http://localhost:8000/sanctum/csrf-cookie
を実行。
Bodyはありません。
Headerに、
Accept: application/json
を入れておきます。
成功するとレスポンスはほぼ空ですが、Cookiesを見ると
XSRF-TOKEN
laravel_session
が設定されます。
Laravel公式でも、SPA認証では最初に /sanctum/csrf-cookie を呼び、XSRF-TOKEN Cookieを取得してからログインする流れになっています。
- PostmanでCookieを確認
PostmanのURL欄付近にある
Cookies
をクリックしてください。
例えば、
localhost
に、
XSRF-TOKEN
laravel_session
が存在することを確認します。
ここまで来ればかなり重要なところまで成功しています。
- Login
次に、
POST
http://localhost:8000/api/login
Header：
Accept: application/json
Content-Type: application/json
Body → raw → JSON
{
“email”: “test@example.com”,
“password”: “password123”
}
ただし、ここで一つ注意があります。
CSRF対策のため、X-XSRF-TOKENも送る必要があります。
Postmanでは、取得した XSRF-TOKEN Cookieの値をURLデコードして、
X-XSRF-TOKEN
Headerに設定します。
例えば、
X-XSRF-TOKEN:
です。
ブラウザ＋Axiosの場合はAxiosが自動的にこの処理を行えますが、Postmanでは自分で確認する必要があります。Laravel公式もこの仕組みを説明しています。
- Login成功
成功すれば、
{
“message”: “ログインしました”,
“user”: {
“id”: 1,
“name”: “Test User”,
“email”: “test@example.com”
}
}
のようになります。
さらにPostmanのCookieを見ると、
laravel_session
が更新されているはずです。
この laravel_session が今回の認証の本体です。
- 認証確認
次に、
GET
http://localhost:8000/api/user
Header：
Accept: application/json
Cookieは先ほどの
laravel_session
を使います。
成功すれば、
{
“id”: 1,
“name”: “Test User”,
“email”: “test@example.com”,
…
}
が返ります。
これが、
「CookieによるLaravel Sanctum認証が成功した」
という確認になります。
Laravel公式の保護されたAPIも、auth:sanctum を付けた /user に対して $request->user() を返す形になっています。
- Logout
最後に、
POST
http://localhost:8000/api/logout
を実行。
成功：
{
“message”: “ログアウトしました”
}
その後もう一度、
GET
http://localhost:8000/api/user
すると、
401 Unauthorized
になることを確認します。
今回の確認ポイント
Postmanでは、この順番でテストしてください。
① GET
/sanctum/csrf-cookie
↓
XSRF-TOKEN
laravel_session
↓
② POST
/api/login
↓
Cookieによるログイン
↓
③ GET
/api/user
↓
ユーザー情報取得
↓
④ POST
/api/logout
↓
⑤ GET
/api/user
↓
401 Unauthorized
ここまで成功したら、Laravel側のCookie認証は完成です。
次の段階
