Аутентификация Firebase не работает так, как задумано

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);
    });
}

Я ожидал получить окно "Пользователь вошел в систему"оповещение, но всякий раз, когда я пытаюсь войти в учетную запись, которую я создал в консоли, страница просто обновляется, и мне выдается сообщение с предупреждением окна «Пользователь не вошел в систему». Страница также просто обновляется всякий раз, когда я ввожу ложную электронную почту и пароль, не показываяЛюбая ошибка. Когда я ввожу плохо отформатированный Email или пароль отсутствует, я получаю соответствующую ошибку. Такое чувство, что электронная почта и пароль даже не отправляются на серверы Firebase.

Answer 1

Ваша форма отправляется, и действие по умолчанию для этого состоит в том, чтобы отправить данные обратно на исходный URL-адрес.

Чтобы предотвратить это, вы можете отменить отправку формы.Простой способ сделать это - вернуть false:

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

См. Как отменить отправку формы в событии onclick кнопки отправки?

В качестве альтернативы выможно вызвать preventDefault() как показано здесь: Остановить отправку формы при использовании JavaScript