[英]How to prevent user authentication in Firebase/Vue.js BEFORE email is verified
I am building a Vue.js/Firebase authentication interface that includes an email verification component. 我正在构建包含电子邮件验证组件的Vue.js / Firebase身份验证界面。 So far, I have been able to successfully set up my interface so that the user is prevented from logging in until he/she clicks the verification link in the email sent to the inbox tied to the inputted address.
到目前为止,我已经能够成功设置我的界面,以便阻止用户登录,直到他/她单击发送到与输入地址绑定的收件箱的电子邮件中的验证链接。 I am noticing, however, that the email address still renders in the Firebase authentication portal, even BEFORE clicking the link in the verification email.
但是,我注意到,即使在单击验证电子邮件中的链接之前,该电子邮件地址仍会在Firebase身份验证门户中呈现。 This also seems to be the case with fake email addresses, which obviously can't be verified.
伪造的电子邮件地址似乎也是如此,显然无法验证。 I would really like to have email addresses render in the authentication portal only AFTER clicking the link in the verification email.
我真的很想让电子邮件地址仅在单击验证电子邮件中的链接之后才在身份验证门户中呈现。 How can I achieve this?
我该如何实现? Here is my current code.
这是我当前的代码。 Thanks!
谢谢!
<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>
<p id="verifyMessage"></p>
</div>
</template>
<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("verifyMessage").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("verifyMessage").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("verifyMessage").innerHTML = "You are now logged out!";
}
}
}
</script>
<style media="screen">
.container {
margin: 10px;
}
</style>
This has been discussed quite a few times already: there is currently no way to prevent a user from signing in with an unverified email address. 已经讨论了很多次了:目前尚无办法阻止用户使用未经验证的电子邮件地址登录。 But you can check the verification status both in your client-side code, and in your back-end code (or security rules) to ensure that only users with a verified email address have access to your resources.
但是,您可以在客户端代码和后端代码(或安全规则)中检查验证状态,以确保只有具有经过验证的电子邮件地址的用户才能访问您的资源。
See: 看到:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.