最近、ユーザー認証でfirebaseを使用しているのですが、何と言っても凄いなと感じました。
例えば、Facebookとの連携を取る際に、ユーザーが重複しているかの確認も自動でしてくれますし、メール送信機能もGmailを使って送信することができるんですよ。
これを全て１から実装するとなると手間はかかりますよね。。。
話は変わりますが、firebaseでupdateEmail(),upadatePassword()という関数があるのをご存じでしょうか？
firebaseに触れたことがある方は恐らくご存じかと思います。
ふと、この関数を実行したところ、firebase側では変更されているのですが、Webサイト上では更新されていない！！！
これは困ったなと思い色々調べたところ、updateした後はログアウトをし、再度ログインしなきゃいけないらしい。
でもこれをユーザーにわざわざ操作させるなんてことはできない。
そこで、今回は、upadateした後に、自動でログアウトとログインを実行する方法を説明していきます！！！
また、メールアドレスやパスワードを変更する時、ユーザーの再認証が必要なのでこれも説明します。
そんなに難しくないので、是非学習の参考にしてください！
それでは順を追って説明します。（メールアドレス変更での実装となります。パスワードを変更する時でも同じく使えます。）
パスワードの入力#
下記のように、ユーザーにパスワードの入力をしてもらいます。
<template>
<div class="reauth">
<div class="form-wrapper">
<h1>不正防止のためパスワードの入力をお願いします。</h1>
<form>
<div class="form-item">
<label for="email">現在のメールアドレス</label>
<input type="email" name="email" required="required" :value="beforeEmail" disabled="true">
</div>
<div class="form-item">
<label for="email2">変更後メールアドレス</label>
<input type="email" name="email2" required="required" :value="updateEmail" disabled="true">
</div>
<div class="form-item">
<label for="password">パスワード</label>
<input type="password" name="password" required="required" placeholder="パスワードを入力してください" v-model="password">
</div>
<div class="button-panel">
<input type="button" class="button" value="変更する" @click="update">
</div>
</form>
</div>
</div>
</template>
<script>
import firebase from "firebase/app";
export default{
props: ["updateEmail"], //変更するメールアドレス
name: "reAuth",
data() {
return {
beforeEmail: this.$store.state.user.email, //変更する前のメールアドレス
password: "", //パスワード
}
},
}
</script>
再認証→ログアウト→ログインの実行#
<script>
methods: {
update() {
let vm = this;
const user = firebase.auth().currentUser; //現在のユーザーを取得
const credential = firebase.auth.EmailAuthProvider.credential(this.beforeEmail, this.password);
//メールアドレスとパスワードでユーザーの確認
user.reauthenticateWithCredential(credential) //再認証
.then(() => {
user.updateEmail(vm.updateEmail) //メールアドレスの更新
.then(() => {
firebase.auth().signOut() //変更し終えたら、ログアウトを実行
.then(() => {
firebase.auth().signInWithEmailAndPassword(vm.updateEmail, vm.password) //ログアウトし終えたら、ログインの実行
.then((user) => {
vm.$store.dispatch("login", user); //Vuexのストア内のuserの書き換え
vm.$router.replace({ //ページ遷移
name: "User",
})
}
)
})
})
.catch((error) => {
alert(error);
})
})
.catch((error) => {
alert(error);
})
}
},
</script>
このような流れで変更内容を反映することができます！！！
それぞれの処理が終わったら、.then(() => {})の中で実行することで、一連の動作を行えます。
この.then(() => {})で行わないと、例えばログアウトをし終えてないのにログインしてしまうという流れになるので、くれぐれも気を付けてください！
何かご不明な点がございましたら、コメントにてご報告ください。
以上、「firebaseで、自動でログイン、ログアウトを実行する方法」でした！！
良ければ、LGTM、コメントお願いします。
また、何か間違っていることがあればご指摘頂けると幸いです。
他にも初心者さん向けに記事を投稿しているので、時間があれば他の記事も見て下さい！！
Thank you for reading