Esta es la primera vez que creo un sitio web y solo quiero vincular una autenticación a mi Firebase existente, pero hay muy pocos recursos para guiarme a diferencia de una aplicación móvil. En realidad, no estoy seguro de cómo inicializar una base de fuego o cuál es el código correcto. Estoy intentando durante horas con diferentes códigos, pero nada parece funcionar.
aquí está mi archivo js auth.js:
const firebaseConfig = { apiKey: "AIzaSyDA7bSowKL6wCYQvYshe_OeR_uOSyhUbX0", authDomain: "papamove-delivery-cb80e.firebaseapp.com", projectId: "papamove-delivery-cb80e", storageBucket: "papamove-delivery-cb80e.appspot.com", messagingSenderId: "27728242106", appId: "1:27728242106:web:745e349a85d6cafd1b6983", measurementId: "G-3H1QJ9HJTB" }; // Initialize Firebase const app = initializeApp(firebaseConfig); const analytics = getAnalytics(app);y aquí está mi archivo html:
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Papamove Admin</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet"> <link rel='stylesheet' type="text/css" href='css/style.css' > </head> <body> <script type="text/javascript" src='script/auth.js' ></script> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js" type="module"></script> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js" type="module"></script> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js" type="module"></script> <div id="login_div"class='main-div'> <h3> Papamove Admin</h3> <input type="email" placeholder="Email..." id="email_field"/> <input type="password" placeholder="Password..." id="password_field"/> <button onclick="signIn()">Login</button> </div> <div id="user_div" class="loggedin-div"> <h3>Welcome User</h3> <p> Dashboard</p> <button onclick="signOut()">Logout</button> </div> </body> </html>Necesita cambiar la estructura del documento html. Está realizando una operación de javascript, pero el documento DOM es casi inexistente.
Edite la estructura de su html de acuerdo con el siguiente modelo.
<!DOCTYPE html> <html> <head> <!-- Include CSS and META --> <title>## YOUR TITLE ##</title> </head> <body> <!-- Insert the main html here. --> <!-- Import JS file --> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js" type="module"></script> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-auth.js" type="module"></script> <script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-firestore.js" type="module"></script> <script type="text/javascript" src='script/auth.js' ></script> </body> </html>Actualizar:
Usé una versión anterior en lugar de la última:
<script src="https://www.gstatic.com/firebasejs/9.1.0/firebase-app.js"> </script>Esta versión anterior parece funcionar bien, probaré esta versión para operaciones CRUD y veré si es compatible y factible. Sé que la versión más nueva está preparada para el futuro, pero me di por vencido, mientras esto funcione, estoy bien con una versión desactualizada.
Versión antigua:
<script src="https://www.gstatic.com/firebasejs/8.6.2/firebase.js"> </script>