パスワードリマインダー

IT関連

Laravelでパスワードリマインダーの辺りを作っていました。
パスワードを忘れてログイン出来ないときにemailに再設定のメールを送るアレです。

そもそもLaravel5.xの場合、
php artisan make:auth
のコマンドを打つだけで認証周りは一瞬で出来ます。
とはいえLaravelはまだまだ苦手。
こんな感じで作ってますよというのを書いていこうと思います。

まずはコントローラー
この記事をもろパクリして作ってます。

Laravel(5.7)のパスワードリセット機能をAPIからキックする。 - Qiita
Laravelではmake authすれば登録やらパスワードリセットやら設定してくれますが、標準のルートではCSRFのtokenを要求されるため別途API用に専用のルートを作成して対応します。  追記 Email Verifyと...
 PassResetController.php
<?php

namespace App\Http\Controllers;
namespace App\Http\Controllers\Auth;

use App\Http\Controllers\Controller;
use Illuminate\Http\Request;
use Illuminate\Foundation\Auth\SendsPasswordResetEmails;
use Illuminate\Support\Facades\Password;

class PassResetController extends Controller
{
  use SendsPasswordResetEmails;


  public function __construct()
  {
    $this->middleware('guest');
  }

  public function sendResetLinkEmail(Request $request)
  {
    $this->validateEmail($request);

    $response = $this->broker()->sendResetLink(
      $request->only('email')
    );

    return $response == Password::RESET_LINK_SENT
      ? response()->json(['message' => 'Reset link sent to your email.', 'status' => true], 201)
      : response()->json(['message' => 'Unable to send reset link', 'status' => false], 401);
  }
}

次にルーティング。
web.phpではなくapi.phpに書いてます。

Route::post('/passReset', 'Auth\PassResetController@sendResetLinkEmail')->name('passReset');

最後にPassReset.vueです。
v-modelを書き忘れていて大分時間が掛かりました。

<template>
    <div class="p-reset">

      <form @submit.prevent="passReset">

          <div class="p-reset__email">
            <h2 class="p-reset__title"><i class="fas fa-lock"></i> ログインできない場合</h2>
            <p class="p-reset__text">パスワード再設定用のログインリンクをお送りしますので、メールアドレスを入力してください。
            </p>
<!--              <input class="c-input__menu" type="email" placeholder="メールアドレス">-->
            <input class="c-input__menu" v-model="passResetFrom.email" type="email" placeholder="メールアドレス">
          </div>

          <div class="p-reset__button">
              <button class="c-button__menu">リンクを送信する</button>
          </div>
      </form>

      <RouterLink to="/register"><div class="p-reset__register"><p>新規登録する</p></div></RouterLink>
      <RouterLink to="/login"><div class="p-reset__login"><p>ログインに戻る</p></div></RouterLink>

    </div>
</template>

<script>


  export default {
    data() {
      return {
        passResetFrom: {
          email: ''
        }
      }
    },
    methods: {
      async passReset () {
        // await axios.post('/api/passReset', { email: this.email })
        await axios.post('/api/passReset', this.passResetFrom)
        }
      }
  }
</script>

あと今回はmailtrapを使用して動作確認をしています。

Mailtrap - Safe Email Testing
Mailtrap - Safe Email Testing

メールの設定は
.env
mail.php
にする必要があります。

それにしてもバックエンドよりフロントエンドの方が作っていて楽しいです。
仕事としてやると変わってくるのでしょうか。
そんなことを考えながら作っています。

コメント

タイトルとURLをコピーしました