Laravel Authのパスワードリセット機能をカスタマイズする

1 はじめに
2 準備
- 2.1 Auth
- 2.2 mailhog
3 ユーザー登録とログイン
4 パスワードリセットのカスタマイズ
5 リセット画面
6 さいごに
7 おすすめ書籍

はじめに

こんにちは。Laravelには標準の認証機能Authが用意されており、その中にはパスワードリセット機能が最初から含まれています。メールアドレスを入力するとメールが送信され、メール本文内のURLにアクセスしてパスワードを再設定できるという、様々なサイトにある機能です。

今回はこのパスワードリセット機能を一部カスタマイズすることで、Laravelの認証機能のカスタマイズ方法を追っていきたいと思います。

環境はmacOS High Sierra+Laradockで構築し、LaravelのバージョンはLTS版の最新である5.5を使用します。また、Docker本体のインストール完了、およびLaradockで環境構築しWelcomeページが表示できていることが前提となります。

準備

Auth

ログイン画面等のviewは、Laravel標準で提供されているauthを利用します。PHPが動作しているコンテナにログインし、artisanコマンドを実行することで自動生成できます。

# コンテナにログイン
$ docker-compose exec --user=laradock workspace bash
# authインストール
$ php artisan make:auth Authentication scaffolding generated successfully.

# コンテナにログイン

$ docker-compose exec --user=laradock workspace bash

# authインストール

$ php artisan make:auth Authentication scaffolding generated successfully.

mailhog

mailhogは簡易SMTPサーバの一種で、mailhogに対してPHPやRubyなどからメール送信処理を実行することで、実際のアドレスに送信することなく、メールの内容を確認することができます。 mailhogのコンテナはLaradockに含まれており、build&upで簡単に立ち上げることができます。

$ docker-compose build --no-cache mailhog<br>Building mailhog
Step 1/4 : FROM mailhog/mailhog
...
...
Successfully built f1f39fbd927d Successfully tagged
laradock_mailhog:latest
$ docker-compose up -d mailhog
Recreating laradock_mailhog_1 ... done

$ docker-compose build --no-cache mailhog<br>Building mailhog

Step 1/4 : FROM mailhog/mailhog

...

Successfully built f1f39fbd927d Successfully tagged

laradock_mailhog:latest

$ docker-compose up -d mailhog

Recreating laradock_mailhog_1 ... done

立ち上げた後はlocalhost:8025にアクセスすると、mailhogに送信したメールをブラウザから確認できます。なお、mailhogの設定はdocker-compose.ymlに記述されており、デフォルトでは下記のようになっています。この場合、1025番ポートでメールを待ち受けており、8025番ポートでブラウザからのアクセスを待ち受けているという意味になります。

mailhog:
   build: ./mailhog
   ports:
     - "1025:1025"
     - "8025:8025"
   networks:
     - frontend
     - backend

mailhog:

build: ./mailhog

ports:

- "1025:1025"

- "8025:8025"

networks:

- frontend

- backend

続いてLaravelのメール送信設定を変更します。Laravelプロジェクトのトップディレクトリにある.envを編集し、デフォルトから以下のように変更します。

MAIL_DRIVER=smtp
MAIL_HOST=smtp.mailtrap.io → mailhog
MAIL_PORT=2525 → 1025
MAIL_USERNAME=null → user
MAIL_PASSWORD=null → password
MAIL_ENCRYPTION=null

MAIL_DRIVER=smtp

MAIL_HOST=smtp.mailtrap.io → mailhog

MAIL_PORT=2525 → 1025

MAIL_USERNAME=null → user

MAIL_PASSWORD=null → password

MAIL_ENCRYPTION=null

これでLaravelから送信されるメールをmailhogでキャッチし、実際にメールアドレスに送信することなくメール内容を確認できるようになりました。

ユーザー登録とログイン

localhost/registerにアクセスすると登録フォームが表示されます。任意のアカウント名・メールアドレス・パスワードを入れて登録を行い、ログイン完了した旨が表示されたら、画面右上のリンクからログアウトしましょう。

パスワードリセットのカスタマイズ

http://localhost/loginで「Forgot Your Password?」をクリックすると、メールアドレス入力画面が表示されます。デフォルトではここで入力したメールアドレスにパスワードリセット用のURLが送信されますが、今回はアカウント名でリセットを行うようにカスタマイズしてみます。

ルーティング確認

「どのURLにアクセスしたらどのアクションメソッドが呼ばれるか」を確認するにはいくつか方法がありますが、ここではartisanコマンドを使います。

$ php artisan route:list
+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+
| Domain | Method   | URI                    | Name             | Action                                                                 | Middleware   |
+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+
|        | GET|HEAD | /                      |                  | Closure                                                                | web          |
|        | GET|HEAD | api/user               |                  | Closure                                                                | api,auth:api |
|        | GET|HEAD | home                   | home             | App\Http\Controllers\HomeController@index                              | web,auth     |
|        | GET|HEAD | login                  | login            | App\Http\Controllers\Auth\LoginController@showLoginForm                | web,guest    |
|        | POST     | login                  |                  | App\Http\Controllers\Auth\LoginController@login                        | web,guest    |
|        | POST     | logout                 | logout           | App\Http\Controllers\Auth\LoginController@logout                       | web          |
|        | POST     | password/email         | password.email   | App\Http\Controllers\Auth\ForgotPasswordController@sendResetLinkEmail  | web,guest    |
|        | GET|HEAD | password/reset         | password.request | App\Http\Controllers\Auth\ForgotPasswordController@showLinkRequestForm | web,guest    |
|        | POST     | password/reset         |                  | App\Http\Controllers\Auth\ResetPasswordController@reset                | web,guest    |
|        | GET|HEAD | password/reset/{token} | password.reset   | App\Http\Controllers\Auth\ResetPasswordController@showResetForm        | web,guest    |
|        | GET|HEAD | register               | register         | App\Http\Controllers\Auth\RegisterController@showRegistrationForm      | web,guest    |
|        | POST     | register               |                  | App\Http\Controllers\Auth\RegisterController@register                  | web,guest    |
+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+

$ php artisan route:list

+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+

+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+

| | GET|HEAD | / | | Closure | web |

| | GET|HEAD | password/reset/{token} | password.reset | App\Http\Controllers\Auth\ResetPasswordController@showResetForm | web,guest |

+--------+----------+------------------------+------------------+------------------------------------------------------------------------+--------------+

メールアドレス入力画面のURLはpassword/resetですので、対応しているのは下記の行となります。

GET|HEAD | password/reset | password.request | App\Http\Controllers\Auth\ForgotPasswordController@showLinkRequestForm

ところがForgotPasswordControllerを開いてみるとshowLinkRequestFormは存在せず、実際の処理はSendsPasswordResetEmailsのshowLinkRequestFormで行われています。これでauth/passwords/email.blade.phpを呼び出しているのが分かりました。viewのファイル名を変えたり、viewを呼び出す以外の処理を行いたい場合はForgotPasswordControllerクラスでshowLinkRequestFormをオーバーライドすることでカスタマイズが可能です。

trait SendsPasswordResetEmails {
     public function showLinkRequestForm()
     {
         return view('auth.passwords.email');
     }
...
...

trait SendsPasswordResetEmails {

public function showLinkRequestForm()

{

return view('auth.passwords.email');

}

...

view編集

auth/passwords/email.blade.phpを以下のように編集し、メールアドレスではなくアカウント名を入れるようにします。

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">
    <label for="name" class="col-md-4 control-label">Input your name.</label>

    <div class="col-md-6">
        <input id="name" type="text" class="form-control" name="name" value="{{ old('name') }}" required="">

        @if ($errors->has('name'))
            <span class="help-block">
                <strong>{{ $errors->first('name') }}</strong>
            </span>
        @endif
    </div>
</div>

<div class="form-group{{ $errors->has('name') ? ' has-error' : '' }}">

<label for="name" class="col-md-4 control-label">Input your name.</label>

@if ($errors->has('name'))

<strong>{{ $errors->first('name') }}</strong>

</span>

@endif

</div>

認証処理の編集

viewの編集が完了したら、ユーザー登録したときのアカウント名を入力して「Send Password Reset Link」を…と言いたいところですが、本来はメールアドレスの入力を想定した機能ですので、アカウント名を入力しても動作せず、エラー扱いになってしまいます。認証部分の処理もカスタマイズしましょう。

auth/passwords/email.blade.phpのform要素を見ると、送信先はpassword/emailが指定されています。

<form class="form-horizontal" method="POST" action="{{ route('password.email') }}">

1	<form class="form-horizontal" method="POST" action="{{ route('password.email') }}">

先述のphp artisan route:listで該当するのは以下の行です。

POST | password/email | password.email | App\Http\Controllers\Auth\ForgotPasswordController@sendResetLinkEmail

ここでもForgotPasswordControllerに該当のメソッドは存在せず、実体はSendsPasswordResetEmailsに実装されています。

public function sendResetLinkEmail(Request $request)
{
     $this-&gt;validateEmail($request);
     $response = $this-&gt;broker()-&gt;sendResetLink(
         $request-&gt;only('email')
     );
     return $response == Password::RESET_LINK_SENT
                 ? $this-&gt;sendResetLinkResponse($response)
                 : $this-&gt;sendResetLinkFailedResponse($request, $response);
}

protected function validateEmail(Request $request)
{
     $this-&gt;validate($request, ['email' =&gt; 'required|email']);
}

public function sendResetLinkEmail(Request $request)

{

$this->validateEmail($request);

$response = $this->broker()->sendResetLink(

$request->only('email')

);

return $response == Password::RESET_LINK_SENT

? $this->sendResetLinkResponse($response)

: $this->sendResetLinkFailedResponse($request, $response);

}

protected function validateEmail(Request $request)

{

$this->validate($request, ['email' => 'required|email']);

}

今回はこれらのメソッドをForgotPasswordControllerクラスの中でオーバーライドして、下記のように実装します。

class ForgotPasswordController extends Controller
{
... ...
     public function sendResetLinkEmail(Request $request)
     {
         $this-&gt;validateUserName($request);
         $response = $this-&gt;broker()-&gt;sendResetLink(
             $request-&gt;only('name')
         );
         return $response == Password::RESET_LINK_SENT
             ? $this-&gt;sendResetLinkResponse($response)
             : $this-&gt;sendResetLinkFailedResponse($request, $response);
     }

     protected function validateUserName(Request $request)
     {
         $this-&gt;validate($request, ['name' =&gt; 'required']);
     }
}

class ForgotPasswordController extends Controller

{

... ...

public function sendResetLinkEmail(Request $request)

{

$this->validateUserName($request);

$response = $this->broker()->sendResetLink(

$request->only('name')

);

return $response == Password::RESET_LINK_SENT

? $this->sendResetLinkResponse($response)

: $this->sendResetLinkFailedResponse($request, $response);

}

protected function validateUserName(Request $request)

{

$this->validate($request, ['name' => 'required']);

}

ここまで完了したらhttp://localhost/password/resetでアカウント名を入力し「Send Password Reset Link」ボタンを押しましょう。成功すれば「We have e-mailed your password reset link!」と表示されて、登録時に入力したメールアドレスにメールが送信…は実際には行われません。 localhost:8025にアクセスすると、webメールサービスの受信画面のようなページが表示され、ここで送信内容が確認できます。

以下2つは前述のmailhogの一覧・詳細画面です。通常のSMTPサーバであればLaravelからメールアドレス宛に送信が行われますが、mailhogがメールをキャッチし、外部への送信を行わずSMTPサーバ内に留めて、このように表示しています。

リセット画面

メールに表示されている「Reset Password」のリンクにアクセスすると、新しいパスワードを入力する画面が表示されます。ここでのルーティング情報は下記のとおりです。

GET|HEAD | password/reset/{token} | password.reset | App\Http\Controllers\Auth\ResetPasswordController@showResetForm

今までと同じくResetPasswordControllerにshowResetFormメソッドは無く、実装はResetsPasswordsで行われています。

trait ResetsPasswords
{
...
...
     public function showResetForm(Request $request, $token = null)
     {
         return view('auth.passwords.reset')-&gt;with(
             ['token' =&gt; $token, 'email' =&gt; $request-&gt;email]
         );
     }

trait ResetsPasswords

{

...

public function showResetForm(Request $request, $token = null)

{

return view('auth.passwords.reset')->with(

['token' => $token, 'email' => $request->email]

);

}

このメソッドをカスタマイズする際も、先ほどのsendResetLinkEmailと同パターンで、ここではResetPasswordControllerでオーバーライドすることになります。実際のリセット処理や、リセット完了後のページ転送処理もResetsPasswordsに実装されており、それぞれカスタマイズが可能です。

さいごに

いかがでしたでしょうか。1機能の条件をひとつ変えるだけで随分面倒な…と感じるかもしれませんが、実装方法を細かく指定することはフレームワーク(枠組み)の意図するところであり、こうした学習コストと引き換えに、メソッドの命名や処理の遷移が実装者に左右されなくなるというメリットを得られるのだと思います。

日	月	火	水	木	金	土
« 11月				1月 »
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30	31

Laravel Authのパスワードリセット機能をカスタマイズする

はじめに

準備

Auth

mailhog

ユーザー登録とログイン

パスワードリセットのカスタマイズ

ルーティング確認

view編集

認証処理の編集

リセット画面

さいごに

おすすめ書籍

フォロー

アプリ情報

Web版MyCoach