テスト

【Laravel】PostmanでSanctumのSPA認証を用いたAPIをテストする方法

【テスト】Laravel Sanctum / SPA認証のAPIをPostmanでテストする方法
nanoha.creator@gmail.com

Laravelで開発したAPIをPostmanでテストしようと思ったら、思いのほか詰まってしまったので、やり方をまとめました。

実現したいこと

本記事では、Laravelがデフォルトで用意してくれている/api/userをPostmanからリクエストしてユーザ情報が取得できるところまでを確認します。

以下の手順で進めていきます。

  1. CSRFトークンを取得
  2. ログイン
  3. ユーザ情報取得

実行環境(OSや各種バージョンなど)

今回、試した環境は、以下のとおりです。

OSWindows11
Ubuntu24.04
Docker Desktopv4.37.1
Laravel11.37.0
PHP8.4.2
Postmanv11.30.4

Laravel環境は、以下で構築しました。

参考
Laravel SailとLaravel BreezeでLaravel+Next.jsのフルスタック開発環境を構築する(git設定まで)【Windows11】
Laravel SailとLaravel BreezeでLaravel+Next.jsのフルスタック開発環境を構築する(git設定まで)【Windows11】

バックエンドとフロントエンドのドメイン設定は、以下のようにしています。

バックエンド(Laravel)localhost:8000
フロントエンド(Next.js)localhost:3000

ルートは以下ような設定になっています。
本記事に関連するのは、sanctum/csrf-cookieloginapi/userの3つです。

$ ./vendor/bin/sail artisan route:list

  GET|HEAD   / ...................................................................................................................  
  GET|HEAD   api/user ............................................................................................................  
  POST       email/verification-notification .............. verification.send › Auth\EmailVerificationNotificationController@store  
  GET|HEAD   email/verify/{id}/{hash} ........................................... verification.verify › Auth\VerifyEmailController
  POST       login ............................................................. login › Auth\AuthenticatedSessionController@store  
  POST       logout ......................................................... logout › Auth\AuthenticatedSessionController@destroy  
  POST       password/reset .................................................... password.reset › Auth\NewPasswordController@store  
  POST       password/reset/request .................................... password.request › Auth\PasswordResetLinkController@store  
  POST       register ............................................................. register › Auth\RegisteredUserController@store  
  GET|HEAD   sanctum/csrf-cookie ............................... sanctum.csrf-cookie › Laravel\Sanctum › CsrfCookieController@show  
  GET|HEAD   storage/{path} ........................................................................................ storage.local  
  GET|HEAD   up ..................................................................................................................  

                                                                                                               Showing [12] routes

.envの確認

Laravel環境の.envに以下の設定を追加しておきます。

SANCTUM_STATEFUL_DOMAINS=localhost:3000,localhost

この環境変数は、config/sanctum.phpで使われています。
おそらく設定しなくてもデフォルト設定があるので問題ないですが、あとでの変更が簡単になるので、設定しておくと良いです。

'stateful' => explode(',', env('SANCTUM_STATEFUL_DOMAINS', sprintf(
    '%s%s%s',
    'localhost,localhost:3000,127.0.0.1,127.0.0.1:3000,127.0.0.1:8000,::1',
    Sanctum::currentApplicationUrlWithPort(),
    env('FRONTEND_URL') ? ','.parse_url(env('FRONTEND_URL'), PHP_URL_HOST) : ''
))),

Postmanの設定

デフォルトだと自動リダイレクトが有効になっているので、無効にしておきます。
Postman全体の設定としても、コレクションごとでも設定することもできます。

Postman全体に設定する場合には、[ファイル]>[設定]と進むと設定画面が表示されます。(もしくは、Ctrl+カンマ)

Postmanの設定画面で「自動的にリダイレクトに従う」をOFFにしておく

CSRFトークン取得・ログイン

PostmanでCSRFトークン取得とログインを行っていきます。
別々のコレクションで実行しても良いですが、今回はまとめて実行することにしました。

ログイン処理のコレクションの事前処理としてCSRFトークンを取得する、というイメージです。

ログインリクエストを設定する

以下のようにして、ログインのコレクションを作成します。
ホディには、作成済みユーザのログイン情報を設定します。

POSTメソッドとしてログインのエンドポイント指定と、ボディにメールアドレスとパスワードを設定する

スクリプト設定

スクリプトタブを開くと、「Pre-request」と「Post-response」という2つのスクリプトが設定できるようになっています。
それぞれ、リクエストを送信する前と後に実行するスクリプトが設定できます。

スクリプトタブでスクリプトを設定する

Pre-requestには、以下の内容を設定します。
CSRFトークンの取得処理をして、環境変数に保存する処理です。
※環境変数については後ほど説明します

pm.sendRequest({
  url: 'http://localhost:8000/sanctum/csrf-cookie', 
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
  }
}, function (err, res, {cookies}) {
  if (err) {
    console.log('CSRFトークン取得に失敗: ', err);
    return;
  }

  // CSRFトークンを環境変数に保存
  pm.environment.set('xsrf-token', cookies.get("XSRF-TOKEN"));  
})

Post-responseには、以下の内容を設定します。
ログイン後にCSRFトークンとセッション情報を環境変数に保存する処理です。

pm.environment.set('xsrf-token', pm.cookies.get("XSRF-TOKEN"));
pm.environment.set('laravel_session', pm.cookies.get("laravel_session"));

ヘッダー設定

ヘッダータブを開いて、X-XSRF-TOKENAcceptを以下のように設定します。

{{xsrf-token}}が、先ほどPre-requestで設定した環境変数を指しています。

X-XSRF-TOKEN{{xsrf-token}}
Acceptapplication/json
ログインヘッダーにX-XSRF-TOKENとAcceptを設定する

環境準備

環境変数を保存するために、環境を用意します。
サイドバーから、わかりやすい名前で環境を追加します。(ここではenvとしています)

サイドバーから環境を追加する

環境が追加できたら、右上のセレクトボックスでコレクションと紐づけをします。

コレクションに環境を紐づける

ログイン確認

ここまで設定ができたら、リクエストを送信してログインを確認します。
ログイン処理の実装にもよりますが、、204 No Contentが返ってきたら成功です。

ユーザ情報取得

ユーザ情報取得用にコレクションを作って、設定していきます。
メソッドとルート、ヘッダー、環境を設定すればOKです。
環境は、先ほどと同じものを指定します。

GETメソッドとしてユーザ情報取得のエンドポイント指定と、ヘッダー、環境を設定する

設定は、↑の通りですが、コピーできるようにテキストでも記載しておきます。
ログインのコレクションと同じ環境を紐づけることで、ログインのPost-responseで設定している環境変数を使うことができます。

X-XSRF-TOKEN{{xsrf-token}}
Acceptapplication/json
Cookielaravel_session={{laravel_session}}
Refererhttp://localhost:3000

Refererは、SPA認証のときには、RefererかOriginヘッダのどちらかを設定するようにとの記載があるので、設定しました。Originを設定しても問題ないと思います。

ドキュメント
Laravel 11.x Laravel Sanctum
Laravel 11.x Laravel Sanctum

ログインが成功している状態で、ユーザ情報取得のリクエストを送信すると、ユーザ情報がレスポンスとして返ってくると思います。

さいごに

PostmanでLaravel SanctumのSPA認証を用いたAPIをテストする方法について解説しました。

環境変数を使うと、複数のコレクションで共有してリクエストを送信できるので便利です。
Thunder Clientなどでも同様にAPIをテストできると思います。

ABOUT ME
Haruna Abe
Haruna Abe
Webエンジニア
フロントエンドエンジニア2年目|ReactやTypeScriptなど、フロントエンドの情報を発信していきます
CONTACT

お問い合わせ

制作のお見積もりやご依頼、その他ご相談等ございましたら
お気軽にお問い合わせください。

    記事URLをコピーしました