如何在验证电子邮件之前阻止 Firebase/Vue.js 中的用户身份验证

Posted 2023-02-22

【中文标题】如何在验证电子邮件之前阻止 Firebase/Vue.js 中的用户身份验证

【英文标题】：How to prevent user authentication in Firebase/Vue.js BEFORE email is verified

【发布时间】：2019-11-08 21:08:44

【问题描述】：

我正在构建一个包含电子邮件验证组件的 Vue.js/Firebase 身份验证界面。到目前为止，我已经能够成功设置我的界面，以便用户在点击发送到与输入地址相关的收件箱的电子邮件中的验证链接之前无法登录。但是，我注意到，即使在单击验证电子邮件中的链接之前，该电子邮件地址仍会呈现在 Firebase 身份验证门户中。虚假电子邮件地址似乎也是如此，显然无法验证。我真的希望只有在单击验证电子邮件中的链接后才能在身份验证门户中呈现电子邮件地址。我怎样才能做到这一点？这是我当前的代码。谢谢！

<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>

【参考方案1】：

这个问题已经讨论过很多次了：目前没有办法阻止用户使用未经验证的电子邮件地址登录。但是您可以在客户端代码和后端代码（或安全规则）中检查验证状态，以确保只有拥有经过验证的电子邮件地址的用户才能访问您的资源。

见：

How do I lock down Firebase Database to any user from a specific (email) domain? Firebase Prevent Creating Account Before Email Verification more similar questions

【讨论】：

感谢您的澄清。在我的代码中，我使用“if (newUser.emailVerified == true) ”来防止用户使用未经验证的电子邮件地址登录，这似乎有效。是否存在某些技术原因，这不足以阻止未经验证的用户登录？

他们已登录到 Firebase 身份验证，否则您一开始就无法检查 newUser.emailVerified。当前检查是否足够完全取决于您的要求。您通常还希望保护后端资源，如我链接的前两个问题的答案所示。