はじめに

Laravel Sanctum, Fortifyを使用したSPA認証の手順を説明していきたいと思います。

実際の機能の実装は次回の記事で行います。

事前準備

LaravelとNuxt.jsのプロジェクト作成
データベースの準備

目次

1.環境
 2.各パッケージの概要
 3.Fortify導入手順
 4.Sanctum導入手順
 5.nuxt/authの導入手順
 6.参考記事

1. 環境

Laravel：8.83.4
Nuxt.js：2.15.8
node: 14.19.0

2. 各パッケージの概要

Laravel Fortify

ユーザー登録・ログイン機能といった認証機能のバックエンド部分を手軽に搭載
フロントエンドは自分で実装する必要がある

Laravel Sanctum

SPA(シングルページアプリケーション)、モバイルアプリケーション、およびシンプルなトークンベースのAPI向けの軽量認証システムを提供する仕組み
APIトークンを用いた認証とweb認証ガードを用いたCookieベースのSPA認証がある
本記事ではSPA認証を実装する

nuxt/auth

Nuxt.jsで利用できる認証モジュール
簡単にログイン・ログアウト等の機能を実装できる

3. fortify導入手順

Fortifyのインストール

プロジェクトディレクトリ配下でFortifyのインストールを行う

composer require laravel/fortify
php artisan vendor:publish --provider="Laravel\Fortify\FortifyServiceProvider"
php artisan migrate

Fortifyの初期設定

FortifyServiceProviderをconfig/app.phpのproviders配列に追加

config/app.php

<?php
//略
    'providers' => [
        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
        App\Providers\FortifyServiceProvider::class,//追加
    ],
//略

Laravelのビューを無効化するためconfig/fortify.phpのviewsをfalseに変更
Fortifyのルートにprefixを付与するため、修正

config/fortify.php

<?php

use App\Providers\RouteServiceProvider;
use Laravel\Fortify\Features;

return [
//略
    'prefix' => 'api',//変更

    'views' => false,//変更
//略
];

4. sanctum導入手順

Sanctumのインストール

プロジェクトディレクトリ配下でSanctumのインストールを行う

composer require laravel/sanctum
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

Sanctumの初期設定

EnsureFrontendRequestsAreStatefulをKernel.phpのapiミドルウェアグループに追加

Kernel.php

<?php

namespace App\Http;

use Illuminate\Foundation\Http\Kernel as HttpKernel;

class Kernel extends HttpKernel
{
//略
    protected $middlewareGroups = [
       //略

        'api' => [
            \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
            'throttle:api',//追加
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];
//略
}

「ステートフル」な認証を維持するドメインの指定

.env

SANCTUM_STATEFUL_DOMAINS=localhost:3000

cors対策としてconfig/cors.phpのsupports_credentialsをtrueに設定

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,//変更

];

5. authモジュールの導入手順

nuxt/authのインストール

npm install --save-exact @nuxtjs/auth-next

nuxt/authの初期設定

nuxt.config.jsのmodules配列に@nuxtjs/auth-nextを追加
nuxt/authはvuexを使用するため、storeを利用していない場合はstore/index.jsなどの空ファイルを作成

nuxt.config.js

 modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
    '@nuxtjs/auth-next',//追加
  ],

Sanctum用の設定追加

nuxt.config.js

export default {
//略
   auth: {
    redirect: {
      login: '/login',
      logout: '/',
      callback: false,
      home: false
    },
    strategies: {
      laravelSanctum: {
        endpoints: {
          login: { url: '/api/login', method: 'post' },
          logout: { url: '/api/logout', method: 'post' },
          user: { url: '/api/user', method: 'get' }
        },
        provider: 'laravel/sanctum',
        url: 'http://localhost:80'
      }
    }
  },
//略
}

axios, proxyの設定追加

nuxt.config.js

export default {
//略
  axios: {
    credentials: true
  },
  proxy: {
    '/api': {
      target: 'http://localhost:80'
    }
  },
//略
}

6. 参考記事