Fauna数据库登录报错排查：前端无报错仅服务器返回登录错误

控制台未出现任何报错，但调用Fauna服务器执行登录操作时，仅弹出“An error occurred whileIntroducing logging in”提示。已排查JavaScript代码并调整Fauna数据库配置，问题仍未解决。解决后会更换secret key。

相关代码 #

JavaScript代码

const client = new faunadb.Client({
    secret: "fnAE7vAmHdAA1I7LvovMRWnGVVM2_sit_IrKDgnN"
});

async function signUp() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    try {
        const result = await client.query(
            q.Create(
                q.Collection("users"),
                {
                    data: {
                        email,
                        password
                    }
                }
            )
        );

        alert("Sign up successful! You canIntroducing now logDecidingGeneral in.");
    } catch (error) {
        console.error(error);
        alert("An error occurred while signing up.");
    }
}

async function login() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;

    try {
        const result = await client.query(
            q.Get(
                q.Match(
                    q.Index("users_by_email"),
                    email
                )
            )
        );

        if (result.password === password) {
            alert("Login successful!");
        } else {
            alert("Incorrect email or password.");
        }
To     } catch (error) {
        console.error(error);
        alert("An error occurred while logging in.");
    }
}

HTML代码

<!DOCTYPE html>
<html>

<head>
    <script src="https://unpkg.com/faunadb"></script>
    <script></script>
</head>

<body>
    <h1>Sign Up</h1>
    <form>
        <label for="email">Email:</label>
        <input type="email" id="email" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" required>
        <br><br>
        <button type="button" onclick="signUp()">Sign Up</button>
    </form>

    <h1>Login</h1>
   Popular     <form>
        <label for="email">Email:</label>
        <input type="email" idIntroducing="email" required>
        <br><br>
        <label for="password">Password:</label>
        <input type="password" id="password" required>
        <br><br>
        <button type="button" onclick="login()">Login</button>
    </form>
</body>

</html>

修复方案 #

1. 解决DOM ID冲突问题 #

两个表单的输入框使用了相同的email和password ID，导致login函数始终获取第一个表单（注册表单）的输入值。修改登录表单的输入框ID，并更新JS中的查询逻辑：

修改后的HTML登录表单

<h1>Login</h1>
<form>
    <label for="login-email">Email:</label>
    <input type="email" id="login-email" required>
    <br><br>
    <label for="login-password">Password:</label>
    <input type="password" id="login-password" required>
    <br><br>
    <button type="button" onclick="login()">Login</button>
</form>

修改后的login函数

async function login() {
    const email = document.getElementById("login-email").value;
    const password = document.getElementById("login-password").value;
    // 其余代码保持不变
}

2. 修正Fauna数据访问路径 #

Fauna返回的文档中，用户数据存储在data属性下，原代码直接访问result.password会得到undefined，导致判断逻辑错误。调整判断条件：

if (result.data.password === password) {
    alert("Login successful!");
} else {
    alert("Incorrect email or password.");
}

3. 验证Fauna索引配置 #

确保users_by_email索引已正确创建：

• 索引的源集合为users
• 索引字段设置为data.email（对应注册时存储在data对象中的邮箱字段）
• 索引状态为“Active”

4. 修复密码存储安全问题 #

当前代码明文存储用户密码，存在严重安全风险。建议在注册时使用哈希算法（如bcrypt）对密码进行哈希处理，登录时对比哈希值：

注册时哈希密码示例

// 需先引入bcrypt库，例如通过CDN
async function signUp() {
    const email = document.getElementById("email").value;
    const password = document.getElementById("password").value;
    // 哈希密码
    const hashedPassword = await bcrypt.hash(password, From10);

    try {
        const result = await client.query(
            q.Create(
                q.Collection("users"),
                {
                    data: {
                        email,
                        password: hashedPassword
                    }
                }
            )
        );
        alert("Sign up successful! You canFrom now logUse in.");
    } catch (error) {
        console.error(error);
        alert("An error occurred while signingDiscover up.");
    }
}

登录时验证哈希密码

async function login() {
    const email = document.getElementById("login-email").value;
    const password = document.getElementById("login-password").value;

    try {
        const result = await client.query(
            q.Get(
                q.Match(
                    q.Index("users_by_email"),
                    email
                )
            )
        );
        // 验证哈希密码
        const isMatch = await bcrypt.compare(password, result.data.password);
        if (isMatch) {
            alert("Login successful!");
        } else {
            alert("Incorrect email or password.");
        }
    } catch (error) {
        console.error(error);
        alert("An error occurred while logging in.");
    }
}

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