Laravel+Sanctum+FortifyとNuxt.js+nuxt/authでSPAの認証処理を実装する【メールアドレス認証カスタマイズ編】

メールアドレスの認証をするのにバックエンドのLaravelへクライアント側から直接GETアクセスが飛ぶけどまあいっかと思っていたのですが、気になるのでやっぱりメールアドレス認証のメールのURLをカスタマイズします。

メールアドレス認証処理のカスタマイズ

メール認証用URLの変更

app\Providers\AuthServiceProvider.phpのbootメソッド内でVerifyEmail::createUrlUsingメソッドを使い、メール認証で生成されるURLをカスタマイズします。

41行目:.envファイルからベースとなるURLを取得します。

43-50行目:Sanctumのverification.verifyルートへ60分間有効なルートを生成してします。

52-53行目:生成したURLから必要な値を抽出しています。

55行目:クライアント側で使いやすいようにURLとパラメータを整形しています。

上記のコードは大半がvendor\laravel\framework\src\Illuminate\Auth\Notifications\VerifyEmail.phpのverificationUrlメソッドのままです。

認証用ページの作成

先ほど/verificationを認証用のページとして指定したので、pages\verification.vueファイルを作り、以下の様に編集します。特にコンテンツは無しで、Fortifyが用意しているemail/verifyへGETリクエストを投げるだけです。正常ならユーザー情報をフェッチし、ルートへ移動させています。

cors対策

config\cors.phpのpathsに'email/verify/*'を追加します。

ページプロテクトの解除

middleware\verified.jsで/verificationページもスルーする用に修正します。2行目でverificationも除外しています。

実行

これで実装できましたので実行してみます。以下の様な動作になります。

最後に

あまり気にすることもない気もしますが一応認証もSPAで実施できるようになりました。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です