L5-SwaggerのSwagger UIからLaravel SanctumのSPA認証する

L5-Swaggerを使うと/api/documentationでSwagger UI上からAPIのテストができるようになりますが、Laravel SanctumのSPA認証を使ったAPIには対応していません。Viewを修正して対応してみます。

環境

• PHP: 8.0.3
• Laravel: 8.65.0
• darkaonline/l5-swagger: 8.0.9

手順

1. L5-Swaggerのviewファイルを生成する

php artisan vendor:publish --provider "L5Swagger\L5SwaggerServiceProvider"

resources/views/vendor/l5-swagger/index.blade.phpが生成されます。このviewファイルを修正します。

2. viewファイルを修正する

viewファイル84行目以降を以下のように変更します。

resources/views/vendor/l5-swagger/index.blade.php

    requestInterceptor: async function(request) {
-      request.headers['X-CSRF-TOKEN'] = '{{ csrf_token() }}';
+      if (!document.cookie.includes('XSRF-TOKEN')) {
+        await fetch('/sanctum/csrf-cookie');
+      }
+      request.headers['X-XSRF-TOKEN'] = unescape(document.cookie
+        .split('; ')
+        .find(row => row.startsWith('XSRF-TOKEN'))
+        .split('=')[1]);
      return request;
    },

あとはログインするAPIを実行すれば、他の認証が必要なAPIも実行できるようになります。

SanctumでSPA認証するにはCSRF保護を受ける必要がありますが、XSRF-TOKENクッキーの値をX-XSRF-TOKENヘッダで送信することで、後続のリクエストは自動的にCSRF保護を受けます。X-CSRF-TOKENクッキーがない場合は/sanctum/csrf-cookieにアクセスしてCSRF保護を初期化すればOKです。

参考