Firebase 身份验证未按预期工作答案

【问题标题】：Firebase authentication is not working as intendedFirebase 身份验证未按预期工作
【发布时间】：2019-06-15 01:00:43
【问题描述】：

我正在建立一个网站，该网站应该有一个登录表单，并决定为其使用 Firebase 身份验证。每当我尝试使用我在 Firebase 控制台中创建的帐户的登录信息登录时，它看起来都不起作用。

我关注了这个 Youtube 教程 (https://www.youtube.com/watch?v=iKlWaUszxB4)，因为它比 Firebase 的更新。

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


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 服务器。

【问题讨论】：

标签： javascript firebase firebase-authentication

【解决方案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

【讨论】：

【解决方案2】：

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

【讨论】：