Laravel8のJetstreamで、ユーザー登録・ログインを実装する

Laravel8から標準となった、認証機能のパッケージ「Jetstream」を試してみました。

▼公式サイト
https://jetstream.laravel.com/1.x/introduction.html

環境
テンプレート
Jetstream（Livewire）のインストール
Jetstreamの日本語化
1. app.phpの変更
2. 日本語ファイルの追加
メール認証を有効化する
画面を確認する
まとめ

環境

以下の環境で実装しています。
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の日本語化

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

画面を確認する

以上で実装は完了で、画面を確認します。

ユーザー登録

ユーザーを登録すると、以下のように認証用メールを送信した旨の画面が表示されます。
ちょっと日本語がおかしい部分がありますね。

以下のようなメールが送信されます。
メールは一応、日本語化されていますが、全体的に内容は見直した方が良いですね。

ダッシュボード

上記のメールから、メールアドレスの確認をクリックすると、登録が完了し、ログインした状態でダッシュボードが表示されます。

プロフィール

右上のリンクからプロフィール画面に遷移します。
二段階認証やブラウザセッションの管理機能まで存在しています。

パスワード再設定

ログイン画面にて「パスワードを忘れた方はこちら」のリンクをクリックすると、パスワード再設定画面に遷移します。

メールを送信すると、メッセージが表示されます。

以下のようなメールが送信されます。

メールからパスワード再設定をクリックすると、パスワードを再設定することができます。

パスワードを再設定すると、ログイン画面に戻ります。

まとめ

ここまで、ユーザー登録からログインなど一通りの機能が、ほぼプログラミングせずに、実装することができました。

これだけ簡単に実装できると、非常に楽で良いですね。