今回はwebサービスでよくある流れ⬇️
メールアドレスでユーザー登録後に認証メールの送信 → メール本文のリンクをクリック → 認証完了
これを実装していこうと思います。
いきなり余談ですが、今回Vue.jsとFirebaseでやったけど、改めてrailsとかlaravelと便利だな〜って感じましたw
もちろん今回のVue.jsとFirebaseも実装は簡単です。自分への備忘録として書いていきます。
目次
参考にしたもの
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
次はユーザーのプロフィール編集機能について書いていこうかなと。
そんな感じで
以上！
