見出し画像

今回はwebサービスでよくある流れ⬇️

メールアドレスでユーザー登録後に認証メールの送信 → メール本文のリンクをクリック → 認証完了

これを実装していこうと思います。

いきなり余談ですが、今回Vue.jsとFirebaseでやったけど、改めてrailsとかlaravelと便利だな〜って感じましたw

もちろん今回のVue.jsとFirebaseも実装は簡単です。自分への備忘録として書いていきます。

目次

  1. 参考にしたもの
  2. 実装の流れ
  3. sendEmailVerification
  4. 認証メールが送られた後
  5. 初めて知ったこと
  6. 感想
  7. おまけ

参考にしたもの

FirebaseやVue.jsの好きなところ。リファレンスが読みやすい。

リファレンスが読む気にさせてくれるんですよw物腰が柔らかい。Firebase のユーザーを管理するfirebase.google.com

わかりやすくてありがたいです。⬇️
Firebase AuthenticationとVuexでメール認証を実装する |こんにちは、mabuiです。 今回はWebサービスでよくある メールアドレスでユーザー登録後に認証メールの送信 → メーmabui.org

実装の流れ

まずはコード見ますか。

自分は登録時にfirestoreにユーザーを保存しています。

emailsignup() {
     firebase.auth().createUserWithEmailAndPassword(this.email, this.password).then(res => {
       let user = res.user
       db.collection('users').add({
         user_id: user.uid,
         email: user.email,
       }).then(() => {
         this.$store.dispatch('sendMail') ここです
         this.$router.push('/list')
       }).catch(err => {
         console.log(err)
       })
     })
   }

まず、登録させるときに認証メールを送る方法。

データベースへの登録成功したら(自分の場合)

vueのファイルからdispatchを使ってstoreのactionを呼び出し、そこで実際に認証メールを送信する。(vuex使ってるので)

今回の場合はsendMailを呼び出してる。

うまく行ったら、storeの中のactionsの中のコードが呼び出される。

sendMail() {
     const actionCodeSettings = {
       url: 'http://' + window.location.host + '/signin'
     }
     firebase.auth().languageCode = 'ja';
     const user = firebase.auth().currentUser
     user.sendEmailVerification(actionCodeSettings).then(function() {
       alert('認証メールを送りました。リンクをクリックして再度ログインし、認証を完了しましょう。もしかすると迷惑フォルダに入っているかもしれません')
     }).catch(function(error) {
       console.log(error)
     });
   }

こっから大事。順に説明します。

まずは、actionCodeSettingsを設定する。これは便利で認証メールのボタンクリックで自分のサイトまでリダイレクトしてくれるもの。

だからリダレクトした際にどのページにリダイレクトさせるのかパスを決めれるってこと。

‘ja’の部分で認証メールが日本語表記で送られてくるように設定。

sendEmailVerification

1番大事なので見出しに。逆にわかりづらいかも。

sendEmailVerificationメソッドが認証メールを送ってくれる。引数に(actionCodeSettings)をつけることでリダイレクトする情報ものっけれる。

残りの記述はアラートとかコンソール出して送られたときにわかりやすくしているだけ。

認証メールが送られた後

おそらくメールが届くので届いたメールのリンクをクリック。届かない場合は迷惑フォルダとかにあるかも。

リンク先に行くと”認証完了”的な英語が出ていて、Continueのボタンがあるのでそこをクリック。

ここを日本語に変える方法はまだわかりません。わかる方いたらぜひ教えていただきたいです。

Continue押すとactionCodeSettingsに設定したリンク先に飛んでいく。

もう一度ログインすることで、認証が完了する。

ざっとこんな流れ。

初めて知ったこと

認証するには、もう一度ログインしなければならないってこと。

これを知ったときに、Laravelの認証は楽だな〜って思いましたw

ユーザーの現在の認証状態は下のようにemailVerifiedで確認できる。(trueかfalse)

const user = firebase.auth().currentUser
console.log(user.emailVerified)

今回のようにvuexを使ってactionsに設定した場合は、ユーザーのプロフィールページから認証メールを送るような処理も可能になる。下記のコードで呼び出すだけ。

this.$store.dispatch('sendMail')

感想

特に気おつけることはないかなと。Vuexを使うとさらに便利に扱えました。

ただ、認証メールをクリックしたときに飛ぶContinueボタンの部分は日本語に変えたいな〜と少し思う(どこで変えるんだろ)

気軽に認証機能が実装できる部分については間違いないかなと!

おまけ

少し余力があったので、Vuetifyで見た目をオシャレに。

分かりやすいように、認証メール送ったら認証メール送ったよ〜とポップ通知みたいなのをつける。

<template>
 <v-snackbar
           v-model="sendBar.show"
           :color="sendkBar.color"
           bottom
           right
           :timeout="6000"
           class="font-weight-bold"
   >
     {{done}}
   </v-snackbar>
</template>

data() {
   return {
     done: 'ユーザーの編集が完了しました'
     sendBar: {
       show: false,
       color: '',
       message: ''
     }
   }
 },
methods: {
   sendMail() {
     this.$store.dispatch('sendMail')
     this.sendSnackBar(
       'success',
       '正常に認証メールが送信されました。'
     )
   },
   sendSnackBar: function (color, message) {
     this.sendBar.message = message
     this.sendBar.color = color
     this.sendBar.show = true
   }
}

v-snackvarで要素を用意、それぞれに必要なデータを設定。

表示する際に使う文章もデータの中に用意。

あとはthis.$store.dispatch(‘sendMail’)した後にviewに表示させるように、メソッドを使用して呼び出してあげれば良い。今回はsendSnackBar。

Vuetifyこの調子で使えるようになったらオシャレな感じに仕上げれるかも〜とか思ってますw

次はユーザーのプロフィール編集機能について書いていこうかなと。

そんな感じで

以上!