プログラミング学習やフリーランスエンジニア情報を発信していきます。現役フリーランスエンジニア2人で運営してます!

  1. バックエンド

Laravelのメール確認機能を設定してみよう!

最終更新日:2019/04/02

本記事では、Laravelのメール確認機能の設定方法をわかりやすく解説していきます。

以下の記事の続きです。まだ読んでいない方はぜひご一読ください!

初心者の方でもLaravelの動作環境を簡単に作れるWINDIIオリジナルのソースコードを用意したので、実際に動かして学ぶとより深く理解できるようになります!

以下の記事を参考にご活用ください。

Laravelのメール確認機能ってなに?

Laravelの認証機能を有効化すると、メールアドレスでユーザ登録できる画面を簡単に作ることができます。しかし、多くのアプリケーションでは、ユーザが入力したメールアドレスが本物かどうかチェックする必要があります。Laravelでは、メール確認機能を簡単に設定できるようになっているので、本記事でご紹介していきたいと思います!

Laravelの認証機能を有効化する

すでに設定済みの方は飛ばしてください!

Laravelでは、一つコマンドを打つだけで、ユーザ登録機能、ログイン機能、パスワードリセット機能が全て手に入ります!

以下のコマンドを実行してください。

php artisan make:auth

実行すると、右上にLogin、Registerボタンが出現して、ログイン、新規会員登録機能が自動で設定されます!(前回の記事で詳しく解説してます。)

ログイン画面

新規登録画面

パスワードリセット画面

ユーザ(User)モデルを変更する

まず、Userモデルを変更する必要があります。と言っても、簡単で以下のように

implements MustVerifyEmail

を追加するだけです!

App\User.php

class User extends Authenticatable implements MustVerifyEmail
{
    use Notifiable;

    // ...
}

マイグレーションを実行する

マイグレーションをまだ実行しておらず、usersテーブルを作成していない場合、以下のコマンドでマイグレーションを実行しましょう!

php artisan migrate

ルートを設定する

次にルートの設定を行います。

routes/web.php を開くと以下のような記述があると思います。

Auth::routes();

これを修正して以下のようにしましょう。

Auth::routes(['verify' => true]);

これでメール確認に必要なルートが追加されます!

ミドルウェアを設定する

メールアドレス確認済みのユーザーのみアクセスを許す機能に対して、保護をかけます。
ここでは、メールアドレス確認済みのユーザしか新規投稿できないように設定してみましょう。

app/http/Controllers/ArticleController.phpを開いて以下のように設定しましょう。

app/http/Controllers/ArticleController.php

public function __construct()
{
    $this->middleware('verified')->only('create');
}

新規投稿画面(localhost:8000/articles/create)にアクセスすると以下のような画面に飛ばされます。

メールボックス(localhost:8025)を開いてリンクをクリックすると、以下のようにメールが送られます!

送られてきたメールを開くと以下のようになっています。

Verify Email Adressをクリックすると、メールアドレスの確認が行われます!

ビューを変更する

もちろんメール確認用画面は自由にカスタマイズできます。

aviews/auth/verify.blade.php を開いてみると以下のようになっています。

@extends('layouts.app')

@section('content')
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">{{ __('Verify Your Email Address') }}</div>

                <div class="card-body">
                    @if (session('resent'))
                        <div class="alert alert-success" role="alert">
                            {{ __('A fresh verification link has been sent to your email address.') }}
                        </div>
                    @endif

                    {{ __('Before proceeding, please check your email for a verification link.') }}
                    {{ __('If you did not receive the email') }}, <a href="{{ route('verification.resend') }}">{{ __('click here to request another') }}</a>.
                </div>
            </div>
        </div>
    </div>
</div>
@endsection

これをお好きなように変更してください!以上です🎉

次回はシーディングについて解説します!

The following two tabs change content below.

riri

25歳。 Twitter:りリー@ryudoi1 フリーランスとして働きながら、WINDII(ウィンディ)ではテックメディア事業や、受託事業を行なっています! フリーランスになるまでの過程は こちら

関連記事

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

PAGE TOP