El inicio de sesión con Google es una de las funcionalidades más populares en aplicaciones web modernas. Permite a los usuarios autenticarse rápidamente utilizando sus cuentas de Google, lo que mejora la experiencia del usuario y reduce las barreras de entrada. En este post, te mostraremos cómo implementar esta funcionalidad utilizando Firebase, una plataforma poderosa que simplifica el desarrollo de aplicaciones. Con este tutorial, aprenderás a integrar el inicio de sesión con Google en tu aplicación web paso a paso.
Antes de entrar más en detalle te invito a que te des una ronda por mi blog, cuento con más de 150 aplicaciones disponibles que te podrían servir.
¿Qué es Firebase?
Firebase es una plataforma de desarrollo de aplicaciones web y móviles creada por Google. Ofrece una amplia gama de herramientas y servicios, desde bases de datos en tiempo real hasta autenticación y hosting. Con Firebase, los desarrolladores pueden centrarse en crear funcionalidades sin preocuparse por la infraestructura subyacente.
Paso 1: Configuración Inicial del Inicio de Sesión con Google y Firebase
Antes de comenzar, asegúrate de tener una cuenta de Google y acceso a la consola de Firebase. Sigue estos pasos para configurar tu proyecto de Firebase:
- Crear un Proyecto de Firebase:
- Ve a la Consola de Firebase.
- Haz clic en “Añadir proyecto” y sigue las instrucciones para crear un nuevo proyecto.
- Agregar una Aplicación Web:
- En la consola de Firebase, selecciona tu proyecto y haz clic en el icono de “web” para agregar una aplicación web.
- Sigue las instrucciones para registrar tu aplicación. Firebase te proporcionará una configuración que necesitarás más adelante.
Paso 2: Configuración del Proyecto
Para este ejemplo, crearemos tres archivos principales: index.html, style.css y script.js.
index.html
Este archivo contiene la estructura básica de la página web.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inicio de Sesión con Google y Firebase</title>
<!-- Firebase App (el núcleo de Firebase SDK) -->
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.12.1/firebase-auth-compat.js"></script>
<!-- Estilos CSS -->
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="main">
<div class="container">
<h1>Inicio de Sesión con Google y Firebase</h1>
<button class="button" id="login">
<svg xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid" viewBox="0 0 256 262">
<path fill="#4285F4" d="M255.878 133.451c0-10.734-.871-18.567-2.756-26.69H130.55v48.448h71.947c-1.45 12.04-9.283 30.172-26.69 42.356l-.244 1.622 38.755 30.023 2.685.268c24.659-22.774 38.875-56.282 38.875-96.027"></path>
<path fill="#34A853" d="M130.55 261.1c35.248 0 64.839-11.605 86.453-31.622l-41.196-31.913c-11.024 7.688-25.82 13.055-45.257 13.055-34.523 0-63.824-22.773-74.269-54.25l-1.531.13-40.298 31.187-.527 1.465C35.393 231.798 79.49 261.1 130.55 261.1"></path>
<path fill="#FBBC05" d="M56.281 156.37c-2.756-8.123-4.351-16.827-4.351-25.82 0-8.994 1.595-17.697 4.206-25.82l-.073-1.73L15.26 71.312l-1.335.635C5.077 89.644 0 109.517 0 130.55s5.077 40.905 13.925 58.602l42.356-32.782"></path>
<path fill="#EB4335" d="M130.55 50.479c24.514 0 41.05 10.589 50.479 19.438l36.844-35.974C195.245 12.91 165.798 0 130.55 0 79.49 0 35.393 29.301 13.925 71.947l42.211 32.783c10.59-31.477 39.891-54.251 74.414-54.251"></path>
</svg>
Continuar con Google
</button>
<div id="user-details" style="display:none;">
<p id="user-name"></p>
<img id="user-pic" src="" alt="Foto del usuario">
</div>
<button id="logout" style="display:none;">Cerrar Sesión</button>
</div>
</div>
<!-- Script JS -->
<script src="./script.js"></script>
</body>
</html>
style.css
Este archivo contiene los estilos para la página web.
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background: linear-gradient(120deg, #a1c4fd, #c2e9fb);
background-size: 400% 400%;
animation: gradientAnimation 14s ease infinite;
}
@keyframes gradientAnimation {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
.main {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 30px;
background-color: #fff;
box-shadow: rgba(0, 0, 0, 0.3) 0 5px 15px;
border-radius: 10px;
max-width: 90%;
text-align: center;
animation: bounceAnimation 3s infinite;
}
@keyframes bounceAnimation {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(10px); }
60% { transform: translateY(5px); }
}
h1 {
font-size: 2rem;
color: #333;
margin-bottom: 20px;
}
button {
margin-top: 20px;
max-width: 320px;
display: flex;
padding: 0.75rem 1.5rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
text-align: center;
text-transform: uppercase;
vertical-align: middle;
align-items: center;
border-radius: 0.5rem;
border: 1px solid rgba(0, 0, 0, 0.25);
gap: 0.75rem;
color: rgb(65, 63, 63);
background-color: #fff;
cursor: pointer;
transition: all 0.6s ease;
}
.button svg {
height: 24px;
}
button:hover {
transform: scale(1.05);
}
#user-details {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 20px;
}
#user-details img {
width: 100px;
height: 100px;
border-radius: 50%;
border: 3px solid #ddd;
margin-top: 10px;
}
#user-name {
font-size: 1.25rem;
margin: 10px 0;
}
script.js
Este archivo contiene la lógica de autenticación con Firebase. Nota: Las claves y la información sensible han sido ocultadas.
// Firebase configuration
const firebaseConfig = {
apiKey: "YOUR_API_KEY",
authDomain: "YOUR_AUTH_DOMAIN",
projectId: "YOUR_PROJECT_ID",
storageBucket: "YOUR_STORAGE_BUCKET",
messagingSenderId: "YOUR_MESSAGING_SENDER_ID",
appId: "YOUR_APP_ID",
measurementId: "YOUR_MEASUREMENT_ID"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
// Initialize Firebase Authentication
const auth = firebase.auth();
// HTML Elements
const loginButton = document.getElementById('login');
const logoutButton = document.getElementById('logout');
const userDetails = document.getElementById('user-details');
const userName = document.getElementById('user-name');
const userPic = document.getElementById('user-pic');
// Login Event
loginButton.addEventListener('click', () => {
const provider = new firebase.auth.GoogleAuthProvider();
auth.signInWithPopup(provider)
.then(result => {
const user = result.user;
displayUser(user);
})
.catch(error => {
console.error("Error during sign in: ", error);
});
});
// Logout Event
logoutButton.addEventListener('click', () => {
auth.signOut()
.then(() => {
hideUser();
})
.catch(error => {
console.error("Error during sign out: ", error);
});
});
// Display User Info
const displayUser = (user) => {
userName.textContent = `Hola, ${user.displayName}`;
userPic.src = user.photoURL;
userDetails.style.display = '';
loginButton.style.display = 'none';
logoutButton.style.display = '';
};
// Hide User Info
const hideUser = () => {
userDetails.style.display = 'none';
loginButton.style.display = '';
logoutButton.style.display = 'none';
};
// Firebase Auth State Change Listener
auth.onAuthStateChanged(user => {
if (user) {
displayUser(user);
} else {
hideUser();
}
});
Repositorio del Sistema de Inicio de Sesión con Google en Firebase
Explicación del Código
- index.html: Este archivo define la estructura básica de la página web y carga los archivos CSS y JavaScript necesarios.
- style.css: Este archivo contiene los estilos que hacen que la página se vea moderna y responsiva. Incluye animaciones para el fondo y la caja de login.
- script.js: Este archivo maneja la lógica de autenticación con Firebase. Inicializa Firebase, configura el proveedor de autenticación de Google y define las funciones para manejar el inicio y cierre de sesión.
Beneficios de Utilizar Firebase para la Autenticación
- Seguridad: Firebase Authentication proporciona métodos seguros y robustos para autenticar a los usuarios, protegiendo así tu aplicación contra accesos no autorizados.
- Facilidad de Implementación: Con Firebase, puedes implementar el inicio de sesión con Google de manera rápida y eficiente, sin necesidad de manejar servidores o complejos flujos de autenticación.
- Experiencia del Usuario: El inicio de sesión con Google permite a los usuarios autenticarse utilizando una cuenta que ya conocen y en la que confían, lo que mejora la experiencia del usuario y aumenta la tasa de conversión.
Conclusión
Integrar el Inicio de Sesión con Google y Firebase es una excelente manera de mejorar la experiencia de usuario en tu aplicación web. Con esta guía, has aprendido a configurar Firebase, implementar la autenticación y crear una interfaz de usuario moderna y responsiva. Asegúrate de proteger tus claves y configuraciones sensibles y considera utilizar Firebase para otros servicios que puedan beneficiar tu aplicación. ¡Buena suerte con tu desarrollo!
