由于某些原因，我的loginAccount()功能将无法使用。使用createAccount()函数创建帐户时，DOM元素似乎正确，因为已存储输入的电子邮件和密码并在Firebase中更新了我的Auth数据库。
但是，当尝试使用相同的登录名（我刚刚创建的）实际登录用户时，虽然id正确，但Firebase显然从DOM元素中同时获取了null电子邮件和密码。
我确信这是一件很琐碎的事，但是我已经为解决这个问题工作了几天。任何指针都会有所帮助！
index.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>
app.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.");
}
});
您的问题来自以下事实：您的表单是在触发Firebase方法之前提交的。
事实上，您按如下方式声明按钮：
<button id="signUp" onclick="createAccount()">Sign Up</button>
即没有任何type属性。
如W3 specification中有关按钮类型的详细说明，“缺少的默认值是“提交按钮”状态”和“如果type属性处于“提交按钮”状态，则该元素专门为“提交按钮”。
因此，如果将button type添加到按钮上，如下所示，它将解决您的问题。
<button type="button" id="signUp" onclick="createAccount()">Sign Up</button>