Firebase数据库数据存储失败及密码系统相关技术咨询

一、数据无法存入Firebase数据库的问题修复 #

1. 错误：存入DOM元素而非输入值 #

你的代码中直接将DOM元素对象（如email、phone）存入数据库，而非用户输入的实际值，Firebase无法识别DOM对象，导致数据无法正确存储。修改方式：获取元素的.value属性，且建议在点击事件触发时实时获取最新输入：

function signUpNewUser(){
    // 实时获取用户输入值
    const email = document.getElementById("email").value;
    const phone = document.getElementById("phone-number").value;
    const firstName = document.getElementById("firstName").value;
    const lastName = document.getElementById("lastName").value;

    set(ref(database, 'users/' + email.replace(/\./g, '_').replace(/@/g, '__')), {
        userEmail : email,
        userPhoneNum : phone,
        userFirstName : firstName,
        userLastName : lastName
    })
    .then(() => {
      console.log("数据存储成功")
    })
    .catch((error) => {
      console.log("存储失败：", error)
    });
}

2. 错误：覆盖整个users节点 #

原代码中ref(database, 'users/')会直接覆盖users节点下的所有数据，新用户注册会清空之前的所有用户记录。建议用转义后的邮箱（Firebase路径不支持@和.）作为节点键，或用push生成唯一ID：

// 方式1：转义邮箱作为键（方便后续查询）
const escapedEmail = email.replace(/\./g, '_').replace(/@/g, '__');
set(ref(database, 'users/' + escapedEmail), { ... })

// 方式2：用push生成唯一ID
set(push(ref(database, 'users/')), { ... })

3. 按钮事件冲突问题 #

按钮同时绑定了onclick="confirmData() ; stopClicksAgain()"和addEventListener("click", signUpNewUser)，可能导致事件触发异常。建议统一事件绑定方式，比如移除HTML中的onclick属性，保留addEventListener逻辑，同时检查confirmData函数是否有阻止后续执行的逻辑。

二、检查同一邮箱下的两个值（用于密码系统） #

注意：禁止明文存储密码，建议对密码进行哈希处理后存储，或直接使用Firebase Auth的密码认证功能，以下为自定义实现的示例思路

1. 存储结构设计 #

用转义后的邮箱作为节点键，方便快速查询：

// 注册时存储（示例：用btoa做简单哈希，生产环境请用专业哈希库如bcrypt）
const escapedEmail = email.replace(/\./g, '_').replace(/@/g, '__');
set(ref(database, 'users/' + escapedEmail), {
    userEmail: email,
    hashedPassword: btoa(password),
    userPhoneNum: phone,
    // 其他字段...
})

2. 查询邮箱对应的数据并验证 #

当用户登录时，根据输入的邮箱转义后查询节点，对比密码：

import { getDatabase, ref, get } from "https://www.gstatic.com/firebasejs/9.22.2/firebase-database.js";

async function checkCredentials(inputEmail, inputPassword) {
    const escapedEmail = inputEmail.replace(/\./g, '_').replace(/@/g, '__');
    const userRef = ref(database, 'users/' + escapedEmail);
    
    try {
        const snapshot = await get(userRef);
        if (snapshot.exists()) {
            const userData = snapshot.val();
            // 验证密码
            if (btoa(inputPassword) === userData.hashedPassword) {
                console.log("验证通过");
                // 执行登录逻辑
            } else {
                console.log("密码错误");
            }
        } else {
            console.log("该邮箱未注册");
        }
    } catch (error) {
        console.log("查询失败：", error);
    }
}

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