Laravel9/8 パスワードリセット機能の実装

Laravel Breezeを導入することで、ログインやアカウントの登録、パスワードのリセットができる状態になりますが、今回はLaravel Breeze導入後のパスワードリセット機能をカスタマイズする方法について解説していきます。

Laravel9で検証していますが、8のドキュメントを見ながら実装したので、どちらでも大丈夫だと思います。

※Laravel Breeze導入済みであることを前提としています。
※mailhogを使用して検証を行っています。

まずは下記のURLで表示されるビューの英語を日本語化していきます。
http://localhost:8000/forgot-password

./resources/views/auth/forgot-password.blade.phpに定義されている下記英語のメッセージ表示を日本語へ変更します。

<div class="mb-4 text-sm text-gray-600">
    {{ __('Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.') }}
</div>

<div class="flex items-center justify-end mt-4">
    <x-button>
        {{ __('Email Password Reset Link') }}
    </x-button>
</div>

./config/app.phpのロケールがjaになっていることを確認します。

'locale' => 'ja',

./langディレクトリにja.jsonという名前でファイルを追加します。

localeをjaに変更したことで、__ヘルパ関数を使用した際にja.jsonから翻訳文字列を取得できるようになります。

詳しくは日本語に翻訳されたドキュメントに書かれているので、こちらを参考にしてください。
https://readouble.com/laravel/8.x/ja/localization.html
※「翻訳文字列の取得」の箇所です。

ファイルを追加したら、下記のように定義して、英語メッセージを日本語に置き換えます。

{
    "Forgot your password? No problem. Just let us know your email address and we will email you a password reset link that will allow you to choose a new one.": "登録時のメールアドレスを入力してください",
    "Email Password Reset Link": "パスワードリセットメールを送信"
}

次に、ユーザーアクション後に表示されるメッセージも英語から日本語に変更します。

./langにjaディレクトリを作成し、その中に./lang/en/passwords.phpファイルをコピーしたものを格納してください。

下記のように配置できていればOKです。

lang
├── en
│   ├── auth.php
│   ├── pagination.php
│   ├── passwords.php
│   └── validation.php
├── en.json
├── ja
│   └── passwords.php
└── ja.json

./lang/ja/passwords.phpを下記のように編集します。

    'reset' => 'パスワードのリセットが完了しました',
    'sent' => 'パスワードリセット用リンクのメールを送信しました',
    'throttled' => 'しばらく経ってからお試しください',
    'token' => 'トークンが無効のため、あらためてパスワードリセットを実行してください',
    'user' => "登録されていないメールアドレスです",

ここまできたら、登録されていないメールアドレスを入力して反映されているか確認してみましょう。
今まで設定してきた日本語が適用されていればOKです。

次に、通知クラスを追加します。

Laravel Breezeで実装されているソースコードを追うと分かりますが、この通知クラスを利用してパスワードリセットメールを送信しているため、同じように下記コマンドで通知クラスを追加します。
※ResetPasswordNotificationの部分は任意のクラス名を指定してください。

php artisan make:notification ResetPasswordNotification

./app/Notificationsの中に指定したクラスファイルが追加されているはずです。

次に、./app/Models/User.phpに下記内容を追記します。

use App\Notifications\ResetPasswordNotification;

    public function sendPasswordResetNotification($token)
    {
        $url = url("reset-password/${token}");
        $this->notify(new ResetPasswordNotification($url));
    }

次に、先ほど追加した通知クラス内(ここでは./app/Notifications/ResetPasswordNotification)のtoMailメソッドを下記のように修正します。

    // コンストラクタでurlを格納します
    public function __construct($url)
    {
        $this->url = $url;
    }

    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject(config('app.name'). ' パスワードリセットURLの送付')
                    ->greeting('いつもご利用頂きありがとうございます')
                    ->action('パスワードリセット', $this->url)
                    ->line('こちらからパスワードリセットを行ってください');
    }

パスワードリセット画面でメールアドレスを入力し、実際にメールが送られてくることを確認します。

http://localhost:8025にアクセスして、受信したメールを確認します。

設定した内容が適用されていればOKです。

メールテンプレートをデフォルトから変更したい場合、下記のようにviewメソッドをコールすることで実現できます。
下記の場合./resources/views/emails/list_password.blade.phpファイルを追加することになります。

    public function toMail($notifiable)
    {
        return (new MailMessage)
                    ->subject(config('app.name'). ' パスワードリセットURLの送付')
                    ->greeting('いつもご利用頂きありがとうございます')
                    ->action('パスワードリセット', $this->url)
                    ->line('こちらからパスワードリセットを行ってください')
                    ->view('emails.liset_password');
    }

メールテンプレートの設定について詳しく知りたい方は、こちらも日本語に翻訳されたドキュメントに書かれているので参考にしてください。
https://readouble.com/laravel/8.x/ja/notifications.html
※「その他のメール通知フォーマットオプション」の箇所です。

エラーが出てメールが受信できない場合は.envと./config/mail.phpの設定を見直してみてください。
下記のようになっていれば問題ないと思います。

MAIL_MAILER=smtp
MAIL_HOST=localhost
MAIL_PORT=1025
MAIL_USERNAME=null
MAIL_PASSWORD=null
MAIL_ENCRYPTION=null
MAIL_FROM_ADDRESS=hoge@example.com
MAIL_FROM_NAME="${APP_NAME}"

        'smtp' => [
            'transport' => 'smtp',
            'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
            'port' => env('MAIL_PORT', 587),
            'encryption' => env('MAIL_ENCRYPTION', 'tls'),
            'username' => env('MAIL_USERNAME'),
            'password' => env('MAIL_PASSWORD'),
            'timeout' => null,
        ],

受信したメールのリンクからパスワードリセット画面へアクセスします。

ボタンがRESET PASSWORDになっているので、ここも日本語に変更します。

パスワードリセット画面のビューは./resources/views/auth/reset-password.blade.phpなので、ボタンの定義を確認します。

            <div class="flex items-center justify-end mt-4">
                <x-button>
                    {{ __('Reset Password') }}
                </x-button>
            </div>

‘Reset Password’の翻訳文字列を./lang/ja.jsonに定義します。

"Reset Password": "パスワードリセット"

※ちなみに’Reset Password’と表記されているのに画面表示上ではなぜ全て大文字になっているのか？気になって調べたところ、buttonコンポーネント内でTailwind CSS のclassであるuppercaseが定義されていたからでした。

バリデーションエラーメッセージを確認するためPasswordに”aaa”Confirm Passwordに”bbb”等適当な短い文字列を入力して、エラー表示させてみます。

下記のような英語メッセージが出るので、ここも日本語に変更していきます。

The password confirmation does not match.
The password must be at least 8 characters.

./lang/en/validation.phpを./lang/ja/にコピーします。

コピーしたら、34行目あたりの’confirmed’と96行目あたりの’min’ => [‘string’]を下記のように書き換えます。

    'confirmed' => ':attribute が一致しません',

    'min' => [
        'numeric' => 'The :attribute must be at least :min.',
        'file' => 'The :attribute must be at least :min kilobytes.',
        'string' => ':attribute は :min 文字以上必要です',
        'array' => 'The :attribute must have at least :min items.',
    ],

再度Passwordに”aaa”Confirm Passwordに”bbb”等適当な短い文字列を入力して、エラーメッセージが日本語になっていることを確認します。

最後に、正常にパスワードリセットができることを確認できれば完了です。

参考になりましたら、記事を拡散して頂くと嬉しいです😊

独身エンジニアブログ

独身貴族を満喫しているアラフォーの雑記ブログ

Laravel9/8 パスワードリセット機能の実装

コメントを残すコメントをキャンセル

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル