Laravel開発、Auth機能を拡充する【2】パスワードリセット機能を補完する
前回の記事で、パスワードリセットの基本機能は設定完了しました。
しかし、見た目等は全く変更できていないので修正していきます。
前回の記事はこちら
今回の目的
パスワードリセットフォームデザインを整える
送付メール本文を日本語化する
なぜやるか
機能としては実装できているが、見た目の考慮がないため修正を行う。
やりたいこと
- パスワードリセットフォームにアクセスしたい
- フォームデザインをなおしたい
- フォームメッセージを日本語化したい
- メールの内容を日本語にしたい
やったこと
- リセットフォームにアクセスできるようにする
- リセットフォームを編集して、ログインページ等とデザインを合わせる
- メッセージを日本語化する
- 送付されるメールを日本語にする
- メールテンプレートをオーバーライドする
実施内容
フォームを修正する
リセットフォームアクセスの導線を作成する
リセットフォームにアクセスするリンクが設定されていないので、まずこれを設定します。
ログイン時にパスワードを忘れている…といった状況を想定しログインページにリンクを設定しました。
フォームを編集する
次に、下記フォームを修正します。
- リセットするアカウントのパスワード入力フォーム
- 新パスワード設定フォーム
作成済みのAuthページと同じフォーマットで自作します。
…ということで、ログインページのフォームをコピーしました。
ここから、細部を修正してきます。
formのアクションをパスワードリセット用に設定します。
# ~/resources/views/auth/passwords/email.blade.php
<form action="{{ route('password.email') }}" method="post">
新パスワード設定フォームも同様にfromアクションを設定します。
# ~/resources/views/auth/passwords/reset.blade.php
<form action="{{ route('password.update') }}" method="post">
トークンの確認が必要なので設定をいれておきます。
これで再度メールアドレスを入力してメールが受け取れれば完了です。
メッセージを日本語化する
メール送付完了時に、"メールを送付した"旨のメッセージがでます…が英語表記です。
こちらを日本語化します。
日本語化にはこちらを参考にさせて頂きました、ありがとうございます。
こちらのファイルを適用して日本語化を実施しました。
言語設定のjaフォルダに4つの日本語化ファイルがあるので、ダウンロードしたファイルで上書きします。うち1ファイルだけ以前に設定変更していたので、残りの3ファイルについてファイルを上書しました。
ここまでで、画面表示は以下の様になりました。
# ログイン画面（パスワード再設定リンク）
# パスワード再設定画面
# メールアドレス送信後
# メールからフォームを展開
フォーム設定は以上で完了です。
メールを日本語化する
メール本文を日本語で表示させる手順
送信されるメールの内容が全て英語表記だったので、日本語化します。
設定手順はこちらを参考にさせて頂きました、ありがとうございます。
Laravelで通知するための手段やメッセージをカスタムする仕組みがあるので、こちらでメールに対しての通知設定を変更することで日本語化を実施します。
カスタム通知設定を作成する
メールによる通知を行うわけですが、この通知設定をカスタムすることで日本語化していきます。
設定ファイルをまずは作成。
$ php artisan make:notification CustomResetPassword
作成されたファイルはこちらです。
# ~/app/Notifications/CustomResetPassword.php
<?php
namespace App\Notifications;
use Illuminate\Bus\Queueable;
use Illuminate\Notifications\Notification;
use Illuminate\Contracts\Queue\ShouldQueue;
use Illuminate\Notifications\Messages\MailMessage;
class CustomResetPassword extends Notification
{
use Queueable;
/**
* Create a new notification instance.
*
* @return void
*/
public function __construct()
{
//
}
/**
* Get the notification's delivery channels.
*
* @param mixed $notifiable
* @return array
*/
public function via($notifiable)
{
return ['mail'];
}
/**
* Get the mail representation of the notification.
*
* @param mixed $notifiable
* @return \Illuminate\Notifications\Messages\MailMessage
*/
public function toMail($notifiable)
{
return (new MailMessage)
->line('The introduction to the notification.')
->action('Notification Action', url('/'))
->line('Thank you for using our application!');
}
/**
* Get the array representation of the notification.
*
* @param mixed $notifiable
* @return array
*/
public function toArray($notifiable)
{
return [
//
];
}
}
日本語化の為の設定を追加していきます。
トークンの受け取り設定を追加。
# ~/app/Notifications/CustomResetPassword.php
public function __construct($token)
{
$this->token = $token;
}
メッセージの日本語化。
# ~/app/Notifications/CustomResetPassword.php
public function toMail($notifiable)
{
return (new MailMessage)
->subject('パスワード再設定')
->line('下のボタンをクリックしてパスワードを再設定してください。')
->action('パスワード再設定',
url(config('app.url').route('password.reset', $this->token, false)))
->line('もし心当たりがない場合は、本メッセージは破棄してください。');
}
urlはトークン指定が必要となるので、先程の設定を呼び出す形でurl内に設定しています。
設定完了後は、適用する必要があるので、モデルに設定します。
# ~/app/User.php
use App\Notifications\CustomResetPassword;
public function sendPasswordResetNotification($token)
{
$this->notify(new CustomResetPassword($token));
}
デフォルトのメール送信設定を上書することで、この設定を扱う様にします。
メールを送付して確認する
メールを送付して確認します。
先程設定した日本語が反映されました。
しかしまだ全てではありません。
テンプレート部分の標記が英語のままですので、こちらも修正します。
テンプレートをオーバーライドする
先程の参考サイトにこちらについても修正方法がありましたので、実際に実装してみます。
オーバーライドするためのファイルを生成します。
$ php artisan vendor:publish --tag=laravel-notifications
Copied Directory [/vendor/laravel/framework/src/Illuminate/Notifications/resources/views] To [/resources/views/vendor/notifications]
Publishing complete.
メール用のテンプレートファイルがresourceフォルダ内に生成されます、これを編集することでテンプレートを変更できるというものです。
このコマンドが扱える様になると、他のファイルもいろいろ編集できそうね。
ファイルの内容を確認します。
# ~resources/views/vendor/notifications/email.blade.php
@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
# @lang('Hello!')
@endif
@endif
{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}
@endforeach
{{-- Action Button --}}
@isset($actionText)
<?php
switch ($level) {
case 'success':
case 'error':
$color = $level;
break;
default:
$color = 'primary';
}
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset
{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}
@endforeach
{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
@lang('Regards'),<br>{{ config('app.name') }}
@endif
{{-- Subcopy --}}
@isset($actionText)
@slot('subcopy')
@lang(
"If you’re having trouble clicking the \":actionText\" button, copy and paste the URL below\n".
'into your web browser: [:actionURL](:actionURL)',
[
'actionText' => $actionText,
'actionURL' => $actionUrl,
]
)
@endslot
@endisset
@endcomponent
ここから、英語文出力箇所を修正します。
# ~resources/views/vendor/notifications/email.blade.php
@component('mail::message')
{{-- Greeting --}}
@if (! empty($greeting))
# {{ $greeting }}
@else
@if ($level === 'error')
# @lang('Whoops!')
@else
こんにちは。
@endif
@endif
{{-- Intro Lines --}}
@foreach ($introLines as $line)
{{ $line }}
@endforeach
{{-- Action Button --}}
@isset($actionText)
<?php
switch ($level) {
case 'success':
case 'error':
$color = $level;
break;
default:
$color = 'primary';
}
?>
@component('mail::button', ['url' => $actionUrl, 'color' => $color])
{{ $actionText }}
@endcomponent
@endisset
{{-- Outro Lines --}}
@foreach ($outroLines as $line)
{{ $line }}
@endforeach
{{-- Salutation --}}
@if (! empty($salutation))
{{ $salutation }}
@else
{{ config('app.name') }}
@endif
{{-- Subcopy --}}
@isset($actionText)
@slot('subcopy')
{{ $actionText }}ボタンが利用できない場合は、以下のURLをコピー＆ペーストしてブラウザから直接アクセスしてください。
[{{ $actionUrl }}]({!! $actionUrl !!})
@endslot
@endisset
@endcomponent
メールを送信して確認します。
メールが日本語になりました。
以上で、パスワードリセットの一連手順の実装が完了しました。
Auth利用による設定として、新規登録時のメールアドレス確認を実装します。
