Laravel8から標準となった、認証機能のパッケージ「Jetstream」を試してみました。
▼公式サイト
https://jetstream.laravel.com/1.x/introduction.html
環境
以下の環境で実装しています。
2021年11月に実装した時点の情報になります。
- PHP:8.0.12
- Laravel:8.70.21
テンプレート
Livewire、Inertiaという2種類のテンプレートが用意されています。
- LivewireはBladeを利用する人向け
- InertiaはVueを利用する人向け
今回は、Livewireを利用します。
Jetstream(Livewire)のインストール
Composerを利用してインストールします。
$ composer require laravel/jetstream
$ php artisan jetstream:install livewire
$ php artisan migrate
$ npm install && npm run dev
以下のようにLaravelの初期画面の右上に、「Log in」「Register」のリンクが追加されました。
![Jetstreamのインストール後](https://specially198.com/wp-content/uploads/2021/11/jetstream-install-1024x525.png)
![ログイン](https://specially198.com/wp-content/uploads/2021/11/log-in.png)
![ユーザー登録](https://specially198.com/wp-content/uploads/2021/11/register-980x1024.png)
Jetstreamの日本語化
Jetstreamを日本語化します。
app.phpの変更
まず、環境設定を日本語に変更します。
「config/app.php」を修正します。
'timezone' => 'Asia/Tokyo',
(中略)
'locale' => 'ja',
(中略)
'faker_locale' => 'ja_JP',
日本語ファイルの追加
Laravelには多言語化の仕組みがあるので、「resources/lang」に日本語用のファイルを追加します。
今回は「Laravel-Lang」を利用します。
Composerを利用してインストールします。
$ composer require laravel-lang/lang:~10.1 --dev
$ cp -r ./vendor/laravel-lang/lang/locales/ja ./resources/lang/
$ mv ./resources/lang/ja/ja.json ./resources/lang/ja.json
validation.phpには、attributesが定義されていないので、カスタマイズします。
'attributes' => [
'name' => 'ユーザー名',
'email' => 'メールアドレス',
'password' => 'パスワード',
],
メール認証を有効化する
Jetstreamでは、ユーザー登録時などのメール認証がデフォルトでは無効になっているため、有効化します。「config/fortify.php」を変更します。
emailVerificationがコメントアウトされているので、コメントを除去します。
'features' => [
Features::registration(),
Features::resetPasswords(),
Features::emailVerification(),
Features::updateProfileInformation(),
Features::updatePasswords(),
Features::twoFactorAuthentication([
'confirmPassword' => true,
]),
],
また、Userモデルを修正します。
「app/Models/User.php」を変更します。
MustVerifyEmailをインプリメントします。
class User extends Authenticatable implements MustVerifyEmail
画面を確認する
以上で実装は完了で、画面を確認します。
ユーザー登録
![ユーザー登録](https://specially198.com/wp-content/uploads/2021/11/register-1-952x1024.png)
ユーザーを登録すると、以下のように認証用メールを送信した旨の画面が表示されます。
ちょっと日本語がおかしい部分がありますね。
![ユーザー登録完了](https://specially198.com/wp-content/uploads/2021/11/register-complete.png)
以下のようなメールが送信されます。
メールは一応、日本語化されていますが、全体的に内容は見直した方が良いですね。
![ユーザー認証メール](https://specially198.com/wp-content/uploads/2021/11/user-authentication-email-1024x616.png)
ダッシュボード
上記のメールから、メールアドレスの確認をクリックすると、登録が完了し、ログインした状態でダッシュボードが表示されます。
![ダッシュボード](https://specially198.com/wp-content/uploads/2021/12/dashboard-1024x640.png)
プロフィール
右上のリンクからプロフィール画面に遷移します。
二段階認証やブラウザセッションの管理機能まで存在しています。
![プロフィール](https://specially198.com/wp-content/uploads/2021/12/profile-902x1024.png)
ログイン
![ログイン](https://specially198.com/wp-content/uploads/2021/12/login.png)
パスワード再設定
ログイン画面にて「パスワードを忘れた方はこちら」のリンクをクリックすると、パスワード再設定画面に遷移します。
![パスワード再設定](https://specially198.com/wp-content/uploads/2021/12/reset-password.png)
メールを送信すると、メッセージが表示されます。
![パスワード再設定](https://specially198.com/wp-content/uploads/2021/12/reset-password-sent.png)
以下のようなメールが送信されます。
![パスワード再設定メール](https://specially198.com/wp-content/uploads/2021/12/reset-password-mail-1024x571.png)
メールからパスワード再設定をクリックすると、パスワードを再設定することができます。
![パスワード再設定](https://specially198.com/wp-content/uploads/2021/12/reset-password-1.png)
パスワードを再設定すると、ログイン画面に戻ります。
![パスワード再設定完了](https://specially198.com/wp-content/uploads/2021/12/reset-password-completed.png)
まとめ
ここまで、ユーザー登録からログインなど一通りの機能が、ほぼプログラミングせずに、実装することができました。
これだけ簡単に実装できると、非常に楽で良いですね。