Firebase signInWithEmailAndPassword NullPointer (JavaScript)

Question

由於某種原因，我的loginAccount() function 將無法正常工作。 使用我的createAccount() function 創建帳戶時，DOM 元素似乎正確，因為輸入的 email 和密碼已存儲並更新我在 Z035489FF8D09274194Z3E4A83241F5AF9 中的身份驗證數據庫。

但是，當嘗試使用相同的登錄名（我剛剛創建的）實際登錄用戶時，顯然 Firebase 正在同時獲得null email 和密碼來自 DOM 元素。

我確信這是一件非常微不足道的事情，但我已經努力解決這個問題好幾天了。 任何指針都會有所幫助！

索引.html

<html>
  <head>
    <title>Login</title>
    <!-- The core Firebase JS SDK is always required and must be listed first -->
    <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-auth.js"></script>

    <!-- TODO: Add SDKs for Firebase products that you want to use
            https://firebase.google.com/docs/web/setup#available-libraries -->
    <script src="https://www.gstatic.com/firebasejs/7.14.2/firebase-analytics.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
  <body>
    <div class="loginbox">
      <img src="avatar.png" class="avatar" />
      <h1>Login Here</h1>
      <form>

        <p>E-mail</p>
        <input type="email" placeholder="Enter E-mail" id="email" />

        <p>Password</p>
        <input type="password" placeholder="Enter Password" id="password" />

        <button id="signUp" onclick="createAccount()">Sign Up</button>
        <button id="signIn" onclick="loginAccount()">Login</button>
        <button id="signOut" onclick="logOut()">Sign Out</button>

      </form>
    </div>
    <script src="app.js"></script>
  </body>
</html>

應用程序.js

// Your web app's Firebase configuration
var firebaseConfig = {
  apiKey: "AIzaSyC9AEwx8_GrHRT8uvFoNiK1DOk6IXITnGQ",
  authDomain: "database-993c9.firebaseapp.com",
  databaseURL: "https://database-993c9.firebaseio.com",
  projectId: "database-993c9",
  storageBucket: "database-993c9.appspot.com",
  messagingSenderId: "856956039875",
  appId: "1:856956039875:web:27ccd6b0d0bc806135a876",
  measurementId: "G-JJYN70EV99",
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);
firebase.analytics();

const auth = firebase.auth();

// Create an account
function createAccount() {
  const email = document.getElementById("email").value;
  const pass = document.getElementById("password").value;
  auth.createUserWithEmailAndPassword(email, pass).catch(function (error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
}

// Login to an account
function loginAccount() {
  const email = document.getElementById("email").value;
  const pass = document.getElementById("password").value;
  auth.signInWithEmailAndPassword(email, pass).catch(function (error) {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // ...
  });
}

// Logout of an account
function logOut() {
  auth
    .signOut()
    .then(function () {
      // Sign-out successful.
      console.log("signed out.");
    })
    .catch(function (error) {
      // An error happened.
    });
}

auth.onAuthStateChanged(function (user) {
  if (user) {
    // User is signed in.
    console.log("user is signed in!");
  } else {
    // No user is signed in.
    console.log("no user logged in.");
  }
});

Answer 1

您的問題來自這樣一個事實，即您的表單是在觸發 Firebase 方法之前提交的。

事實上，你聲明你的按鈕如下：

<button id="signUp" onclick="createAccount()">Sign Up</button>

即沒有任何type屬性。

如W3 規范中關於按鈕類型的詳細說明，“缺失值默認為提交按鈕狀態”和“如果類型屬性在提交按鈕 state 中，則該元素具體為提交按鈕”。

因此，如果您向按鈕添加button type ，如下所示，它應該可以解決您的問題。

<button type="button" id="signUp" onclick="createAccount()">Sign Up</button>

Firebase signInWithEmailAndPassword NullPointer (JavaScript)

問題描述

1 個解決方案

解決方案1
0 已采納 2020-04-25 19:03:56

Firebase signInWithEmailAndPassword NullPointer (JavaScript)

問題描述

1 個解決方案

解決方案1 0 已采納 2020-04-25 19:03:56

解決方案1
0 已采納 2020-04-25 19:03:56