Как настроить проверку электронной почты в Firebase и Vue.js

Question

Я пытаюсь создать интерфейс аутентификации Vue.js / Firebase на основе примера, который я нашел на Github (см .: https://github.com/aofdev/vuefire-auth).). Этот код использует хук .sendEmailVerification (), чтобы вызвать электронное письмо с подтверждением.после регистрации учетной записи. Проверка на основе электронной почты при регистрации, кажется, работает нормально. Однако вход в систему также, по-видимому, вызывает подтверждение электронной почты, что, как я полагаю, связано с тем, что хук .onAuthStatechanged () в этом коде не настроен наразличие между регистрацией и входом в систему. В основном, я хочу настроить это так, чтобы электронное письмо с подтверждением срабатывало ТОЛЬКО при регистрации, а НЕ при входе в систему. Каков наилучший способ решить эту проблему? См. мой код ниже. Спасибо!

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

<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));
            },
            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));
            },
            LogOut: function() {
                Firebase.auth().signOut();
            }
        }
    }
    Firebase.auth().onAuthStateChanged(firebaseUser => {
        if (firebaseUser) {
            firebaseUser.sendEmailVerification().then(function() {
                console.log('send Verification');
            }, function(error) {
                console.log('not send Verification');
            });
            if (firebaseUser.emailVerified == true) {
                console.log('login success');
                document.getElementById('btnLogout').style.display = 'block';
            } else {
                document.getElementById('btnLogout').style.display = 'none';
            }

        } else {
            console.log('not logged in');
            document.getElementById('btnLogout').style.display = 'none';
        }
    })
</script>

<style media="screen">
  .container {
    margin: 10px;
  }
</style>

Answer 1

решено:

Я разделил 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>