Question

我正在建立一个网站，该网站应具有登录表单，并已决定对其使用Firebase身份验证。每当我尝试使用在Firebase控制台中创建的帐户的登录信息登录时，它似乎都无法正常工作。

我遵循了此Youtube教程（https://www.youtube.com/watch?v=iKlWaUszxB4），因为它比Firebase中的教程要新。

login.html：

<div class="loginContainer">
  <div class="card"></div>
  <div class="card">
    <h1 class="title">Login</h1>
    <form>
      <div class="input-container">
        <input type="text" id="txtEmail" required="required"/>
        <label for="email_field">E-Mail</label>
        <div class="bar"></div>
      </div>
      <div class="input-container">
        <input type="password" id="txtPassword" required="required"/>
        <label for="password_field">Password</label>
        <div class="bar"></div>
      </div>
      <div class="button-container">
        <button onclick="login();"id="btnLogin"><span>Go</span></button>
      </div>
    </form>
  </div>
</div>
        <!-- Scripts -->
        <!-- The core Firebase JS SDK is always required and must be listed first -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="https://www.gstatic.com/firebasejs/6.1.1/firebase-app.js"></script>

        <!-- TODO: Add SDKs for Firebase products that you want to use
        <!-- Insert these scripts at the bottom of the HTML, but before you use any Firebase services -->
        <!-- Add Firebase products that you want to use -->
        <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-auth.js"></script>
        <script src="https://www.gstatic.com/firebasejs/6.2.0/firebase-firestore.js"></script>
        <script>
          // Your web app's Firebase configuration
          var firebaseConfig = {
            (the config of my project I got from the console)
          };
          // Initialize Firebase
          firebase.initializeApp(firebaseConfig);
        </script>
        <script src="assets/js/login.js"></script>

login.js：


const auth = firebase.auth();

auth.onAuthStateChanged(function(user) {
  if (user) {
    window.alert("User is signed in");

  } else {
    window.alert("User is not signed in");

  }
});

function login(){

    var userEmail = document.getElementById("txtEmail").value;
    var userPass = document.getElementById("txtPassword").value;

    console.log(userEmail + " " + userPass);
    auth.signInWithEmailAndPassword(userEmail, userPass).catch(function(error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    window.alert("Error : " + errorMessage);
    });
}

我希望收到“用户已登录”窗口警报，但是每当我尝试登录到我在控制台中创建的帐户时，页面都会刷新，并且提示“用户未登录”窗口警报。每当我输入错误的电子邮件和密码时，页面也刷新，而没有显示任何错误。但是，当我输入格式错误的电子邮件或没有密码时，会出现相应的错误。某种程度上，感觉电子邮件和密码甚至都没有发送到Firebase服务器。

Answer 1

您的表单正在提交，默认操作是将数据发布回原始URL。

为防止这种情况，您将要取消表单提交。一种简单的方法是返回false：

<button onclick="login(); return false;"id="btnLogin"><span>Go</span></button>

请参见How do I cancel form submission in submit button onclick event?

或者，您可以按如下所示致电preventDefault()：Stop form submission when using JavaScript

Answer 2

在onclick事件中使用return false;可以防止此类错误

Firebase身份验证无法正常工作

2 个答案: