如何在Firebase和Vue.js中设置电子邮件验证
我正在尝试基于构建Vue.js/Firebase身份验证接口。此代码使用.sendEmailVerification挂钩在注册帐户时触发验证电子邮件。注册时基于电子邮件的验证似乎工作正常。然而,登录似乎也会触发一封验证电子邮件,我认为这是因为代码中的.onAuthStatechanged钩子没有设置为区分注册和登录 基本上,我想将其设置为仅在注册时触发验证电子邮件,而不是在登录时触发。解决这个问题的最佳方法是什么?请参阅下面的代码如何在Firebase和Vue.js中设置电子邮件验证,firebase,vue.js,firebase-authentication,email-verification,Firebase,Vue.js,Firebase Authentication,Email Verification,我正在尝试基于构建Vue.js/Firebase身份验证接口。此代码使用.sendEmailVerification挂钩在注册帐户时触发验证电子邮件。注册时基于电子邮件的验证似乎工作正常。然而,登录似乎也会触发一封验证电子邮件,我认为这是因为代码中的.onAuthStatechanged钩子没有设置为区分注册和登录 基本上,我想将其设置为仅在注册时触发验证电子邮件,而不是在登录时触发。解决这个问题的最佳方法是什么?请参阅下面的代码 <template> <div>
<template>
<div>
<div class="container">
<input type="email" id="txtEmail" v-model="authInput.txtEmail" placeholder="Email">
<input type="Password" id="txtPassword" v-model="authInput.txtPassword" placeholder="Password">
</div>
<div class="container">
<button id="btnLogin" v-on:click="Login()">Log in</button>
<button id="btnSignUp" v-on:click="SignUp()">Sign Up</button>
<button id="btnLogout" v-on:click="LogOut()" style="display:none">Log out</button>
</div>
</div>
</template>
已解决:
我将Firebase.auth.onAuthStateChanged拆分为两个单独的函数,一个用于触发验证电子邮件,另一个用于在newUser.emailVerified==true时方便登录
这只允许在注册时触发验证电子邮件,从而解决我的上述问题。请随意添加反馈
<script>
import Firebase from 'firebase'
export default {
data() {
return {
authInput: {
txtEmail: '',
txtPassword: ''
}
}
},
methods: {
Login: function(event) {
const email = this.authInput.txtEmail;
const pass = this.authInput.txtPassword;
const auth = Firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, pass);
this.authInput.txtEmail = '';
this.authInput.txtPassword = '';
promise.catch(event => console.log(event.message));
auth.onAuthStateChanged(newUser => {
if (newUser) {
if (newUser.emailVerified == true) {
console.log('login success');
document.getElementById('btnLogout').style.display = '';
document.getElementById('btnLogin').style.display = 'none';
document.getElementById('btnSignUp').style.display = 'none';
document.getElementById("verifMessage").innerHTML = "You are now logged in!";
} else {
document.getElementById('btnLogout').style.display = 'none';
}
} else {
console.log('not logged in');
document.getElementById('btnLogout').style.display = 'none';
document.getElementById('btnLogin').style.display = '';
document.getElementById('btnSignUp').style.display = '';
}
})
},
SignUp: function(event) {
const email = this.authInput.txtEmail;
const pass = this.authInput.txtPassword;
const auth = Firebase.auth();
const promise = auth.createUserWithEmailAndPassword(email, pass);
this.authInput.txtEmail = '';
this.authInput.txtPassword = '';
promise.catch(event => console.log(event.message));
auth.onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
firebaseUser.sendEmailVerification().then(function() {
console.log('send Verification');
document.getElementById("verifMessage").innerHTML = "Check your inbox for verification email!";
}, function(error) {
console.log('not send Verification');
});
} else {
console.log('not logged in');
document.getElementById('btnLogout').style.display = 'none';
}
})
},
LogOut: function() {
Firebase.auth().signOut();
document.getElementById("verifMessage").innerHTML = "You are now logged out!";
}
}
}
</script>
<style media="screen">
.container {
margin: 10px;
}
</style>
<script>
import Firebase from 'firebase'
export default {
data() {
return {
authInput: {
txtEmail: '',
txtPassword: ''
}
}
},
methods: {
Login: function(event) {
const email = this.authInput.txtEmail;
const pass = this.authInput.txtPassword;
const auth = Firebase.auth();
const promise = auth.signInWithEmailAndPassword(email, pass);
this.authInput.txtEmail = '';
this.authInput.txtPassword = '';
promise.catch(event => console.log(event.message));
auth.onAuthStateChanged(newUser => {
if (newUser) {
if (newUser.emailVerified == true) {
console.log('login success');
document.getElementById('btnLogout').style.display = '';
document.getElementById('btnLogin').style.display = 'none';
document.getElementById('btnSignUp').style.display = 'none';
document.getElementById("verifMessage").innerHTML = "You are now logged in!";
} else {
document.getElementById('btnLogout').style.display = 'none';
}
} else {
console.log('not logged in');
document.getElementById('btnLogout').style.display = 'none';
document.getElementById('btnLogin').style.display = '';
document.getElementById('btnSignUp').style.display = '';
}
})
},
SignUp: function(event) {
const email = this.authInput.txtEmail;
const pass = this.authInput.txtPassword;
const auth = Firebase.auth();
const promise = auth.createUserWithEmailAndPassword(email, pass);
this.authInput.txtEmail = '';
this.authInput.txtPassword = '';
promise.catch(event => console.log(event.message));
auth.onAuthStateChanged(firebaseUser => {
if (firebaseUser) {
firebaseUser.sendEmailVerification().then(function() {
console.log('send Verification');
document.getElementById("verifMessage").innerHTML = "Check your inbox for verification email!";
}, function(error) {
console.log('not send Verification');
});
} else {
console.log('not logged in');
document.getElementById('btnLogout').style.display = 'none';
}
})
},
LogOut: function() {
Firebase.auth().signOut();
document.getElementById("verifMessage").innerHTML = "You are now logged out!";
}
}
}
</script>