Laravel+Sanctum+FortifyとNuxt.js+nuxt/authでSPAの認証処理を実装する【パスワードリセット編】

前回まででページをプロテクトする処理が実装できたので、今回はパスワードを変更する処理を実装していきます。

パスワードリセットメール送信処理の実装

パスワードリセットメールの送信

pagesフォルダ内にforgot-password.vueという名前でファイルを作成し以下の様に編集します。forgot-passwordにpostしているだけです。

見た目はこんな感じになります。

cors対策としてconfig\cors.phpのpathsに’forgot-password’の追加もしておきます。

エラー発生:Route [password.reset] not defined.

これだけ・・・と思ったのですがやってみたら「 “message”: “Route [password.reset] not defined.”, 」というエラーが発生してしまいました。

なんやかんや調べてみるとapp\Providers\AuthServiceProvider.phpを以下の様に編集することで解消されました。

詳説

DevToolsで表示されているResetPassword.phpの100行目を見てみるとpassword.resetという名前のルートを使って何かしようとしてるけどそんなルートは定義していないのでエラーになっているようです(以下画像の97行目)。

少し前(93行目)でstatic::$createUrlCallbackメソッドを呼んでいるので、これを設定しているcreateUrlUsingメソッド(109行目)でこれを定義してあげれば良さそうと思いました。

ググってみると以下のページが見つかったので試しに前述のように設定してみたらいい感じに動いてくれました。

パスワードリセット 8.x Laravel (readouble.com)

vendor\laravel\framework\src\Illuminate\Auth\Notifications\ResetPassword.php

再実行

再度実行してみるとちゃんとメールが飛ぶことが確認できました。リンク先もcreateUrlUsingメソッドで指定した宛先になっています。

パスワードリセット処理の実装

リセットメールの送信処理が実装できたので、次は実際にリセットするページを作成します。リセットメール内でページ名はreset-passwordとしておいたのでpagesフォルダ内にreset-password.vueという名前でファイルを作成し以下の様に編集します。

reset-passwordにpostするだけです。config\cors.phpのpathsに’reset-password’の追加も忘れずしておいてください。リセットメール内のリンクURLで、URLパラメータにメールアドレスとリセット用のトークンがセットされているのでそれをpostしています。

テスト

あまりUIを作りこんでいないので分かりづらいですがこんな感じに動作します。

最後に

簡単にパスワードのリセット処理を実装することが出来ました。実際はかなり悩んでますが分かってしまえば非常に手間なく実装できることが分かるかと思います。どこかの誰かの同じ悩みを解消出来たら幸いです。 次回はやるつもりなかったけどユーザー認証メールのカスタマイズを実装してみようと思います。

コメントを残す

メールアドレスが公開されることはありません。