首页 > 解决方案 > 数据不会在 javascript 中进入 firebase 数据库

问题描述

这里我使用的是firebase auth,所以我还将用户提供的数据上传到firebase实时数据库中,但我的数据只有在服务器启动时才会发送一次,如果我在启动serer时一次性添加更多用户然后数据不会进入火力基地,甚至不会显示任何错误,工作顺利。一个警告即将到来。 在此处输入图像描述

我不知道问题出在哪里,因为 user.uid 也打印得很好,用户名也打印得很好。

这是我的代码

<html>

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Firebase Server Auth</title>
    <link rel="stylesheet" href="/css/mvp.css" type="text/css" />

    <script src="https://cdn.jsdelivr.net/npm/js-cookie@rc/dist/js.cookie.min.js"></script>

</head>

<body>

    <section>
        <form id="signup">
            <label>
                    Username
                </label>

            <input type="text" name="username" id="username" required/>
            <label>Full Name</label>
            <input type="text" name="name" id="name" required/>

            <label>Email</label>
            <input type="text" name="email" id="email" required/>
            <label>Contact</label>
            <input type="number" name="phone" id="phone" required/>



            <label>Password</label>
            <input type="password" name="password" id="password" required/>
            <button type="submit" id="signup">Sign up</button>

        </form>
        <form action="/login" method="GET">
            <button type="submit">Having Account</button>
        </form>
    </section>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-app.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-auth.js"></script>
    <script src="https://www.gstatic.com/firebasejs/7.15.0/firebase-database.js"></script>



    <script>
        var firebaseConfig = {
            apiKey: "",
            authDomain: "",
            databaseURL: "",
            projectId: "",
            storageBucket: "",
            messagingSenderId: "",
            appId: "",
            measurementId: ""
        };
        // Initialize Firebase
        firebase.initializeApp(firebaseConfig);

        firebase.auth().setPersistence(firebase.auth.Auth.Persistence.NONE);

        document
            .getElementById("signup")
            .addEventListener("submit", (event) => {
                event.preventDefault();
                var email = document.getElementById("email").value;
                var password = document.getElementById("password").value;
                var username = document.getElementById("username").value;
                var name = document.getElementById("name").value;
                var phone = document.getElementById("phone").value;

                firebase
                    .auth()
                    .createUserWithEmailAndPassword(email, password)
                    .then(({
                        user
                    }) => {
                        console.log(user.uid)
                        console.log(username);

                        firebase.database().ref(user.uid).set({
                            "Username": username,
                            "Name": name,
                            "Phone": phone,
                            "Email": email
                        });

                        return user.getIdToken().then((idToken) => {
                            return fetch("/sessionLogin", {
                                method: "POST",
                                headers: {
                                    Accept: "application/json",
                                    "Content-Type": "application/json",
                                    "CSRF-Token": Cookies.get("XSRF-TOKEN"),
                                },
                                body: JSON.stringify({
                                    idToken
                                }),
                            });
                        });
                    })
                    .then(() => {
                        window.location.assign("/login");
                    }).catch(err => {
                        alert("Email Already exist");
                        window.location.assign("/login");
                        console.log(err);
                    })
                return false;
            });
    </script>
</body>

</html>

标签: javascriptfirebasewebfirebase-realtime-database

解决方案


这可能是因为您将submit类型分配给按钮:您的表单是在触发 Firebase 方法之前提交的。createUserWithEmailAndPassword()

您应该将按钮类型更改为button(有关按钮类型的更多详细信息,请参见W3 规范)。

类似于以下内容(未经测试):

    <form id="signup">
        //...
        <button type="button" id="signupButton">Sign up</button>

    </form>


    //...

<script>
    var firebaseConfig = {
      //...
    };
    // Initialize Firebase
    //...

    document
        .getElementById("signupButton")
        .addEventListener("click", function() => {...})

推荐阅读