实现Web应用的Firebase认证



我正在尝试使用Firebase身份验证创建一个登录系统,我遇到了几个错误。在遵循谷歌的教程(https://www.youtube.com/watch?v=rQvOAnNvcNQ)并创建一个简单的"Index.html","Index.js"在测试中,我收到了错误"Uncaught SyntaxError: Cannot use import statement outside a module index.js:1"。我可以将。js更改为。mjs并将其作为模块读取,但随后。html文件无法在。mjs文件中找到函数。

onAuthStateChanged() logs "No user",所以我知道这是工作的

我已经通过localhost测试了,如果这有任何不同。

任何帮助都将非常感激!

index.mjs

import { initializeApp } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-app.js';
import { getAuth, onAuthStateChanged } from 'https://www.gstatic.com/firebasejs/9.0.0/firebase-auth.js';
const firebaseConfig = {
...
};
const app = initializeApp(firebaseConfig);
const auth = getAuth(app);
onAuthStateChanged(auth, (user) => {
if (user) {
console.log('logged in!');
} else {
console.log('No user');
}
});

function login() {
window.alert("Login successful")
}
function signUp() {
window.alert("Signup successful");
}

index . html

<!DOCTYPE html>
<html lang = "en-US">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title> test </title>
<script type="module" src="/index.mjs"></script>
</head>
<body>
<div class = "login-form">
<input type = "email" class="login-username" id="login-username" autofocus="true" required="true" placeholder="Email" />
<input type = "password" class="login-password" id="login-password" required="true" placeholder="Password" />
<input type = "submit" name="Login" value="Login" class="login-submit" onclick = "login()"/>
<input type = "submit" name="Signup" value="Signup" class="login-submit" onclick = "signUp()"/>
</div>
</body>
</html>

这是具体情况。也许更多的信息会有帮助。但与此同时,试着使用"要求"方式,而不是导入方式。

参考这个链接,因为它有一个解决你可能面临的问题的方法。

最新更新