在Javascript中使用带有Firebase的Authentication(使用基于密码的帐户(时遇到问题。
我遵循了这份文件：https://firebase.google.com/docs/auth/web/password-auth一切都如我所料。
这是我的配置以及我遇到问题的地方。
我有一个主网页(名为M.html(，需要登录才能访问。
我有一个登录页面(名为L.html(，它是访问主页的入口。
当用户进入登录页面时，他需要输入凭据才能继续操作。如果他登录，他应该访问主页。
如果用户试图直接转到主页，则会执行检查以查看其登录状态。如果他登录了，一切都会好起来，如果他没有登录，他应该被迫回到登录页面。
但实际情况是，主页从未检测到用户已登录，并且他总是被带回登录页面。
我需要知道要遵循的过程，以使主页面知道登录页面中已接受登录。
我在代码中尝试了各种选项，但都不起作用。我还读到，我可能不得不使用firebase.auth((.getRedirectResult((.then…，但没有找到任何方法使其正常工作。
为了使事情变得清楚，我制作了主登录页面的简化版本。以下是两者的代码。我希望有人能很容易地看到我应该在哪里更改代码，以获得我想要的行为。
M.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"></script>
</head>
<body>
<div id="mainPage"></div>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
</script>
<script>
function checkUser() {
let user = firebase.auth().currentUser;
if (user) {setMainPage();}
else {window.open("http://.../L.html",'_self');}
}
function setMainPage() {
let label = document.getElementById("mainPage");
label.innerHTML = "<h1>This is the main page!</h1><br/>";
label.innerHTML += "<h1>I can be here because I am logged in !!</h1>";
}
//setMainPage(); // This would show the contents without checking that a user is logged in.
checkUser();
</script>
</body>
</html>
L.html文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="https://cdn.firebase.com/js/client/2.4.2/firebase.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.5.7/firebase.js"></script>
</head>
<body>
<script>
// Initialize Firebase.
var config = {
apiKey: "myyKeyyy",
authDomain: "......firebaseapp.com",
databaseURL: "https://......firebaseio.com",
projectId: "....",
storageBucket: "........appspot.com",
messagingSenderId: "........."
},
app = firebase.initializeApp(config);
</script>
<script>
firebase.auth().signOut().then(function() {
// Sign-out successful.
console.log("Sign-out successful.");
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// User is signed in.
window.open("http://.../M.html",'_self');
}
});
}).catch(function(error) {
// An error happened.
console.log("Sign-out error.");
});
function LogInProcess() {
let theEmail = document.getElementById("EmlAdr").value.trim(),
thePassword = document.getElementById("PsWd").value;
firebase.auth().signInWithEmailAndPassword(theEmail,thePassword).catch(function (error) {
// Handle Errors here.
var errorCode = error.code;
var errorMessage = error.message;
console.log("errorCode: " + errorCode);
console.log("errorMessage: " + errorMessage);
// ...
});
}
</script>
Email address: <input type='text' name='EmlAdr' id='EmlAdr' value=''><br/><br/>
Password: <input type='password' name='PsWd' id='PsWd' value=''><br/><br/>
<input type='button' id='LgIn' style='font-size:20px' value='Log In' onClick='LogInProcess()'><br/>
</body>
</html>
您需要使用onAuthStateChanged观察器来检查用户是否已登录。否则，您通常会得到处于不完整状态的auth对象。请查看此处的最新文档。
将checkUser功能替换为：
firebase.auth().onAuthStateChanged(function(user) {
if (user) {
// show your main content
} else {
// redirect to login
}
})
一旦firebase应用程序完全初始化，这将触发，如果用户成功登录，你应该有一个用户。