Firebase Vue.js プログラミング 開発ノウハウ

Firebase AuthenticationとVuexでメール認証を実装する

投稿日:

 

こんにちは、mabuiです。
今回はWebサービスでよくある
メールアドレスでユーザー登録後に認証メールの送信 → メール本文のリンクをクリック → 認証完了
の流れを、Firebase Authenticationを使って、Vuexのアクションメソッド内でやる処理を解説します。
登録処理中などで$store.dispatchで叩きにいって使用してみてください。

 

ソースコード

 
認証メール送信のアクションメソッドです。
メールを飛ばす処理は同期させる必要がないので、asyncで非同期にします。
 
Firebaseのインスタンスは生成しておいた状態で、
firebase.auth().currentUserでログイン中のユーザー情報が取得できるので、
FirebaseのユーザーにひもづくsendEmailVerificationを使って認証メールを送信します。
 
引数にactionCodeSettingsを渡していて、ここにurlを設定すると、なんとメール内リンク先で認証後、指定したurlへのリンクを作成してくれます!便利!
このURLを公式ドキュメントでは継続URLと呼んでいます。
Firebase でユーザーを管理する
 
認証後ログアウトしてからログインし直すと、Firebaseのユーザー情報が持つemailVerifiedがtrueに切り替わるので、この値で認証済みかどうかの判断ができます。
ログアウトしないと切り替わらないため、継続URLを使って、ログアウトのapiを叩くと再ログインまでの動線がスムーズに進むでしょう。
 
以上シンプルでしたが、認証メール送信メソッドの解説でした。

 

おまけ

ほぼ同じですが、登録ユーザーのパスワードの再設定メールを送信するメソッドも紹介します。

 
メソッドの引数にメールアドレスを渡して、firebase.auth().sendPasswordResetEmailを叩きましょう。
これでパスワードを変更できるリンクが記載されたメールがユーザーの元に届きます。
パスワード変更後、再ログインする時に新しいパスワードが適用されます。
 

-Firebase, Vue.js, プログラミング, 開発ノウハウ
-, ,

Copyright© 仮想通貨始めました , 2018 All Rights Reserved Powered by STINGER.