0. ことのなりゆき
laravelの勉強がてらとあるアプリを個人開発中。
その中で、ユーザ登録をするときにただユーザ名やパスワードを入力してハイ終わりではなくメールアドレスを入力させてそのメールアドレスの認証をするみたいなちょっと凝ったことをしたくなったのでやってみました。機能的にはいろんなサイトでよく見る当たり前のものですがメモも兼ねて記事にまとめようと思います。
1. 概要
ざっくりしたフローは以下の通り。
書き方はだいぶ適当だけど処理の流れだけでも伝わるかな・・・
2. フロー詳細
1.で示したフローを、もう少し具体的にしていきます。ここで決めた仕様をもとに実装します。数字はシーケンス図と対応。
- 1. ユーザ名・メールアドレス・パスワードを入力
- まずはユーザからの入力がないと始まりません。フロントでユーザの入力を受け取ります。
- 2. トークンを発行
- 一意の文字列を発行します。また、有効期限も設定したいので作成時刻から30分後の時間を求めます。
- 3. ユーザ情報・トークンデータを保存
- ユーザから受け取ったユーザデータとサーバで作成したトークンデータ をDBへ保存します。トークンは最初の認証が終われば不要になりますので、それぞれ別のテーブルを用意します。ユーザテーブルにはメールアドレスが認証されているかのフラグとなるカラムを、トークンテーブルにはトークンが認証されているかのフラグとなるカラムを用意しそれぞれfalseを入れて保存します。
- 4. トークンを含んだURLが書かれたメール送信
- 1.で入力されたメールアドレス宛にメールを送信します。メールには認証ページのURLにトークンをクエリパラメータとして持たせたものを記載しておき、このURLをクリックするよう促すメッセージも書いておきます。
- 5. URLクリック
- これは完全にユーザの仕事なのでアプリ側でやることはなし。
- 6. ユーザから送信されたトークンを検索
- 5. でユーザがトークンを持って認証ページにアクセスしてきたらそのトークンでDBを検索します。
- 7. トークン情報
- 検索結果がDBから返ってきます。ここには、そのトークンがどのメールアドレスに対して発行されたものかや有効期限も含まれています。
- 8. トークンチェック
- 7. で返ってきたデータからメールアドレスの認証を行います。今回は以下の項目についてチェックしていきます。
・トークン（文字列）が正しいか（DBに存在するか）
・有効期限が切れていないか
・すでに認証されたトークンでないか
- 9. 認証処理
- 8. のチェックがOKだった場合、ユーザテーブルのメールアドレス認証フラグおよびトークンテーブルのトークン認証フラグをtrueにします。
- 10. 各ページへリダイレクト
- 8.のチェックがOKだった場合、そのユーザはログイン状態にしてユーザトップページ（Twitterでいうプロフィール）へ、チェックがNGだった場合はトップページにそれぞれリダイレクトさせます。また、認証NGだった場合に関しては何がダメだったのかをユーザに知らせるためのメッセージも表示します。
・・・結構ボリュームあるな
3. 実装
さて、いよいよ実装します。コードは主要な部分を抜粋&多少アレンジして載せていきます。
1の処理(処理してないけど)
<form action="{{route('user.create')}}" method="POST">
@csrf
<label class="row form-label">ユーザ名</label><input class="row form-input" type="text" name="name">
<label class="row form-label">メールアドレス</label><input class="row form-input" type="text" name="email">
<label class="row form-label">パスワード</label><input class="row form-input" type="password" name="password">
<div class="row">
<input class="form-button" type="submit" value="登録">
</div>
</form>
2~4の処理
public function create(Request $request)
{
//3. ユーザデータを保存
$userService = new UserService();
$userService->create($request);
//2. トークンを発行
$tokenService = new TokenService();
$tokenService->create($request);
//4. メールを送信
$email = $request->email;
//メールに記載する認証用URlを組み立てている(認証用ページURL+トークン)。
$url = request()->getSchemeAndHttpHost(). "/user/register?token=". $tokenService->getToken();
Mail::to($email)
->send(new AuthMail($url));
//メール送信完了画面へリダイレクト
return redirect('/join')->with('email',$email);
}
public function create(Request $request)
{
$email = $request->email;
$now = new DateTime();
$now->format("Y-m-d H:i:s");
//有効期限を計算(30分とした)
$expire_at = $now->modify('+30 minutes');
$token = new Token();
//トークンを生成
$token = uniqid('', true);
//3. トークンをDBに保存
$token->create([
'token' => $token,
'email' => $email,
'expire_at' => $expire_at
]);
}
トークン生成には、phpのuniqidを使います。変に自前で文字列をランダムに生成するメソッド実装するよりもphp様の用意してくださった便利なメソッドを使いましょう。
メール送信用のクラス。laravelのMailaleクラスを継承しています。
<?php
namespace App\Mail;
use Illuminate\Bus\Queueable;
use Illuminate\Mail\Mailable;
use Illuminate\Queue\SerializesModels;
class AuthMail extends Mailable
{
use Queueable, SerializesModels;
protected $url;
public function __construct($url)
{
$this->url = $url;
}
//メール送信で使うビュー、タイトル、ビューに渡す認証用URLを設定
public function build()
{
return $this->view('mail.tmpRegist')
->subject('【App】仮登録が完了しました')
->with(['url'=>$this->url]);
}
}
メール用のビューも一応。
仮登録が完了しました。以下のURLへアクセスして登録を完了させてください。
<a href="{{$url}}">{{$url}}</a>
AuthMailのbuild()の中のwithで渡したurlがこのビュー内の$urlになります。
6~10の処理
$token = $request->token;
//6~8. トークン検索からチェックまでを行う
$authResult = $tokenService->matchToken($token);
if( $authResult == "OK"){
//9. 認証処理(ユーザテーブルのメールアドレス認証フラグ立てる)
$userService->changeEmailFlag($email);
$email = $tokenService->getEmailByToken($token);
$id = $userService->getIdByEmail($email);
//10. ログイン状態にしてユーザトップページへリダイレクト
$request->session()->put('logind', 'true');
$request->session()->put('id', $id);
return redirect('/user/'.$id);
}else if($authResult == "ALREADY"){
//10. エラーメッセージとともにトップページへリダイレクト
return redirect('/')->with('message', 'このメールアドレスはすでに認証されています。');
}else if($authResult == "WRONG"){
//10. エラーメッセージとともにトップページへリダイレクト
return redirect('/')->with('message', 'メールアドレス認証に失敗しました。URLを確認してもう一度やり直してください。');
}else if($authResult == "EXPIRE"){
//10. エラーメッセージとともにトップページへリダイレクト
return redirect('/')->with('message', '認証URLの有効期限が切れています。最初からもう一度やり直してください。');
}else{
//一応
return redirect('/');
}
public function matchToken($token)
{
$now = new DateTime();
//6. ユーザから送信されたトークンを検索
$data = Token::where([
'token' => $token
])->first();
//8. トークンチェック
if(is_null($data)){
//DBから値が返ってこないのでトークンが間違っている、チェックNG
return "WRONG";
}else if($data->auth_flag){
//検索して見つかったトークンデータの認証フラグが既に立っている(=認証済み)、チェックNG
return "ALREADY";
}
$expire_date = new DateTime($data->expire_at);
//9. 認証処理(有効なトークンだった場合はフラグを認証済み(true)に更新)
if($now < $expire_date){
$data->auth_flag = true;
$data->update();
return "OK";
}else{
//有効期限が切れている、チェックNG
//有効期限の切れたトークンデータ、ユーザデータはもう二度と認証できないので削除
$email = $data->email;
Token::where([
'token' => $token
])->delete();
$userService = new UserService();
$userService->deleteByEmail($email);
return "EXPIRE";
}
}
4. 動かす
せっかく作ったので動かしてみます。
まずはユーザ情報入力。(スタイルあたってるのは無視してください)
ユーザ名、メールアドレス、パスワードを入力し登録ボタンをクリック。
すると・・・
ちゃんとメール来てます。URLも認証用ページのURLにクエリパラメータとしてトークンがくっついたものになってますね。
URLをクリックすると・・・
認証が通り、ユーザトップページにリダイレクトされました！！（開発途中なのでユーザトップページだとわかりにくくてすみません笑）
ちなみに、一回ログアウトしてさっきのメールのURLをもう一回クリックすると・・・
エラーメッセージとともにトップページにリダイレクトされました。今回の場合は一回認証されたトークンをもう一度認証しようとしたためこのメッセージになりました。
DBの中身(トークンテーブル)を見てみるとちゃんとauth_flagが1になっており認証済みになっていることがわかります。
5. まとめ
ただユーザ情報をDBに登録して終わりではなくメールアドレス認証というちょっと複雑なフローを取り入れることで設計・実装ともにいい勉強になりました。ちょうど仕事のほうでも来週から認証周りの追加開発案件にアサインされることになっており、いい予行演習になったかなと思っております（全くレベル違うけど）。ただ、コード的にはいろいろ直さなきゃならないとことかセキュリティ的にほんとにこれでいいのかとかいろいろ考えなきゃいけないことはあるのでこのアプリをリリースするまでに（できるのか・・・？）きれいにしておきたいと思います。
それでは、長々と読んでいただきありがとうございました！