Login con Facebook en Firebase

Aprende a implementar login con Facebook en Firebase para web de forma segura y simple: desde la consola de Facebook Developers hasta el flujo en código con FacebookAuthProvider y ventana emergente. Aquí verás cómo habilitar el proveedor en Firebase, configurar la URI de redireccionamiento, usar tu app ID y app secret, y manejar éxito y errores sin complicaciones.

¿Cómo preparar Facebook Developers y Firebase para el login con Facebook?

Para que el inicio de sesión funcione, primero habilita el proveedor de Facebook en Firebase y registra tu aplicación en developers.facebook.com. Este orden evita errores y te asegura tener a mano la URL de redirección que Facebook necesita.

¿Dónde crear la aplicación en Facebook Developers?

• Entra a developers.facebook.com e inicia sesión con tu cuenta de Facebook.
• Haz clic en Mis aplicaciones y selecciona Agregar una nueva aplicación.
• Escribe el nombre para mostrar y el correo de contacto.
• Crea el identificador, completa el reCaptcha y accede al dashboard del proyecto.

¿Cómo habilitar el inicio de sesión de Facebook en Firebase?

• En la consola de Firebase: ve a Authentication y abre Métodos de inicio de sesión.
• Selecciona Facebook y haz clic en Habilitar.
• Copia la URL de redireccionamiento que Firebase muestra para Facebook.

¿Dónde pegar la URI de redireccionamiento?

• En Facebook Developers: abre el producto Inicio de sesión con Facebook y pulsa Configurar.
• Elige web y ve a configuración avanzada si el asistente no es necesario.
• Pega la URI de redireccionamiento que copiaste de Firebase y guarda cambios.

¿Qué datos y ajustes clave debes verificar?

Antes de probar, confirma que tienes los identificadores correctos y que el proyecto está en el modo adecuado para tus pruebas.

• app ID: es el identificador público de la app en Facebook. Cópialo desde Configuración > Básica.
• app secret: es la clave secreta de la app. Muéstrala, autentícate si Facebook lo pide y pégala en Firebase. Guárdala con cuidado.
• URI de redireccionamiento: la provee Firebase para Facebook. Debe coincidir exactamente en Facebook Developers.
• Habilitación del proveedor: en Firebase Authentication, deja Facebook en estado habilitado tras ingresar app ID y app secret.
• Modo desarrollo: el proyecto de Facebook queda en desarrollo por defecto. Para producción, cambia el estado y completa requisitos de privacidad de datos.
• Roles y evaluadores: solo administradores y usuarios de prueba pueden autenticarse en desarrollo. Agrega evaluadores en Roles para permitir a otras personas acceder.
• Intermediación segura: Firebase actúa como intermediario con Facebook y otros terceros. La autenticación no se hace desde el front, se gestiona desde el backend de Firebase, lo que es más seguro.

¿Cómo implementar el flujo de autenticación en código?

El flujo usa un proveedor de Facebook, abre una ventana emergente para credenciales y resuelve una promesa con el resultado: muestra la foto de perfil si existe, cierra el modal y da la bienvenida; si hay error, informa al usuario y a consola.

// Crear el proveedor de Facebook
const provider = new firebase.auth.FacebookAuthProvider();

// Iniciar sesión con ventana emergente
firebase.auth().signInWithPopup(provider)
  .then((result) => {
    const user = result.user;
    // Mostrar foto si existe, cerrar modal y dar bienvenida.
    // Por ejemplo: actualizar avatar y mensaje de bienvenida.
  })
  .catch((error) => {
    // Imprimir en consola y mostrar "Error al autenticarse con Facebook" al usuario.
    console.error(error);
  });

• Proveedor FacebookAuthProvider: indica que las credenciales vendrán de Facebook.
• Ventana emergente: solicita permisos y credenciales de Facebook, luego redirige según la configuración.
• Promesa de resultado: si todo va bien, usa los datos del usuario para interfaz: avatar, cierre de modal y saludo.
• Manejo de errores: captura y muestra un mensaje claro.

Para enlazarlo con la interfaz, ejecuta la función anterior cuando el usuario haga clic en el ícono de Facebook.

// Ejemplo: controlador del clic en el ícono de Facebook
facebookIcon.addEventListener('click', () => {
  // Llamar a la función de autenticación con Facebook.
});

• Si el usuario no tiene imagen en su cuenta, verás la imagen por defecto de Facebook.
• Para pruebas con otras cuentas, recuerda agregar evaluadores en Roles en Facebook Developers.

¿Te animas con el reto? Implementa el inicio de sesión con Twitter y cuéntame en comentarios cómo te fue y qué dudas te surgieron.