firebase does not work

Question

firebase does not work

Navigation

#1 by (2 votes)

0

I'm making a website where I use booststrap and firebase. Total that I have the form to collect the user's data to later send it to firebase to add it to the database.

I have searched for information because it does not work (the data is not uploaded to the database), but I have not found anything the code of the html is the following:

    <html>
        <meta charset="UTF-8">
        <head>

            <title>Casco cines</title>
            <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
            <link rel="stylesheet" href="rectk_complicaciones.css" type="text/css" />
            <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
            <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
            <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>



        </head>



        <body>



           <nav class="navbar navbar-expand-lg navbar-light bg-light">
           <a class="navbar-brand" href="Index.html">Casco cines</a>

           <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo02" aria-controls="navbarTogglerDemo02" aria-expanded="false" aria-label="Toggle navigation">

              <span class="navbar-toggler-icon"></span>

           </button>

           <div class="collapse navbar-collapse" id="navbarTogglerDemo02">


                <ul class="navbar-nav mr-auto mt-2 mt-lg-0">
                <li class="nav-item active">

                  <a class="nav-link" href="Top.html">Top <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="categoria.html">Categoria <span class="sr-only">(current)</span></a>

                </li>
                <li class="nav-item active">

                    <a class="nav-link" href="at_cliente.html">Atención al cliente <span class="sr-only">(current)</span></a>

                </li>

                </ul>


                <form class="form-inline my-2 my-lg-0">


                  <a class="navbar-brand" href="login.html">Log in</a>




                </form>


            </div>


        </nav>




        <div>  
           <!-- aca va un espacio -->
           </br>




        </div>
            <div id="SignIn">

                <div class="container">
                    <div id="SignIn-row" class="row justify-content-center align-items-center">
                        <div id="SignIn-column" class="col-md-6">
                            <div class="SignIn-box col-md-12">


                                <form id="SignIn-form" class="form" action="" method="post">
                                    <h3 class="text-center text-info text-dark ">Sign In</h3>


                                    <div class="form-group">
                                        <label for="name" class="text-info text-dark">Name:</label><br>
                                        <input type="text" name="name" id="name" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="surname" class="text-info text-dark">Surname:</label><br>
                                        <input type="text" name="surname" id="surname" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="email" class="text-info text-dark">Email:</label><br>
                                        <input type="text" name="email" id="email" class="form-control">
                                    </div>

                                    <div class="form-group">
                                        <label for="inputPassword" class="text-info text-dark">Password:</label><br>
                                        <input type="password" class="form-control" id="inputPassword">
                                    </div>

                                    <div class="form-group">
                                        <label for="repeatpassword" class="text-info text-dark">Repeat Password:</label><br>
                                        <input type="password" class="form-control" id="repeatpassword">
                                    </div>

                                    <div class=" text-center form-group ">


                                        <button type="button" id="end-pls" onClick="aux()" class="btn btn-danger">Registrate</button>

                                       <!-- <script src="https://www.gstatic.com/firebasejs/5.7.2/firebase.js"></script> -->
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
                                        <script src="https://www.gstatic.com/firebasejs/4.12.1/firebase-firestore.js"></script>
                                        <script>   // Initialize Firebase


                                          var config = {
                                            apiKey: "XXXXXXXXXXX",
                                            authDomain: "xxxxxxxxx",
                                            databaseURL: "xxxxxxxxxxx",
                                            projectId: "xxxxxxxx",
                                            storageBucket: "xxxxxx-xxxxxx.appspot.com",
                                            messagingSenderId: "xxxxxx"
                                          };
                                          firebase.initializeApp(config);

                                          var db= firebase.firestore();



                                         const btn = document.getElementById("end-pls");

                                         btn.addEventListener('click',e=>{

                                         const name = document.getElementById("name").value;
                                         const surname = document.getElementById("surname").value;
                                         const pass=document.getElementById("pass");
                                         const email = document.getElementById("email");




                                          db.collection("Usuarios").add({
                                                name: name,
                                                surname:surname,
                                                pass: pass,
                                                email:email
                                            })
                                            .then(function(docRef) {
                                                console.log("Document written with ID: ", docRef.id);
                                            })
                                            .catch(function(error) {
                                                console.error("Error adding document: ", error);
                                            });

                                             });




                                        </script>
                                    </div>





                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>




        </body>

    </html>

At firestone I have the following rules:

    service cloud.firestore {
      match /databases/{database}/documents {
        match /{document=**} {
          allow read, write;
        }
      }
    }

And finally, in the data I have in the collection "Users", in document "0" (but my idea is that they are created automatically so I try to use collection (..). add) and the collection would be : email, name, pas, surname.

Thank you in advance for all the help.

javascript html5 html firebase

asked by k1k4ss0 30.12.2018 в 20:03

source

1 answer

Format Textbox in C # for WPF project Query with sed bash script string

score 2 · Accepted Answer

Okay, I commented above that you do not publish your credentials on the Internet just for what I just did, but it's just to help, after that, use your app to store a document and it seems that everything went well.

To identify the problem

You should do a console.log(err) in the callback function to know what is happening, personally I could not debug this error, but succeed in storing and reading the document, using the same configuration you have, this means that if it works . My personal opinion is that there is an error in some data of the document that you want to introduce, I could see that in your code you are using the values of the form fields and both pass and email are not asking for the value since you do not use .value in both.

My code:

var config = {
  apiKey: "XXXXXXXXXXXXXXXXXXXXXXXX",
  authDomain: "XXXXXXX.firebaseapp.com",
  databaseURL: "https://XXXXXXXX.firebaseio.com",
  projectId: "XXXXX-XXXXX",
  storageBucket: "XXXXXX.appspot.com",
  messagingSenderId: "XXXXXXXXX"
};
firebase.initializeApp(config);

 var db= firebase.firestore();

const btn1 = document.getElementById("send-pls");
const btn2 = document.getElementById("get-pls"):

btn1.addEventListener('click',e => {
 db.collection("users").doc("SF").set({
    name: "San Francisco", state: "CA", country: "USA",
    capital: false, 
    population: 860000 
    }).catch(function(err){
        console.log(err)
    });


});

//EL ENVIÓ FUE EXITOSO

btn2.addEventListener('click',e => {
 db.collection("users").doc("SF").get().then(function(doc) {
    if (doc.exists) {
        console.log("Document data:", doc.data());
    } else {
        // doc.data() will be undefined in this case
        console.log("No such document!");
    }
}).catch(function(error) {
    console.log("Error getting document:", error);
});


});


//LA RESPUESTA:

Document data: {capital: false, country: "USA", name: "San Francisco", population: 860000, state: "CA"}

In conclusion:

Your configuration is well done, the problem may be in the type of data you are sending, see the documentation Data types and you will notice that it does not support html elements and when sending document.getElementById("email") etas sending this: <input id="email"> instead of the value of the input.

I hope it's helpful, greetings.