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という軽量のフレームワークがインストールされるのでモーダルやドロップダウンメニューといった機能であれば比較的容易に実装することが可能です。
簡易的に認証機能を実装することができますが完全につかいこなすためにはJavaScriptフレームワークのAlpine.jsとCSSフレームワークのTailwindcssを新たに学習する必要があります。
目次
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
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
.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の認証機能でどのようなファイルが追加されたかはlaravel/breezeインストール後に作成されるvendor¥laravel¥breeze¥src¥Consoleの下にあるInstallCommand.phpファイルを見ると確認することができます。
例えば追加されたルーティングを知りたい場合はweb.phpファイルに新たにルーティングの行が追加されているので、routesディレクトリの下にあるauth.phpファイルを見ることで確認できます。
Route::get('/', function () {
return view('welcome');
});
Route::get('/dashboard', function () {
return view('dashboard');
})->middleware(['auth'])->name('dashboard');
require __DIR__.'/auth.php'; //これが追加
認証に関するコントローラーはHttp¥Controllers¥Authの下に保存されています。
ユーザ登録画面やログイン画面を変更したい場合は、resources¥viewsの下にあるauth、componentsディレクトリのBladeファイルを更新することで行うことができます。
またユーザ登録時のバリデーションの内容などはapp¥Actions¥Fortifyフォルダの中のファイルで確認することができます。
ログイン画面の日本語化
ユーザログイン画面はデフォルトでは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でログインできることを確認してください。
