Firebase es una plataforma desarrollada por Google para crear aplicaciones móviles y web. Veremos cómo integrar o conectar firebase con nuestra aplicación web de muestra.
Enfoque: siga los pasos a continuación para integrar su aplicación web con firebase.
- Primero crearemos una página HTML en el archivo index.html.
- Una vez creada la página html, crearemos JavaScript con el nombre form.js.
- Una vez que se haya creado, inicie sesión en Firebase Console y cree un nuevo proyecto.
- Agregue cualquier nombre de su elección. Una vez hecho esto, vaya a Autenticación => Método de inicio de sesión
- Ahora haga clic en habilitar correo electrónico/contraseña.
- Una vez realizado este paso, ejecute el archivo HTML.
A continuación se muestra la implementación del enfoque anterior.
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content= "width=device-width, initial-scale=1.0" /> <script src= "https://www.gstatic.com/firebasejs/8.2.7/firebase-app.js"> </script> <script src= "https://www.gstatic.com/firebasejs/8.2.7/firebase-auth.js"> </script> <script src="form.js"></script> <title>Login System</title> </head> <body> <div class="formContainer"> <h1>Enter Credentials Here:</h1> <input type="email" placeholder="email here" id="email" /> <br /> <input type="password" placeholder="password here" id="password" /> <br /> <button onclick="signUp()" id="signUp"> SignUp </button> <button onclick="signIn()" id="signIp"> SignIn </button> <button onclick="signOut()" id="signOut"> SignOut </button> </div> </body> </html>
Ahora cree un archivo form.js y agregue el código javascript que contendrá los detalles de configuración de firebase y la clave API.
form.js
// Your web app's Firebase configuration
// For Firebase JS SDK v7.20.0 and later,
// measurementId is optional
var firebaseConfig = {
apiKey: "AIzaSyAv_PFCLcflPPO5NYtXkz5r-H9J2IEQzUQ",
authDomain: "login-demo-a03bf.firebaseapp.com",
projectId: "login-demo-a03bf",
storageBucket: "login-demo-a03bf.appspot.com",
messagingSenderId: "831896060677",
appId: "1:831896060677:web:a0616c95abc1bcdedf6d6c",
measurementId: "G-XWHF8K6XSV",
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
const auth = firebase.auth();
// Signup function
function signUp() {
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.createUserWithEmailAndPassword(
email.value,
password.value
);
promise.catch((e) => alert(e.message));
alert("SignUp Successfully");
}
// SignIN function
function signIn() {
var email = document.getElementById("email");
var password = document.getElementById("password");
const promise = auth.signInWithEmailAndPassword(
email.value, password.value);
promise.catch((e) => alert(e.message));
}
// SignOut
function signOut() {
auth.signOut();
alert("SignOut Successfully from System");
}
// Active user to homepage
firebase.auth().onAuthStateChanged((user) => {
if (user) {
var email = user.email;
alert("Active user " + email);
} else {
alert("No Active user Found");
}
});
Ahora, en el panel de Firebase, vaya a Autenticación => Método de inicio de sesión.
Ahora, para ver el resultado completo de la implementación anterior, haga lo siguiente:
Una vez que ingrese los detalles y haga clic en el botón de registro, la página mostrará un mensaje emergente que indica que el usuario inició sesión correctamente. Esto significa que los datos se guardan en Firebase. Vaya a firebase->construir->autenticación->usuarios. Aquí encontrará la identificación de correo electrónico y la contraseña guardada.
Producción:
Ahora su aplicación web está integrada con firebase.
Publicación traducida automáticamente
Artículo escrito por deepthikamath y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA