【確認済み】Laravel Sanctum実装のAPIをPostmanから実行する方法

【確認済み】Laravel Sanctum実装のAPIをPostmanから実行する方法

Laravel Sanctumで実装されたAPI、もといクッキー認証のAPIでPostmanを実行する方法です。

Laravel SanctumのAPIをPostmanから叩きたい

APIの開発やテストをする時、わざわざWebページから叩いてたら面倒なのでPostman等のリクエストを投げられるツールが必須です。

現時点でちゃんと動く設定を記載している国内外のサイトが見当たらないので、少し丁寧に記載します。

必要なソフトウェアをダウンロードする

Postmanをダウンロードする

クライアント版のアプリケーションをインストールします。

Download Postman
https://www.postman.com/downloads/

Chrome拡張機能にもPostmanは存在しますが、公式で非推奨なので使用しません。
後述のPostman Interceptorは既にクライアント版に対応済みなのでChrome拡張機能を使う必要はありません

Postman Interceptorをダウンロードする

ChromeのクッキーをPostmanへ中継するための拡張機能で、クッキー認証のAPIでは必要になるためダウンロードします。

Postman Interceptor
https://chrome.google.com/webstore/detail/postman-interceptor/aicmkgpgakddgnaphhhpliifpcfhicfo?hl=ja

Laravel設定

CORSの許可対象ドメインを追加する

CORS(Cross-Origin Resource Sharing)では、あらかじめ許可しているドメインのアクセス以外は拒否するため、Postmanから実行されるlocalhostを許可対象に追加します。

laravel/.env

SANCTUM_STATEFUL_DOMAINS=localhost:8080,localhost

SESSION_DRIVERを変更する

セッションドライバはcookieに変更します。

laravel/.env

SESSION_DRIVER=cookie

Postman設定

Environmentを作成する

アプリケーションごとに各リクエストから共通で参照したい設定を持つために、Environmentを作成します。
今回はRefererで使用するためのホスト名localhostを追加します。

Postman Interceptorを設定する

Interceptor Bridgeをインストールする

PostmanからInterceptorの設定を開き、Install Interceptor Bridgeからインストールします。

Postman Interceptorを有効にする

  1. Capture CookiesをONに変更する
  2. ブラウザのInterceptor拡張機能の接続状態を確認する
    CONNECTEDになっていればOK
  3. localhostを追加する

リクエストを設定する

Collectionを作成する

リクエストの定義をまとめるCollectionを作成します。
そして、そのCollection内に作成したリクエスト実行前にXSRF-TOKENを取得するスクリプトをセットします。

pm.sendRequest({
    url: 'http://localhost:8080/sanctum/csrf-cookie',
    method: 'GET'
}, function (error, response, { cookies }) {
    if (!error) {
        pm.environment.set('xsrf-token', cookies.get('XSRF-TOKEN'))
    }
})
POST、PUTのリクエストでは、CookieにセットされたXSRF-TOKENと共にヘッダーにもTOKENを追加する必要があります。

リクエストのHeadersをセットする

KEY VALUE
Accept application/json JSONリクエストの場合は追加
Referer {{host}} 参照元のサイト情報としてSanctumが認証に使用するため必須
X-XSRF-TOKEN {{xsrf-token}} POST/PUTの場合は必須
{{***}}は、Environmentに定義された変数の参照を意味しています。

リクエストのBodyをセットする

POSTやPUTでJSONリクエストを受け取るAPIの場合は以下のようにBodyの中身をセットします。

サイズが大きい場合はChrome開発者ツールのNetworkから実際のリクエストからJSONデータやFormDataをコピーすると手っ取り早いです。

プログラミングカテゴリの最新記事