Fippiyのプログラム学習内容アウトプットBlog

日々の学習内容をアウトプットして振り返りを実施する。

Laravel開発、Auth機能を拡充する【1】パスワードリセット機能を実装する

ユーザー情報設定の機能を順次設定しています。

今回は、Auth機能として設定してる内容で残っているメール送信を伴う設定を実装していくことにしました。 

新規登録時のメール確認パスワードリセット時のメール確認という2つの機能がAuth機能設定時に一緒に実装されています。

まず、ここからパスワードリセット時の機能について実装することにしました。

今回の目的

パスワードリセット設定を有効にし、リセット可能にする 

なぜやるか

  • Auth機能の未実装ファイルを使えるようにしておく
  • パスワード失念時の救済手段を整える

やりたいこと

  • Auth機能未使用ファイルをなくしたい
  • メール送信機能を使える状態にしたい

やったこと

  • Auth機能の未実装部はなにか確認する
  • メール送信機能を実装
  • Authフォームから実際にメールを送信する
  • Userテーブルの未使用カラムの用途を確認

実施内容

Auth機能の未実装部はなにか確認する

ログインユーザーに対して所有書籍の管理を行う、といった流れがあったのでログイン機能を実装しましたが、最初に登録をすると、ユーザーの情報はまったく編集できない状態でした。

これを解消する為に、ユーザー周りの情報を扱う設定を順次準備していきます。

まずは、Auth機能設定時に追加されているファイルをあらためて確認しました。

この中で全く手をつけていなかったファイルがあります。

f:id:Fippiy:20190419114329p:plain

Authビューファイル

それが、 email,reset,verifyの3つのファイルです。

これらを使用して実装できるAuth機能としては、新規登録時とパスワードリセット時のメールアドレスの確認機能です。

設定したメールアドレスに実際にメールを送付して確認する機能ですね。

これらの機能を実装を実装することにしました。

まずパスワードリセット機能を先に実装します。

 

メール送信機能を実装する

コンフィグファイルを設定する

設定手順についてはこちらを参考にさせて頂きました、ありがとうございます。

qiita.com

今回はgmailアカウントを利用して設定することにしました。

メール送信に伴う設定を環境変数に追加しました。

# ~/.env

MAIL_DRIVER=smtp
MAIL_HOST=smtp.gmail.com
MAIL_PORT=587
MAIL_USERNAME=xxxxxx@gmail.com
MAIL_PASSWORD=xxxxxxxxxxxxxxxc
MAIL_ENCRYPTION=tls
MAIL_FROM_ADDRESS=xxxxxx@gmail.com
MAIL_FROM_NAME=checkemail

ユーザーネーム、パスワードは個人の物を設定しています。

 

そしてメール設定で扱える様にします。

# ~config/mail.php


<?php

return [
'driver' => env('MAIL_DRIVER', 'smtp'),
'host' => env('MAIL_HOST', 'smtp.mailgun.org'),
'port' => env('MAIL_PORT', 587),
'from' => [
'address' => env('MAIL_FROM_ADDRESS', null),
'name' => env('MAIL_FROM_NAME', null),
],
'encryption' => env('MAIL_ENCRYPTION', 'tls'),
'username' => env('MAIL_USERNAME'),
'password' => env('MAIL_PASSWORD'),
'sendmail' => '/usr/sbin/sendmail -bs',
'markdown' => [
'theme' => 'default',
'paths' => [
resource_path('views/vendor/mail'),
],
],
'log_channel' => env('MAIL_LOG_CHANNEL'),
];

これで設定したメールアドレスを利用して、メール送信ができるようになるので確認。

 

コマンドラインツールでメール送信を確認する

まずはキャッシュクリア。

$ php artisan config:cache

 

そしてコマンドでメール送信テストをします。

$ php artisan tinker

Psy Shell v0.9.9 (PHP 7.1.23 — cli) by Justin Hileman

>>> Mail::raw('test mail',function($message) {$message->to('xxxxxx@gmail')->subject('test');});

=> null

 

$ php artisan tinkerというコマンドを実行するとコマンドラインツールが扱えます。

ここでコントローラー等に記述しているコードをいれて試すことができます。

use App\User;

User::all();

とすると、ユーザーの全情報がでるといった感じです。

 

話がそれましたが、コマンドラインツール上でメールを送信できるかテストしているのが

Mail::raw('test mail',function($message) {$message->to('xxxxxx@gmail')->subject('test');});

という内容です。

これで結果がnullと表示されますが、後で実際にメールが送信されてきているので確認します。

 

フォームからメールを送信できるようにする 

フォームから実際にリセットできるかためす

メールが送信できるのを確認したので、フォームからメールアドレスを入力して実際にメールが受け取れるかを確認することにしました。

 

手順を追って確認してきます。

1.実際に使用しているメールアドレスでユーザーを作成する。

2.リセットフォームにアクセスする。(リンクを設定していないのでURL直接入力)

# フォーム ~/password/reset

f:id:Fippiy:20190418155847p:plain

リセットフォーム

Auth機能で作成済みのフォームです、標準設定スタイルシートがないので、形は崩れています。

フォームにメールアドレスを入力して送信します。

 

3.送信完了表示

f:id:Fippiy:20190418160026p:plain

リセットフォーム(送信後

フォーム上ではメールが送信されたことになっています。

 

4.メールの確認

f:id:Fippiy:20190418160101p:plain

パスワードリセットメール

メールが正常に受信されていました。

Reset Passwordをクリックすることでパスワード再設定画面にします。

 

5.リセットフォームの表示

f:id:Fippiy:20190418160142p:plain

リセット実行

ページがありませんと出ました。しかし、まずここまでは動作しているようです。

 

エラー原因を調査する

初めはメールアドレス送信設定後になにか設定がまだあると思っていたので失敗するという想定をしていました。

しかし、既に設定は終わっているようで、NotFoundを解決し、残りの動作確認がとれれば、実装が完了するようです。

そのためにも、NotFoundを解決する必要が有ります。

そもそも設定を既に間違えている可能性もありいろいろ調べてみました。

 

そこで目に入ったのは、メールに設定されていたリセットフォームのURL。

http://localhost/password/reset/

と記載されていました。

現在のローカル環境で作成しているページのURLはというと

http://127.0.0.1:8000/

…そもそも参照している場所が違ってました、これは当然つながりません…。

メールのURLのドメインを直接入力で変更してアクセスしてみました。

f:id:Fippiy:20190418162210p:plain

パスワード変更画面

アクセスできました。

URLが違っていただけでした…。

 

設定を修正する

特に設定をいじった覚えがないのにURLの違いについて調査してみると…

# ~/.env

しっかり設定されてました…。

APP_URL=http://127.0.0.1:8000

これでもう一度メール確認して、メールアドレスに記載のアドレスが修正できました。

 

リセット時の動作を確認する

リセット設定をしている中でトークンというものが登場していました。

ここで、前々から気になっていた物があったので確認してみました。

 

その気になっていた物というのは、Userテーブルで未使用のカラムです。

remember_tokenというカラムが実はありました。

メール送信時にDBを確認してみると…。

f:id:Fippiy:20190418224700p:plain

DBカラム

トークンのカラムに値がはいっています。

メール送信時にメールアドレスの確認と共にこのトークンを利用して同一ユーザーの確認をしているようです。この為に用意されていたんですね…。

 

以上ここまでで、フォームからメールを送信してパスワードを新たに設定するというところまで完了です。

 

リセットはできるようになりましたが、フォームの表示が崩れたままであったり英語標記のままですので、次にこれらを設定変更していきます。

fippiy.hatenablog.jp