学校项目Firebase登录系统点击事件无响应问题求助

问题排查及修复方案 #

现有代码核心问题汇总 #

• 引入的Firebase SDK版本和代码语法不匹配：当前使用的是Firebase v9版本，但代码写的是v8版本的调用语法，v9默认是模块化API，不存在全局firebase对象，也不会自动暴露initializeApp、认证相关方法，JS执行直接报错，导致后续定义的点击函数全部失效。
• HTML中SDK引入错误：重复引入了两次firebase-app.js，且没有引入必须的认证模块SDK；另外form.js放在<head>中加载，早于DOM节点渲染，JS执行时如果读取DOM元素会直接报错。
• 异步逻辑顺序错误：注册/登录的请求是异步的，原有代码直接在调用方法后弹出成功提示，无论接口请求成功失败都会先弹提示，逻辑完全错误。
• 冗余语法错误：JS中initializeApp调用后多写了一个分号，<input>标签多写了冗余的闭合标签</input>。

修复方案（直接替换即可运行） #

1. 替换HTML代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login System</title>
    <!-- 替换为v8版本SDK，和现有语法适配无需修改核心逻辑 -->
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-auth.js"></script>
</head>
<body>
    <div class="formContainer">
        <h1>请输入账号信息:</h1>
        <input type="email" placeholder="请输入邮箱" id="email">
        <input type="password" placeholder="请输入密码" id="password">
        <button onclick="signUp()" id="signUp">注册</button>
        <button onclick="signIn()" id="signIn">登录</button>
        <button onclick="signOut()" id="signOut">登出</button>
    </div>
    <!-- JS放在body末尾，保证DOM加载完成后再执行 -->
    <script src="form.js"></script>
</body>
</html>

2. 替换JS代码

var firebaseConfig = {
    apiKey: "AIzaSyAlbLt0YTa41lbutVo1-ic5nPV9Yri9-vE",
    authDomain: "loginv2-b2f0e.firebaseapp.com",
    projectId: "loginv2-b2f0e",
    storageBucket: "loginv2-b2f0e.appspot.com",
    messagingSenderId: "144798003676",
    appId: "1:144798003676:web:257d3f649f532bb6d51f19",
    measurementId: "G-X6QG246ZF6"
};

// 初始化Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();

// 注册函数
function signUp(){
    var email = document.getElementById("email").value;
    var password = document.getElementById("password").value;
    auth.createUserWithEmailAndPassword(email, password)
    .then(() => {
        alert("注册成功");
    })
    .catch(e=>alert(e.message));
}

// 登录函数
function signIn(){
    var email = document.getElementById("email").value;
    var password  = document.getElementById("password").value;
    auth.signInWithEmailAndPassword(email, password)
    .then(() => {
        alert("登录成功");
    })
    .catch(e=>alert(e.message));
}

// 登出函数
function signOut(){
    auth.signOut()
    .then(() => {
        alert("已成功登出系统");
    })
    .catch(e=>alert(e.message));
}

// 监听用户登录状态
firebase.auth().onAuthStateChanged((user)=>{
    if(user){
        var email = user.email;
        alert("当前登录用户："+email);
    }else{
        alert("未检测到登录用户")
    }
})

额外注意事项 #

• 需要先进入Firebase控制台的认证模块，开启邮箱/密码登录开关，否则会报权限错误。
• 测试时设置的密码长度需要至少6位，否则Firebase会抛出参数错误。

内容的提问来源于stack exchange，提问作者Ellis Conrad