Laravel8で新登場 Laravel Breezeでシンプル認証機能

Laravel8ではJetStream機能が追加され認証機能を利用するためにはInertia.jsかLivewireを選択してインストールを行う必要があります。Laravel7までlaravel/uiパッケージをインストールして利用していた人にとってはなぜJetSrteamを使わなければならないのかと不満もあったと思います。Laravel8がリリースされてから暫くするとそのような声に答えてか新たにLaravel Breezeパッケージが登場しLivewire, Inertiaを使うことなく簡単に認証機能が実装できるようになりました。またCSSにはtailwindcssが利用されています。

JetStreamは多機能でInertis.jsやLivewireのことを考えないといけないのでLaravelの入門者にとってはハードルが高かったのですが、このパッケージのおかげでこれまでのLaravel7のlaravel/uiのようにシンプルな方法で認証機能を利用することができます。laravel/uiのようにJavaScriptのフレームワークVue.js、Reactを一緒にインストールされないのでなぜという疑問もありますがAlpine.jsという軽量のフレームワークがインストールされるのでモーダルやドロップダウンメニューといった機能であれば比較的容易に実装することが可能です。

Laravelのインストール

Laravelのインストールを行ってください。JetStreamをインストールする際の–jetオプションは必要ありません。laravelコマンドが実行できる環境を前提にしておりnode、npmがインストールされている必要があります。

インストールはlaravelコマンドを利用して実行しますが、composer コマンドでも可能です。laravel_breezeというプロジェクト名をつけていますが名前は任意なので好きな名前をつけて実行してください。


 % laravel new laravel_breeze


 % composer create-project --prefer-dist laravel/laravel laravel_breeze

Laravel Breezeパッケージのインストール

Laravelインストール完了後、Laravel/Breezeパッケージのインストールを行います。


 % cd laravel_breeze
 % composer require laravel/breeze

パッケージが完了したら、php artisan breeze:installコマンドを実行してください。


 % php artisan breeze:install
Breeze scaffolding installed successfully.
Please execute the "npm install && npm run dev" command to build your assets.

実行するとnpm install && npm run devを実行するようにメッセージが表示されるのでnpmコマンドを実行してください。


 % npm install && npm run dev

以上で設定は完了です。php artisan serveコマンドで開発サーバを起動すると右上にregisterとloginのリンクが表示されます。


 % php artisan serve
Starting Laravel development server: http://127.0.0.1:8000

Breezeパッケージをインストールし設定を行わないと下記の画像のように画面右上に認証機能(Login, Register）へのリンクは表示されません。

Loginのリンクをクリックすると下記のログイン画面が表示されます。

右上のRegisterリンクをクリックするとユーザの登録画面が表示されます。

インストール直後でもユーザ登録画面でユーザ情報の入力を行うことができるため試しに行ってみるとSQLSTATE[HY000] [2002] Connection refused (SQL: select count(*) as aggregate from `users` where `email` = test@test.comのエラーが発生します。原因はデータベースとの接続設定が行われていないためです。ユーザを登録するにはデータベースの作成と接続設定が必須となります。

データベースの設定(SQLite）

動作確認なので簡易的に利用できるSQLiteデータベースを作成します。SQLite用のデータベースファイルを作成します。


 % touch database/database.sqlite

データベースの設定ファイルであるconfig/database.phpにsqliteで利用するデータベースがdatabase.sqliteであることが記述されていることからdatabaseフォルダにdatabase.sqliteという名前のファイルを作成しています。

.envファイルを開いてDB_CONNECTIONという環境変数をデフォルトのmysqlからsqliteに変更してください。DB_で始まるその他の変数は削除してください。


DB_CONNECTION=sqlite
DB_HOST=127.0.0.1 //削除
DB_PORT=3306 //削除
DB_DATABASE=laravel_breeze　//削除
DB_USERNAME=root //削除
DB_PASSWORD= //削除

これでSQLiteデータベースの設定は完了です。テーブルを作成するためphp artisan migrateコマンドを実行してください。下記のようにメッセージが表示されたら正常にテーブルの作成は行われています。


 % php artisan migrate
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated:  2014_10_12_000000_create_users_table (4.19ms)
Migrating: 2014_10_12_100000_create_password_resets_table
Migrated:  2014_10_12_100000_create_password_resets_table (1.64ms)
Migrating: 2019_08_19_000000_create_failed_jobs_table
Migrated:  2019_08_19_000000_create_failed_jobs_table (1.91ms)

再度registerにアクセスしてユーザの登録を行ってみてください。ユーザの登録が行われるとそのまま/dashboardにリダイレクトされるので下記の画面が表示されます。

これだけでLaravelの認証機能を実装することができました。右上にある登録したユーザ名をクリックしてください。ドロップダウンメニューが表示されます。これはAlpine.jsによって実装されています。

Breezeによる認証機能はここまでの処理で利用することができるようになりました。BreezeをインストールすることでLaravelにどのようなことが追加されたのか下記で説明を行っていきます。

認証の設定を理解

追加されたルーティング

Breeze後に追加されたルーティングはルーティングファイルweb.phpと同じフォルダのapp¥routes¥auth.phpファイルに記述されています。


<?php

use App\Http\Controllers\Auth\AuthenticatedSessionController;
use App\Http\Controllers\Auth\ConfirmablePasswordController;
use App\Http\Controllers\Auth\EmailVerificationNotificationController;
use App\Http\Controllers\Auth\EmailVerificationPromptController;
use App\Http\Controllers\Auth\NewPasswordController;
use App\Http\Controllers\Auth\PasswordResetLinkController;
use App\Http\Controllers\Auth\RegisteredUserController;
use App\Http\Controllers\Auth\VerifyEmailController;
use Illuminate\Support\Facades\Route;

Route::get('/register', [RegisteredUserController::class, 'create'])
                ->middleware('guest')
                ->name('register');

Route::post('/register', [RegisteredUserController::class, 'store'])
                ->middleware('guest');
//略

Laravelに設定されているルーティング情報を一括で確認したい場合はphp artisan route:listコマンドを実行することで確認することができます。

auth.phpファイルで追加された内容を確認することができます。

php artisan breeze:installを実行する前のルーティング情報は下記の通りです。Breezeにより複数のルーティングが追加されたことが比較によりはっきりわかります。


 % php artisan route:list
+--------+----------+----------+------+---------+------------+
| Domain | Method   | URI      | Name | Action  | Middleware |
+--------+----------+----------+------+---------+------------+
|        | GET|HEAD | /        |      | Closure | web        |
|        | GET|HEAD | api/user |      | Closure | api        |
|        |          |          |      |         | auth:api   |
+--------+----------+----------+------+---------+------------+

ユーザ登録画面

トップ画面に表示されているRegisterのリンクをクリックすると表示されるユーザ登録画面がどのような流れで表示されているのかを確認していきます。

リンクをクリックすると/registerへのアクセスが行われます。auth.phpファイルまたはphp artisan route:listの結果からpp\Http\Controllers\Auth\RegisteredUserController.phpファイルのcreateメソッドが実行されていることがわかります。


class RegisteredUserController extends Controller
{

    public function create()
    {
        return view('auth.register');
    }
    //略

createメソッドではviewファイルであるresource¥views¥auth¥register.blade.phpファイルを表示しています。ファイルではLaravel Componentとtailwindcssを使って入力フォームが記述されています。


<x-guest-layout>
    <x-auth-card>
        <x-slot name="logo">
            <a href="/">
                <x-application-logo class="w-20 h-20 fill-current text-gray-500" />
            </a>
        </x-slot>

        <!-- Validation Errors -->
        <x-auth-validation-errors class="mb-4" :errors="$errors" />

        <form method="POST" action="{{ route('register') }}">
            @csrf

            <!-- Name -->
            <div>
                <x-label for="name" :value="__('Name')" />

                <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
            </div>
//略

ユーザのログアウト

ユーザのログアウトはユーザのログイン後に右上に表示される名前をクリックすると表示されるLog outをクリックするとドロップダウンメニューが表示されるLog outをクリックと実行できます。

ログアウトが行われるとトップページに戻ります。再度”/dashboard”にアクセスするとログイン画面が表示されます。このことからログアウトにより、ログインした時に与えられた許可情報がすべて削除されることがわかります。

ログアウトの処理も確認しておきましょう。

ログアウトのドロップダウンメニューはviews¥layouts¥navigation.blade.phpファイルの中に記述されています。


<!-- Authentication -->
<form method="POST" action="{{ route('logout') }}">
    @csrf

    <x-dropdown-link :href="route('logout')"
            onclick="event.preventDefault();
                        this.closest('form').submit();">
        {{ __('Log out') }}
    </x-dropdown-link>
</form>

route(‘logout’)へPOSTリクエストが送信されていることがわかります。route(‘logout’)関数の引数に設定されているloginはnameメソッドでルーティングにつかられた名前なのでapp¥routes¥auth.phpファイルで確認することができます。auth.phpからAuthenticatedSessionController.phpファイルのdestoryメソッドが実行されることがわかります。


Route::post('/logout', [AuthenticatedSessionController::class, 'destroy'])
                ->middleware('auth')
                ->name('logout');

destroyメソッドの中ではログアウト処理とセッションの処理が行われ、/(ルート)にリダイレクトされる処理になっています。


public function destroy(Request $request)
{
    Auth::guard('web')->logout();

    $request->session()->invalidate();

    $request->session()->regenerateToken();

    return redirect('/');
}

ユーザのログイン

ログインを行いたい場合は、右上のLoginリンクをクリックするかmiddlewareでauthが設定されているページ(/dashboard等)に直接アクセスすることで自動でログイン画面にリダイレクトされます。

ログイン画面ではメールアドレスとパスワードを入れる必要があります。Loginボタンを押すと入力した値のチェックが行われます。

もし、入力した値に間違いがある場合は、エラーメッセージが表示されます。These credentials do not match our recodes.(登録されている情報と異なります)

またログインに何度も失敗してしまうと一定時間ログインが行えなくなります。

Too many login attempts. Please try again in 48seconds.(ログイン試行回数が多いので48秒後に再度実行してください）

ログインの処理がどのように行われているか確認していきましょう。Loginのリンクをクリックすると/loginページへ移動します。

/loginページにアクセスが行われるとapp¥routes¥auth.phpファイルからApp\Http\Controllers\Auth\AuthenticatedSessionControllerのcreateメソッドが実行されてることがわかります。


Route::get('/login', [AuthenticatedSessionController::class, 'create'])
                ->middleware('guest')
                ->name('login');

AuthenticatedSessionControllerのcreateメソッドではviewファイルであるresource¥views¥auth¥login.blade.phpファイルを表示しています。


public function create()
{
    return view('auth.login');
}

ユーザ登録画面のregister.blade.phpファイルと同様にLaravel Componentとtailwindcssを使ってログインの入力フォームが記述されています。


<form method="POST" action="{{ route('login') }}">

ログインフォームの送信先は/loginになっているのでapp¥routes¥auth.phpファイルからApp\Http\Controllers\Auth\AuthenticatedSessionControllerのstoreメソッドが実行されてることがわかります。


Route::post('/login', [AuthenticatedSessionController::class, 'store'])
                ->middleware('guest');

storeメソッドではLoginRequestクラスのauthenticateメソッドが実行されていることがわかります。


public function store(LoginRequest $request)
{
    $request->authenticate();

    $request->session()->regenerate();

    return redirect()->intended(RouteServiceProvider::HOME);
}

LoginRequestクラスはApp\Http\Requests\Authフォルダの中に保存されておりFormRequestを継承しています。FormRequestはカスタムリクエストクラスでrulesメソッドを記述することでバリデーションを実行することができます。バリデーションはstoreメソッドでtype-hintでLoginRequestを設定することで実行されます。storeメソッドの中にバリデーションの処理を記述する必要はありません。

FormRequestはphp artisan make:request クラス名で作成することができます。


class LoginRequest extends FormRequest
{
    public function authorize()
    {
        return true;
    }

    public function rules()
    {
        return [
            'email' => 'required|string|email',
            'password' => 'required|string',
        ];
    }
//略

rulesメソッドで設定されているバリデーションを通過するとLoginRequest.phpファイル内のauthenticateメソッドの中でログイン処理が行われます。


public function authenticate()
{
    $this->ensureIsNotRateLimited();

    if (! Auth::attempt($this->only('email', 'password'), $this->filled('remember'))) {
        RateLimiter::>($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => __('auth.failed'),
        ]);
    }

    RateLimiter::clear($this->throttleKey());
}

ensureIsNotRateLimitedメソッドではログインが失敗した回数を記録し5回を超えると一定時間ログインが行えなくするための処理が記述されています。RateLimiterのtooManyAttemptsの引数の5と設定されている値を変更すると入力間違いで一定時間ログインができなくなるまでの回数を多くすることも少なくすることもできます。


public function ensureIsNotRateLimited()
{
    if (! RateLimiter::tooManyAttempts($this->throttleKey(), 5)) {
        return;
    }

    event(new Lockout($this));

    $seconds = RateLimiter::availableIn($this->throttleKey());

    throw ValidationException::withMessages([
        'email' => trans('auth.throttle', [
            'seconds' => $seconds,
            'minutes' => ceil($seconds / 60),
        ]),
    ]);
}

デフォルトではログインが複数回失敗して次のログインまでの時間は60に設定していますがRateLimiterのhitメソッドの第2引数に数字を設定することで時間を短くしたり長くしたりすることが可能です。


RateLimiter::hit($this->throttleKey());

LoginRequest.phpのhitメソッドには第2引数には何も設定されていませんが、Illuminate\Cache\RateLimiterのhitメソッド見ること第2引数に秒数を設定できることが確認できます。デフォルト値は60に設定されています。


public function hit($key, $decaySeconds = 60)
{
    $this->cache->add(
        $key.':timer', $this->availableAt($decaySeconds), $decaySeconds
    );

    $added = $this->cache->add($key, 0, $decaySeconds);

    $hits = (int) $this->cache->increment($key);

    if (! $added && $hits == 1) {
        $this->cache->put($key, 1, $decaySeconds);
    }

    return $hits;
}

ユーザのログイン処理はauthenticateメソッドの中にあるAuth::attempt()で行われます。入力したemailとpasswordとデータベースに保存されているemailとpasswordが一致すればログインは成功です。


public function authenticate()
{
    $this->ensureIsNotRateLimited();

    if (! Auth::attempt($this->only('email', 'password'), $this->filled('remember'))) {
        RateLimiter::>($this->throttleKey());

        throw ValidationException::withMessages([
            'email' => __('auth.failed'),
        ]);
    }

    RateLimiter::clear($this->throttleKey());
}

Auth::attemptがこのファイルを見ただけではどこで実行されているのかわかりにくいですが最終的にはIlluminate\Auth\SessionGuardのattemptメソッドが実行されます。SessionGuardが実行される流れを理解するためにはFacadeの理解が必要になります。/comment]

ログイン画面の日本語化

ユーザログイン画面はデフォルトではLoginボタンは英語で日本語ではありません。日本語化したい場合の方法を確認していきます。

ログイン画面に関するviewファイルresoucecs¥views¥authの下に保存されているlogin.blade.phpファイルです。Loginボタンの要素のみ確認すると下記のように記述されています。LOGINという文字列の変わりに{{ __(‘Log in’) }}と記述されています。


<x-button class="ml-3">
    {{ __('Log in') }}
</x-button>

ログインという文字に変更するため直接下記のように変更することができます。


<x-button class="ml-3">
    ログイン
</x-button>

ブラウザで確認すると更新した箇所が日本語になっていることを確認することができます。

再度login.blade.phpファイルの中身を確認するとLoginだけではなくpasswordもForgot your password等の文字にも{{ __(‘XXXXX’) }}で囲まれています。{ __(‘XXXXX’) }}で囲まれた文字列は直接文字を上書きしなくても設定ファイルを作成することで英語から日本語へ変更することができます。日本語ではなく中国語やフランス後にも変更することができます。Laravel Breezeにも多言語化機能が備わっています。

config¥app.phpファイルのlocale設定がデフォルトでは英語のenに設定されてますが日本語を表すjaに変更します。


'locale' => 'ja',

jaに変更後、resources¥langの下にja.jsonのJsonファイルを作成します。このファイルによって{ __(‘XXXXX’) }}のXXXXXに入力されている英語に対応した日本語を設定していきます。


{
  "Log in": "ログイン",
  "Password": "パスワード",
  "Email": "メールアドレス",
  "Forgot your password?": "パスワードをお忘れですか？",
  "Remember me": "パスワードを保存する"
}

設定後に再度ログイン画面を確認します。ja.jsonに設定した日本語が表示されれば設定ファイルによる日本語化は正常に動作しています。

ログイン画面ではなくユーザ登録画面も日本語かしたい場合は以下のようにja.jsonファイルに記述することで実現可能です。


{
  "Log in": "ログイン",
  "Password": "パスワード",
  "Email": "メールアドレス",
  "Forgot your password?": "パスワードをお忘れですか？",
  "Remember me": "パスワードを保存する",
  "Name": "名前",
  "Confirm Password":"パスワードの確認",
  "Already registered?":"登録済ですか？",
  "Register":"登録"
}

ログインIDをEmailからNameに変更

Breezeのログインではデフォルトではメールアドレスとパスワードを利用してログインを行うことができます。会社によっては個人のメールアドレスは持たない、社員は個別のメールアドレスを持っているが派遣社員や外注、パートやバイトの人はメールアドレスを持っていないということもあります。そのような場合にメールアドレスではなくユーザ名によってログインすることも可能です。

Http¥Controllers¥Authフォルダに下にログイン認証の処理を行うAuthenticatedSessionController.phpファイルがあります。実際の処理はLoginRequest.phpファイルに記述されているのでApp\Http\Requests\Auth\LoginRequestファイルを開きます。ファイルの各所にemailという文字列を確認することができます。例えばログイン時のバリデーションルールは下記のように設定されています。ルールではemailは必須、文字列、emailのXX@XXのような形になっているかチェックを行っています。


public function rules()
{
    return [
        'email' => 'required|string|email',
        'password' => 'required|string',
    ];
}

emailではなくusersテーブルのname列を利用してログインを行うように変更を行うのでrulesメソッドの中身をemailからnameに変更します。nameではバリデーションルールのemailは必要ではないので削除してください。


public function rules()
{
    return [
        'name' => 'required|string',
        'password' => 'required|string',
    ];
}

※authenticate、ensureIsNotRateLimited、throttleKeyメソッドの中のemailをnameに変更してください。合計4箇所変更を行います。

ログイン画面のviewファイルであるresources¥views¥authのlogin.blade.phpファイルの更新も必要となります。typeにemailが設定されているのでブラウザの機能により、XXX@XXXのemailの形式でない場合にエラーが表示されログイン処理が行われません。


<!-- Email Address -->
<div>
    <x-label for="email" :value="__('Email')" />

    <x-input id="email" class="block mt-1 w-full" type="email" name="email" :value="old('email')" required autofocus />
</div>

emailをnameに変更しています。typeはemailからtextへと変更。x-labelのvalueのコロンを削除してログイン名と設定しています。


<!-- Email Address -->
<div>
    <x-label for="name" value="ログイン名" />

    <x-input id="name" class="block mt-1 w-full" type="text" name="name" :value="old('name')" required autofocus />
</div>

設定後はログイン画面がEmailからユーザ名に変更されます。ユーザ登録時に指定したnameでログインできることを確認してください。

Laravel8で新登場 Laravel Breezeでの認証機能を完全理解