こんにちは、mabuiです。
今回はWebサービスでよくある
メールアドレスでユーザー登録後に認証メールの送信 → メール本文のリンクをクリック → 認証完了
の流れを、Firebase Authenticationを使って、Vuexのアクションメソッド内でやる処理を解説します。
登録処理中などで$store.dispatchで叩きにいって使用してみてください。
ソースコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
export const actions = { // 認証メール送信 async sendEmailLink() { const actionCodeSettings = { url: 'http://' + window.location.host + '/logout' } const user = firebase.auth().currentUser user .sendEmailVerification(actionCodeSettings) .then(function() { // Email sent. }) .catch(function(error) { // An error happened. }) }, } |
認証メール送信のアクションメソッドです。
メールを飛ばす処理は同期させる必要がないので、asyncで非同期にします。
Firebaseのインスタンスは生成しておいた状態で、
firebase.auth().currentUserでログイン中のユーザー情報が取得できるので、
FirebaseのユーザーにひもづくsendEmailVerificationを使って認証メールを送信します。
引数にactionCodeSettingsを渡していて、ここにurlを設定すると、なんとメール内リンク先で認証後、指定したurlへのリンクを作成してくれます！便利！
このURLを公式ドキュメントでは継続URLと呼んでいます。
Firebase でユーザーを管理する
認証後ログアウトしてからログインし直すと、Firebaseのユーザー情報が持つemailVerifiedがtrueに切り替わるので、この値で認証済みかどうかの判断ができます。
ログアウトしないと切り替わらないため、継続URLを使って、ログアウトのapiを叩くと再ログインまでの動線がスムーズに進むでしょう。
以上シンプルでしたが、認証メール送信メソッドの解説でした。
おまけ
ほぼ同じですが、登録ユーザーのパスワードの再設定メールを送信するメソッドも紹介します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// パスワード再設定メール送信 async sendPasswordResetEmail({ email }) { const actionCodeSettings = { url: 'http://' + window.location.host } firebase .auth() .sendPasswordResetEmail(email, actionCodeSettings) .then(() => { // Email sent. }) .catch(() => { // An error happened. }) } |
メソッドの引数にメールアドレスを渡して、firebase.auth().sendPasswordResetEmailを叩きましょう。
これでパスワードを変更できるリンクが記載されたメールがユーザーの元に届きます。
パスワード変更後、再ログインする時に新しいパスワードが適用されます。