Laravel公式ニュースレター「Laravel News」

Laravel Newsは、Laravelが公式に発行しているメールマガジンとウェブサイトです。

Just a moment...

laravel-news.com

毎週日曜日に発行されており、その週にあったLaravelに関するアツいニュースをまとめて紹介してくれています。

公式ツイッターもあります！

Laravel News (@laravelnews) on X

Your news source for the Laravel PHP Framework. Email us at hello@laravel-news.com

x.com

大きなアップデートがあったときはもちろん、便利なライブラリやツールについてもたくさんの特集が組まれています。サンプルコードとともにわかりやすく解説してくれており、大変勉強になります。

もちろん誰でも無料で登録できますので、Laravel開発者の方はぜひ登録しておくといいですよ♪

Laravel Newsの登録方法

Laravel Newsへの登録は下記の登録ページから行うことができます。

Just a moment...

laravel-news.com

もしくはLaravel News公式サイトのフッターから直接登録することもできます。

hello@laravel-news.comにメールを送ることでもできるようです。

ところで・・・

ところで、ひとつギモンだったことが。

「Laravel Newsは何で作られているのかなー」

調べてみたら、Laravel News自体もLaravelで制作されているようです。

そりゃそうだよね（^^;）

まとめ

知っての通り、Webの技術は日進月歩です。Laravel Newsにまだ登録していない方は、ぜひ登録してup to dateなLaravel Developerになりましょう！

GitHub - takabus/laravel-sanctum-nuxt-auth-sample: SPA authorization sample with Laravel Sanctum and NuxtJS official auth module.

SPA authorization sample with Laravel Sanctum and NuxtJS official auth module. - takabus/laravel-sanctum-nuxt-auth-sampl...

github.com

Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第1回 バックエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけ簡単に実装する方法を紹介していきます。第1回はLaravel Sanctumを使ったSPA認証対応のバックエンド構築の手順について紹介していきます。

takabus.com

2022.04.18

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第2回 フロントエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけかんたんに実装する方法を紹介していきます。

takabus.com

2022.07.29

クローンする

まずはGitHubからクローンしてください。

git clone https://github.com/takabus/laravel-sanctum-nuxt-auth-sample.git

インストール（フロントエンド）

必要なライブラリをインストールします。

frontディレクトリでコンソールを起動し、npm installを実行します。

cd front
# フロントエンド（NuxtJS）の依存ライブラリをインストール
npm install

インストール（バックエンド）

backディレクトリに移動し、composer installを実行します。

cd back
# バックエンド（Laravel）の依存ライブラリをインストール
composer install

.env.exampleファイルをコピーして、.envファイルを作成します。

cp .env.example .env

.env.exampleにはLaravel Sanctumの動作に必要な変数やテストユーザーを含むSQLiteデータベースへの接続設定が含まれています。詳しくはコメントをご確認ください。

APP_KEYを生成します。

php artisan key:generate

以上でセットアップは完了です。

さわってみよう

Windowsの場合はstart.batを実行すると、バック・フロントエンドの開発サーバーが起動します。

ブラウザでフロントエンドの開発サーバー（http://localhost:3000/）にアクセスすると、SPA認証をお試しいただけます。

あらかじめテストユーザー（ID：t@localhost パスワード：password）を登録してありますので、ログインしてみてください。

イベントを活用しよう

Laravelにはイベントという機能が搭載されています。

イベントを活用することにより、ログインやログアウトなどといった特定の処理が発生したときに任意のプログラムを実行することができるようになります。

イベントリスナ（イベントが発生したときに行う処理を定義しておくファイル）をあらかじめ作成しておくことで、ログインされたときに任意の処理を実行できます。

イベントを作成する

まずは、app\Providers\EventServiceProvider.phpを開き、イベントハンドラを定義します。

ここではAuthで利用できるすべてのイベントを定義してみます。

/**
 * アプリケーションに指定されたイベントリスナ
 *
 * @var array
 */
protected $listen = [
    'Illuminate\Auth\Events\Registered' => [
        'App\Listeners\LogRegisteredUser',
    ],

    'Illuminate\Auth\Events\Attempting' => [
        'App\Listeners\LogAuthenticationAttempt',
    ],

    'Illuminate\Auth\Events\Authenticated' => [
        'App\Listeners\LogAuthenticated',
    ],

    'Illuminate\Auth\Events\Login' => [
        'App\Listeners\LogSuccessfulLogin',
    ],

    'Illuminate\Auth\Events\Failed' => [
        'App\Listeners\LogFailedLogin',
    ],

    'Illuminate\Auth\Events\Logout' => [
        'App\Listeners\LogSuccessfulLogout',
    ],

    'Illuminate\Auth\Events\Lockout' => [
        'App\Listeners\LogLockout',
    ],

    'Illuminate\Auth\Events\PasswordReset' => [
        'App\Listeners\LogPasswordReset',
    ],
];

認証に関するイベントの種類についてはこちらの表のようになります。

例えば、下のようにしておくと、ユーザーが登録されたとき（Illuminate\Auth\Events\Registered）にイベントが発火し、イベントリスナ（App\Listeners\LogRegisteredUser）が実行されます。

    'Illuminate\Auth\Events\Registered' => [
        'App\Listeners\LogRegisteredUser',
    ],

同様に、ログインされたときに処理を行いたいときはIlluminate\Auth\Events\Loginイベントを定義してやればOKです。イベントの種類はLaravelのドキュメントに記載されています。

なお、実行されるイベントリスナのファイルは次の手順で自動生成させますので、手動で作成する必要はありません。

イベントリスナを作成する

上記のファイルで定義したイベントリスナを作成します。artisanコマンドで作成できます。

php artisan event:generate

App\Listenersディレクトリが作成され、EventServiceProvider.phpで定義したイベントリスナが作成されます。

後からイベントを追加した場合も同様にコマンドを実行します。

存在しないイベントリスナが自動的に追加されます。

処理を実装する

App\Listenersディレクトリに作成されたファイル群を編集することで、実行したい処理を実装することができます。

ここでは、app\Listeners\LogSuccessfulLogin.phpに処理を追加し、ログインに成功したときにログに記録するようにしてみます。

<?php

namespace App\Listeners;

use App\Http\Controllers\LineNotifyCon;
use Illuminate\Auth\Events\Login;
use Illuminate\Support\Facades\Log;

class LogSuccessfulLogin
{
    /**
     * Create the event listener.
     *
     * @return void
     */
    public function __construct()
    {
        //
    }

    /**
     * Handle the event.
     *
     * @param  Login  $event
     * @return void
     */
    public function handle(Login $event)
    {

        //ログインされたらログ(storage/log/laravel.log)に残す
        Log::info("Login");
        Log::info($event->user);
    }
}

これでログインされたときに自動的にログが記録されるようになりました。

まとめ

ログインされたときに任意の処理を実行する方法を紹介しました。

Laravelでは便利な数多くのイベントが用意されていますので、目的にあったイベントを活用しましょう。

ステートフルドメインの判定を止めるには？

vendor\laravel\sanctum\src\Http\Middleware\EnsureFrontendRequestsAreStateful.phpを編集します。

fromFrontend関数がつねにtrueを返すようにします。

    /**
     * Determine if the given request is from the first-party application frontend.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return bool
     */
    public static function fromFrontend($request)
    {
        $domain = $request->headers->get('referer') ?: $request->headers->get('origin');

        if (is_null($domain)) {
            return false;
        }

        $domain = Str::replaceFirst('https://', '', $domain);
        $domain = Str::replaceFirst('http://', '', $domain);
        $domain = Str::endsWith($domain, '/') ? $domain : "{$domain}/";

        $stateful = array_filter(config('sanctum.stateful', []));

        return true;//つねにtrueを返すと全許可になる
        return Str::is(Collection::make($stateful)->map(function ($uri) {
            return trim($uri).'/*';
        })->all(), $domain);
    }

もちろん、姑息的な方法ですので、最終的にはSANCTUM_STATEFUL_DOMAINSを適切に設定する必要があります。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第1回 バックエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけ簡単に実装する方法を紹介していきます。第1回はLaravel Sanctumを使ったSPA認証対応のバックエンド構築の手順について紹介していきます。

takabus.com

2022.04.18

GitHubにサンプルを公開していますので、ぜひご活用ください。

【nuxt/authｘLaravel SanctumでSPA認証】サンプルを公開しました

GitHubにNuxtJS（nuxt/auth）とLaravel Sanctumのサンプルプロジェクトを公開しました。Laravel Sanctumとnuxt/authによるSPA認証をすぐに体験できます。Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

takabus.com

2022.09.10

Laravel SanctumとNuxt/AuthによるSPA認証を体験いただくことができます。

(2022/9/11追記)

nuxt/authのインストール

まずは、nuxt.jsプロジェクトにnuxt/authをインストールしましょう。

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

nuxt/authは、Nuxt.jsのプロジェクトに認証に関する処理をかんたんに実装することができるモジュールです。第1回で構築したLaravel Sanctumだけではなく、OAuthやLaravel JWT、Laravel Passportなどのさまざまな認証バックエンドと連携させることができます。

npm init nuxt-app <project-name>

APIとの通信に使用するため、nuxt/axiosもインストールしておきましょう。

npm install @nuxtjs/axios

nuxt.config.jsを編集し、nuxt/authとnuxt/axiosをモジュールに追加します。

{
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/auth-next'
  ],
  auth: {

  }
}

ついでにauthセクションも追加しておきました。あとで使います。

nuxt/authのセットアップ

次に、nuxt/authのセットアップを行っていきます。Laravel Sanctumで構築したバックエンドにログインし、保護されたルートにアクセスできるようにしていきます。

ストラテジー（strategy）を作成する

nuxt/authでは、認証に関わる設定をストラテジー(strategy)として設定していきます。

ストラテジーは同時に複数定義することができます。例えば、APIサーバーのほか、OAuthを用いた連携ログインも可能にするなど、複数のログイン方法を用意することも可能となっています。

ここではシンプルに第1回で構築したバックエンド（Laravel Sanctum）にログインするためのストラテジーだけを作成していきます。

nuxt.config.jsのauthセクションにstrategiesというセクションを追加し、任意の名前のストラテジーを作成します。

    auth: {
        strategies: {
            laravelApi: {
                provider: 'laravel/sanctum',
            },
        }
    },

ここでは、“laravelApi”という名前のストラテジーを作成し、プロバイダーにLaravel Sanctumを指定しました。

エンドポイントを設定しよう

バックエンドのベースURLと認証に関わるルートを設定していきます。

    auth: {
        redirect: {
            login: '/auth/login',
        },
        strategies: {
            laravelApi: {
                provider: 'laravel/sanctum',
                url: 'http://localhost:8000',
                // endpoints: {
                //   login: { url: '/api/login', method: 'post' },
                //   logout: { url: '/api/logout', method: 'post' },
                //   user: { url: '/api/user', method: 'get' }
                // }
            },
        }
    },

urlにバックエンドのURLを指定します。ここではLaravelのローカルサーバー(http://localhost:8000)を指定しています。

また、endpointsにログイン・ログアウト・ユーザー情報を取得するためのAPIへのパスを指定しておきます。デフォルトでは以下のように設定されています。

今回は、第1回でroutes/web.phpに上記と同じルートを指定しておいたため、endpointsに関する設定は不要です。デフォルトと異なるルートを設定している場合は、endpointsにパスを指定することにより、任意のエンドポイントを使用できます。

リダイレクトの設定

次に、リダイレクトに関わる設定を行います。

nuxt/authを導入すると、認証が必要なページへのアクセスを制限することができます。ログインされていない状態で認証が必要なページへアクセスされた場合、自動的にログインページへリダイレクトさせることができます。

リダイレクト先には任意のページを指定することができます。nuxt.config.jsから設定していきます。

auth: {
    redirect: {
        login: '/auth/login',
    },
    strategies: {
        laravelApi: {
            provider: 'laravel/sanctum',
            url: 'http://localhost:8000',

    }
}, 

authセクションにログインページのパスを指定します。上のサンプルでは、ログインページがpages/auth/login.vueにあるものとして設定してみました。

そして、routerにauthミドルウェアを適用します。

router: {
     mode: "hash",
     base: process.env.BASE_URL,
     middleware: ['auth']
},

routerのミドルウェアへの登録を忘れると、リダイレクトが動作しませんので要注意です。なお、開発環境で一時的にリダイレクトさせないようにしたいときは、ミドルウェアから外してやればOKです。

axiosからAPIへアクセスできるようにする

以上で認証に関するセットアップのほとんどが完了です。ログインやログアウトはすでに可能な状態になっています。

しかし、まだこの状態ではバックエンドのAPIにアクセスすることはできません。ログインが済んでいたとしても、axiosからsanctumでガードされたAPIにアクセスしようとすると、401 Unauthorizedエラーが発生してしまいます。

これはnuxt/authでログインし取得できたCSRFトークンやクッキーなどの資格情報が、axiosからのリクエストに含まれていないことが原因です。

axiosにはcredentialsというオプションがあり、これを有効にすることで資格情報をリクエストと一緒にサーバーへ送ることができます。nuxt.config.jsからオプションを適切に設定することで、正常にAPIへアクセスできるようになります。

axios: {
    baseURL: 'http://localhost:8000',
    credentials: true
},

credentialsを有効にすると、CSRFトークンの取得・更新処理も自動的に行なってくれるようになります。明示的にトークンの更新を行う必要もなくなるので、大変便利なオプションです。

オプションを設定したら、npmの開発サーバーを再起動しておきましょう。

Ctrl+C
$ npm run dev

ログインページをつくって、いざログイン！

さあ、これで準備は万端です。いよいよ実際にログインしてみましょう。

pagesディレクトリにログインページ(pages/auth/login.vue)を作成します。

<template>
    <input type="text" v-model="id" placeholder="id">
    <input type="password" v-model="password" placeholder="パスワード">
    <button @click="login">ログイン</button>
</template>

<script>
    export default {
        auth: false,
        data() {
            return {
                id: null,
                password: null
            }
        },
        methods: {
            login() {
                try {
                    // ログインする
                    const response = await this.$auth
                        .loginWith("laravelApi", {
                            data: {
                                id: this.id,
                                password: this.password
                            }
                        })
                        .then(() => {
                            // ログインに成功したら、/にページ遷移
                            window.alert("ログインしました");
                            this.$router.push("/");
                        });
                    console.log(response);
                } catch (error) {
                    // ログインに失敗したら、コンソールに出力する
                    window.alert("ログイン失敗");
                    console.log(error);
                }
            }
        }
    }
</script>

作成したページはこんな感じです。IDとパスワードを入力し、[ログイン]ボタンをクリックすると、nuxt/authによりログインが施行されるようにしました。

ここではわかりやすくするため、最低限の処理を実装しています。実際の案件では、バリデーションなども適切に実装するようにしましょう。

ログインを施行するには、$auth.loginWithメソッドを使います。

// ログインする
const response = await this.$auth
    .loginWith("laravelApi", {
        data: {
            id: this.id,
            password: this.password
        }
    })
    .then(() => {
        // ログインに成功したら、/にページ遷移
        window.alert("ログインしました");
        this.$router.push("/");
    });

第1引数にストラテジー名(ここではlaravelApi)、第2引数にログインに使用するIDとパスワードを指定します。ログインボタンがクリックされたら実行されるよう、[ログイン]ボタンにclickイベントを設定しておきます。ログインに失敗した場合はcatchで受けて、”ログイン失敗”というアラートを表示させています。

ちなみにauth:falseという部分は、ログインしていなくてもページを表示できるようにするためのものです。デフォルトでは各ページにauth:trueが設定されており、ログインしないとページの表示がされないようになっています。当然ながら、ログインページはログインしていない状態で表示される必要があるため、auth:falseを指定しています。

<script>
    export default {
        auth: false,

ログイン後は/に遷移するようにしていますので、ログイン後に表示されるページ（pages/index.vue）も作成しておきましょう。

<template>
    <h1>ログインしました♪</h1>
</template>

ページを作成したら、さっそくログインしてみてください。うまくいきましたか？

まとめ

いかがでしたでしょうか。

SPA認証を実装しようとすると、本来はCSRFトークンの更新からクッキーに資格情報をセットしたりなど、複雑な処理を実装していく必要がありますが、Laravel Sanctumとnuxt/authを組み合わせると、かんたんにSPA認証を実装することができます。

参考になれば幸いです。

getSizeを実行するだけ

リクエストされたファイルのサイズは、PHP標準の関数であるgetSizeを呼び出すことで取得できます。

// ファイルサイズを取得する
$filesize = $request->file("image")->getSize();

ファイルサイズを制限したいときは？

アップロードされたファイルサイズの上限を設定することもできます。

getSize関数でファイルサイズを取得し、ifで判定すればOKです。

// ファイルサイズを取得する
$filesize = $request->file("image")->getSize();
// 3MBを超えていたら、400 BadRequestエラーを返す
if ($filesize > 3145728) {
    abort(400);
}

ここでは3MBを超えるファイルが送られた場合に、400エラーを返すサンプルを紹介しました。

より本格的なケースではバリデータを使います。

php.iniでもアップロードサイズの上限を設定することができますが、これはあくまで大きなファイルを送りつけられたときの予防的措置としてのものです。基本的にはフレームワーク側でのバリデーションが必要となります。

参考にしていただければ幸いです。

アクセサとは？

Laravelにはアクセサ（Accessors）という機能があります。

6.x Eloquent：ミューテタ Laravel

readouble.com

アクセサとは、返り値に任意の値を追加してくれる機能のことです。モデルに定義しておくことで、データを自動的に加工した値や、任意の値を取得されるデータに追加してくれます。

アクセサを使ってみよう！

実際にアクセサを使ってみましょう。ここでは例としてブログサイトを考えてみます。

記事のモデル「Post」で投稿を取得した際に、データベースに格納されているすべての記事の数を同時に取得できるようにしてみたいと思います。

モデル（app\Models\Post）にアクセサを定義します。

namespace App;

use Illuminate\Database\Eloquent\Model;


class Post extends Model
{
    protected $appends = ['count'];

    public function getCountAttribute()
    {
        return Post::count();
    }
}

アクセサの関数はget＋属性名＋Attributeという名前で定義するようにします。命名規則に従うことで、自動的にアクセサが認識されます。

また、$appendsに追加する属性の名前を追加することで、データ取得時に自動的に実行されるようにします。

アクセサを定義したら、モデルからデータを取得してみましょう。

dd(Post::find(1))
=>{id:"1",title:"sample",body:"asdf",count:"5"}

通常はデータベースにあるデータしか取得されませんが、アクセサが動作したことでcountという属性が追加され、データと一緒に記事数が返されていることがわかります。

データベースから取得した値を加工してみよう！

アクセサでは取得したレコードの値を参照することもできます。

$this->attributes["カラム名"]で取得したレコードのデータを参照することができます。

例えば、記事本文（body）の文字数を一緒に返したいなら、こんな感じのアクセサを定義すればOKです。

//本文の文字数を一緒に返す
public function getLengthAttribute()
{
    return strlen($this->attributes["body"])
}

$appendsにlengthを追加すれば、レコードを取得したときに本文(body)の文字数を一緒に返してくれるようになります。

商品金額から税込価格を取得したり、空白区切りの氏名から姓と名を取得したり、さまざまな活用法が考えられますね。

GitHubにサンプルを公開しました。

【nuxt/authｘLaravel SanctumでSPA認証】サンプルを公開しました

GitHubにNuxtJS（nuxt/auth）とLaravel Sanctumのサンプルプロジェクトを公開しました。Laravel Sanctumとnuxt/authによるSPA認証をすぐに体験できます。Laravel SanctumとNuxtJSによるSPA認証については、以前チュートリアル記事をアップしていますので、ご活用ください。

takabus.com

2022.09.10

Laravel SanctumとNuxt/AuthによるSPA認証を体験いただくことができます。

(2022/9/11追記)

全2回の連載とし、第1回はSPA認証に対応したバックエンドをLaravelで構築する方法について紹介していきます。Laravelでは認証システムを簡単に実装できるライブラリが豊富に用意されており、専門的な知識が十分ではなくても、SPA認証が実装できるようになっています。そこで当記事では、SPA認証におすすめのライブラリ「Laravel Sanctum」の紹介から、実際に実装する手順について解説していきたいと思います。

第2回では、フロントエンドフレーム「Nuxt.js」にログイン機能を実装していきます。Nuxt.js公式の認証モジュール「nuxt/auth」を活用し、認証に関する難しいコーディングはほぼゼロでログイン機能を実装していく方法を紹介していきます。

LaravelとNuxt.jsのプロジェクトは、完全に分離して開発されたものとして解説していきます。

なお、LaravelとNuxt.jsを組み合わせた際のSPA認証としては、今回紹介する以外にもたくさんの方法があります。当記事では、LaravelとNuxt.jsに用意されているライブラリをフル活用し、できる限りシンプルに実装する方法を取り上げています。

まずはSPA認証の全体像をチェック！

はじめにSPA認証がどのような流れで行われるかについて、確認しておきましょう。

1. 【フロントエンド】CSRFトークンを要求
2. 【バックエンド】CSRFトークンを返し、ブラウザのクッキーにセット
   【フロントエンド】ログインAPIへメールアドレスとパスワードをPOST
3. 【バックエンド】認証（正しいパスワードか確認する）し、フロントエンドへ結果を返す
4. 【フロントエンド】認証に成功したら、ログイン済みページへ遷移する

まず、第一にCSRFトークンの取得が必要となります。

CSRF（Cross-site Request Forgery）トークンというのは、正規のページからアクセスが行われていることを証明するための値のことです。いわば合言葉のようなもので、フロントエンドは必ずCSRFトークンを事前に取得しておき、APIへアクセスするときはCSRFトークンも一緒に渡す必要があります。CSRFトークンが渡されていないときはアクセスを拒否することで、不正なアクセスを防ぐことができます。

おそらくSPA認証を構築するうえで多くの人が躓くのは、CSRFにかかわる部分です。実際にはLaravel Sanctumとnuxt/authを使うことで、よしなに処理してくれるのですが、SPA認証におけるCSRFトークンの仕組みについては、事前にしっかり理解しておいたほうが後々（とくにフロントエンドを実装する第2回で）楽になります。Google検索してあらかじめイメージを掴んでおくことをおすすめします。

CSRFトークンってなんの意味があるの？意外と知らないAPI通信におけるCSRFの仕組み

SPAやAPI通信におけるCSRFトークンの仕組みについて解説！トークンだけでどうして守れるのか？

takabus.com

2022.03.02

CSRFトークンがうまく取得できれば、あとは通常のログインと同様です。定義しておいたログイン用のルートにメールアドレスやパスワードをPOSTすることで認証できます。

SPA認証の面倒な処理はLaravel Sanctumにおまかせ！

SPA認証を実装するには、CSRFトークンの発行や正規のフロントエンドかどうかの判定など、やらなくてはならない処理がたくさん出てきます。それらすべてを自前で実装することも可能ですが、バグの混入のおそれがありますし、セキュリティの観点からも推奨されません。

そこで、今回はLaravel Sanctumというライブラリを導入していきます。

Laravel Sanctum - Laravel 9.x - The PHP Framework For Web Artisans

Laravel is a PHP web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing ...

laravel.com

Laravel Sanctumは①SPA認証 ②トークン認証 ③モバイルアプリの認証を可能とすることに特化したライブラリです。Laravel Sanctumを導入することで、CSRFトークンに関する処理など、SPA認証に特有の処理を自前でコーディングすることなく実装することができます。第2回でフロントエンドに導入する「nuxt/auth」などのモジュールとの相性もとても良いため、単にSPAフロントエンドと連携させたいのであれば、もっともおすすめされるライブラリとなります。

Laravelの公式ドキュメントにも、SPA認証にはLaravel Sanctumが推奨される旨が記載されています。

 if you are attempting to authenticate a single-page application, mobile application, or issue API tokens, you should use Laravel Sanctum. 

https://laravel.com/docs/8.x/passport#passport-or-sanctum

もちろん、ほかのライブラリにもSPA認証を実装できるものはありますが、各ライブラリの比較をしていると到底説明しきれない量になってしまうため、ここでは詳細に踏み込むことは避けておきましょう。とりあえず、シンプルにSPA認証を実装するならLaravel Sanctumという認識で問題ありません。

今回はSPA認証ができればOKということで、Laravel Sanctumを導入してAPIからのログインを実装してみたいと思います。

Laravel Sanctumをインストール

まずはLaravel Sanctumをインストールしましょう。

ただし、Laravel 8ではプロジェクトを作成した時点で、すでにLaravel Sanctumがインストールされていますので、この手順は不要です。Laravel SanctumはLaravel 6から使用できます。Laravel 6～7を使用している方は以下の手順でインストールしましょう。

ComposerでLaravel Sanctumをインストールします。

composer require laravel/sanctum
Using version ^2.14 for laravel/sanctum
Package manifest generated successfully.
77 packages you are using are looking for funding.
Use the `composer fund` command to find out more!
> @php artisan vendor:publish --tag=laravel-assets --ansi --force
No publishable resources for tag [laravel-assets].
Publishing complete.

Laravel Sanctumのインストールができたら、Sanctumの利用に必要なファイルを生成するコマンドを実行します。

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
Copied Directory [\vendor\laravel\sanctum\database\migrations] To [\database\migrations]
Publishing complete.

Laravel Sanctumをミドルウェアに追加する

次に、ミドルウェアにLaravel Sanctumを登録して、Laravel Sanctumを有効にします。

app\Http\Kernel.phpを開き、$middlewareGroupsのapiにLaravel Sanctumのクラス（\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class）を追加します。

・・・中略・・・   
 protected $middlewareGroups = [
        'web' => [
            \App\Http\Middleware\EncryptCookies::class,
            \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
            \Illuminate\Session\Middleware\StartSession::class,
            // \Illuminate\Session\Middleware\AuthenticateSession::class,
            \Illuminate\View\Middleware\ShareErrorsFromSession::class,
            \App\Http\Middleware\VerifyCsrfToken::class,
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],

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

Laravel SanctumがもともとインストールされているLaravel 8では、該当の行がコメントアウトされています。この場合はコメントを外せばOKです。

アクセスを許可するドメインを設定する

次にLaravel Sanctumへのアクセスを許可するドメインを指定します。

Laravel Sanctumの機能を利用するには、フロントエンドのドメインを設定する必要があります。アクセス元となるフロントエンドのドメインを指定することで、外部からSanctumへの不正なアクセスを防ぐようになっています。

設定はconfig/sanctum.phpから行いますが、デフォルトでは.envファイルで環境変数として設定することができるようになっています。

.envファイルにSANCTUM_STATEFUL_DOMAINSキーを追記して、フロントエンドのドメイン（ポート番号含む）を指定します。

SANCTUM_STATEFUL_DOMAINS=localhost:3000

ここではNuxt.jsの開発環境（http://lcoalhost:3000）からアクセスできるように設定しておきました。

localhost:3000はconfig/sanctum.phpであらかじめ許可設定がなされているため、本当は設定する必要はありませんが、本番環境に移行したときに設定を忘れないよう、あえて明示的に設定しています。

CORSを有効にする

クロスオリジンになる場合は、LaravelでCORSを有効にしておきます。

クロスオリジンとは、バックエンドとフロントエンドのオリジン（アドレス）が異なる状態のことをいいます。この場合はCORSを明示的に有効にしておかないと、セキュリティ対策のためアクセスが拒否されてしまいます。

ローカル環境でもFQDNが異なればクロスオリジンとなります。

例えば、http://localhost:3000でNuxt.jsの開発をしつつ、http://localhost:8080で動作させたLaravelの開発サーバーにアクセスした場合、http://localhost:3000からhttp://localhost:8080へのアクセスが生じることになります。この場合も両者のオリジンは異なるため、CORSの有効化が必要です。

CORSを有効にするにはconfig\cors.phpを編集し、supports_credentialsをtrueにします。

<?php

return [
    'paths' => ['*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,

];

このとき、特定のオリジンからのアクセスのみ許可したい場合は、＊の代わりに許可したいオリジンをallowed_originsに設定しておきましょう。

'allowed_origins' => ['http://localhost:3000'],

ただし、テスト環境ではひとまず＊にしておくことをおすすめします。正常にログインできることを確認してから制限を厳しくしていくほうが、無用なトラブルを避けることができます。

セッション・クッキーを許可するドメインを設定する

クロスドメインになっている場合は、セッション・クッキーを許可するドメインも設定する必要があります。

クロスドメインとは、バックエンドとフロントエンドのドメインが異なることをいいます。例えば、Laravelがhoge.com、フロントエンド（Nuxt.jsなど）がfuga.comでホスティングされているような状況です。クロスドメインではバックエンドからブラウザのクッキーを設定することができず、セッションも張ることができなくなります。許可するドメインをしっかり設定しておきましょう。

config/session.phpから設定しますが、.envからも設定できるようになっているので、.envから設定しましょう。

SESSION_DOMAIN=localhost

セッションクッキードメインを設定することで、クロスドメインになっていてもLaravel側からクライアントにクッキーを設定できるようになります。後で出てくるX-CSRF-TOKENを使用する上で必要となるため、ここで設定を行っておきます。

なお、クロスドメインになっていない場合、当手順は省略できます。

ログインコントローラーの実装

これにてLaravel Sanctumのセットアップは完了です。SPAフロントエンドとの認証用の通信はできるようになりました。

次に認証用のコントローラーを作成していきましょう。

Artisanコマンドを実行し、新たに認証用のコントローラー「AuthController」を作成します。

php artisan make:controller AuthController 

ログインとログアウトができるように実装していきます。通常の認証と同様に、Laravel標準の認証ファサードIlluminate\Support\Facades\Authを使って実装することができます。

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Auth;

class AuthController extends Controller
{
    /**
     * ログイン
     *
     * @param  mixed $request
     * @return void
     */
    public function login(Request $request)
    {
        if (Auth::attempt($request->only(["email", "password"]))) {
            // レスポンスを返す
            return response()->json(['message' => 'success'], 200);
        } else {
            // エラーレスポンスを返す
            return response()->json(['message' => 'failed'], 401);
        }
    }

    /**
     * ログアウト
     *
     * @param  mixed $request
     * @return void
     */
    public function logout(Request $request)
    {
        // ログアウトする
        Auth::logout();
        // レスポンスを返す
        return response()->json(['message' => 'Logged out'], 200);
    }

もちろんAuthファサードのほかのメソッドも使えます。Auth::checkでログイン中か判定したり、Auth::id()でログイン中のユーザーのIDを取得したりすることもできます。Laravel Sanctumを導入していても、通常の認証とまったく同じです。

routes/web.apiでルートを設定します。

<?php

use Illuminate\Http\Request;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/


// SPA認証
Route::post('/login', 'AuthController@login');
Route::post('/logout', 'AuthController@logout');

nuxt/authからはここで定義したルートにログイン・ログアウトのアクセスを行うようにします。

api.phpに記載しても構わないとは思いますが、その場合はエンドポイントが/api/login,logoutになることに注意しましょう。

ルートをLaravel Sanctumで保護する

Laravel Sanctumでガードしたいルートにauth:sanctumミドルウェアを適用します。

// routes/api.php
Route::group(['middleware' => ['auth:sanctum']], function () {

    Route::get('/user', function (Request $request) {
        return $request->user();
    });

Route::groupで適用したいルートをまるごと囲ってしまうと安心です。

テストユーザーの作成・マイグレーション

最後にテストユーザーを作成しておきましょう。

シーダーとは、マイグレーション時に自動的にレコードを作成する機能のことです。あらかじめシーダーを作成しておくと、テストデータなどをマイグレーション時に作成することができます。

database\seeders\DatabaseSeeder.phpを編集し、テストユーザーを作成するシーダーを定義します。

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        DB::table('users')->insert([
            'name' => 't',
            'email' => 't@localhost',
            'password' => bcrypt('password'),
        ]);
    }
}

マイグレーション時に–seedオプションをつけると上のプログラムが実行され、自動的にユーザーが作成されるようになります。

マイグレーションを実行し、必要なテーブルを作成します。

php artisan migrate:fresh --seed 
Dropped all tables successfully.
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (26.50ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (21.52ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (32.99ms)
Migrating: 2019_12_14_000001_create_personal_access_tokens_table
Migrated:  2019_12_14_000001_create_personal_access_tokens_table (42.32ms)
Database seeding completed successfully.

テーブルが作成されたら、バックエンドは完成です！長かった～

なお、データベースへの接続設定については、あらかじめマイグレーション前に行っておいてください。MySQLなどのセットアップがお済みでない方はSQLiteをデータベースとして利用することができます。

LaravelでSQLiteデータベースを使ってみよう | アールエフェクト

SQLiteを利用すると簡単にデータベースを作成することができます。Laravelでアプリケーションを作成するためには、データベースを構築する必要があります。Laravelの初期設定ではmysqlデータベースが前提になっています。テストなど...

reffect.co.jp

ちなみにアクセストークン関係のテーブルもマイグレーションされていますが、SPA認証の場合は不要となります。マイグレーションファイルを削除しても構いませんが、後からトークン認証も実装するかもしれないため、一応残しておきました。

以上でバックエンドの準備は完了です。ローカルサーバーを起動して、フロントエンドからのアクセスを待機させておきましょう。

php artisan serve

Nuxt.jsのセットアップ

次にNuxt.jsによるフロントエンドを作成していきます。第2回「フロントエンド編」につづきます。

Laravelとnuxt/authでSPA認証！ログイン機能を実装しよう！（第2回 フロントエンド編）

Laravel とフロントエンドフレームワーク「Nuxt.js」を使い、SPA認証（ログイン機能）をできるだけかんたんに実装する方法を紹介していきます。

takabus.com

2022.07.29

SanctumってLaravel 6でも使えるの？

Laravel Sanctamは、Laravel 7からデフォルトでインストールされるようになりましたが、Laravel 6でも使用できます。

Laravel Sanctamをインストール！

Composerからインストールします。

composer require laravel/sanctum

必要なファイル群を生成します。

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"

マイグレーションして、必要なテーブルを作成します。

php artisan migrate

なお、トークン認証を使用しない場合はマイグレーションしなくても構いません。

ミドルウェアへの登録

SPA認証をしたいときは、APIのルートにLaravel Sanctamのミドルウェアを適用します。以下のようにapp/Http/Kernel.phpに追記します。

 'api' => [
    \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
    'throttle:api',
    \Illuminate\Routing\Middleware\SubstituteBindings::class,
],

あとはLaravel 7以上と同じくSPA認証を実装できます。

まとめ

Laravel 6でもLaravel Sanctamをインストールすることができました。

Laravel Sanctamを使うと、かんたんにSPA認証を実装することができます。Laravel 6でも使えるのはありがたいですね！

リバースプロキシ下では正しいアドレスを返してくれない！

assetヘルパーはアセットへのフルパスを返してくれるヘルパー関数です。おもにbladeテンプレート内でjsやcssを読み込むのに使用されます。

しかし、リバースプロキシ下では、assetヘルパーが正しいアドレスを返してくれないことがあります。

たとえば、bladeでasset("/js/main.js")としている状態でローカルサーバー（http://localhost:8080）を立ち上げたときのことを考えてみましょう。

assetヘルパーはLaravelがホスティングされているURLを自動的に認識し、アセットへのフルパスを返してくれます。今回の例ではhttp://localhost:8080でホスティングされているため、assetヘルパーはhttp://localhost:8080/js/main.jsと出力することになります。想定通りの挙動です。

しかし、これをそのままリバースプロキシで外部公開してしまったらどうでしょうか。

例えば、https://hogehoge.comへホスティングしてしまうと、本来読み込まれるはずのjsのフルパスはhttps://hogehoge.com/js/main.jsとなるはずです。しかし、ローカルサーバーで動作しているLaravelは、アクセスがリバースプロキシ経由であるかどうかは認識できませんので、ローカル環境同様、http://localhost:8080/js/main.jsを返してしまいます。結果、アセットが正しく読み込まれないという問題が起こってしまうのです。

.envにASSET_URLを追加して解決！

こういうときは.envファイルにASSET_URLを追加します。

.envにASSET_URLが設定されていると、assetヘルパーは設定されたURLをもとにアセットへのフルパスを返してくれるようになります。

ASSET_URL=https://hogehoge.com/fuga

{{asset("/js/main.js")}}
↓
https://hogehoge.com/fuga/js/main.jsと返すようになる

リバースプロキシで公開したいときは、ASSET_URLに公開するURLを指定しておきます。すると正しいフルパスが出力されるようになり、リバースプロキシ下でも正しくリソースが読み込まれるようになります。

まとめ

リバースプロキシ下でassetヘルパーが正しく動作しないときの解決法を紹介しました。

なお、サブディレクトリ公開やバーチャルホストでの公開時は、Laravelは自動的に公開されているURLを認識してくれますので、当記事での方法は不要です。リバースプロキシでローカルサーバーのLaravelを公開したいとき、ご参考にしていただければ幸いです。