Implementación de Autenticación con Facebook en Firebase

Clase 10 de 32 • Curso de Firebase 5 para Web

Clase anteriorSiguiente clase

Resumen

¿Cómo implementar autenticación con Facebook usando Firebase?

Integrar la autenticación de Facebook en tu aplicación web puede mejorar significativamente la experiencia del usuario al permitir un acceso rápido y seguro. En este artículo, te mostraremos cómo implementar el inicio de sesión con Facebook usando Firebase, paso a paso.

¿Cómo configurar un proyecto en la consola de Developers de Facebook?

El primer paso para integrar la autenticación de Facebook es crear una aplicación en la consola de Developers de Facebook. Aquí te explicamos cómo hacerlo:

  1. Acceder a Developers de Facebook:

  2. Crear una nueva aplicación:

    • Ve a "Mis aplicaciones" y selecciona "Agregar una nueva aplicación".
    • Ingresa un nombre para la aplicación, como "Blog.geek.plaxi", y proporciona un correo electrónico de contacto.
    • Completa el proceso de creación pasando el control de seguridad y reCAPTCHA.

  3. Configurar la aplicación:

    • En el dashboard de la aplicación, ve a la sección de "Configuración" y selecciona "Básica".
    • Obtén el AppID y el AppSecret, que necesitarás más tarde.

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

Con los datos obtenidos de la consola de Facebook, ahora puedes habilitar el inicio de sesión de Facebook en Firebase.

  1. Acceder a la consola de Firebase:

    • Navega a la sección de "Métodos de inicio de sesión" en tu proyecto de Firebase.

  2. Habilitar Facebook:

    • Selecciona la opción de inicio de sesión con Facebook y actívala.
    • Ingresa el AppID y el AppSecret que obtuviste de Facebook.

  3. Configurar la URL de redireccionamiento:

    • Copia la URL que Firebase proporciona para la redirección y configúrala en la consola de Facebook.

¿Cómo implementar el código para la autenticación?

Con la configuración del lado de la consola finalizada, es momento de codificar la autenticación con Facebook en tu aplicación.

const provider = new firebase.auth.FacebookAuthProvider();

firebase.auth().signInWithPopup(provider).then((result) => {
  // Proceso exitoso, mostrar resultado
  console.log(result.user.displayName);
  // Otra lógica, como mostrar foto de perfil o mensajes de bienvenida
}).catch((error) => {
  // Manejar errores
  console.error("Error al autenticar con Facebook:", error.message);
});

Consideraciones importantes sobre el modo de desarrollo

  • Modo de desarrollo: Inicialmente, tu aplicación de Facebook estará en modo desarrollo. Para moverla a producción, asegúrate de completar todos los requerimientos de privacidad que Facebook te indique.
  • Usuarios de prueba: Los usuarios, por defecto, están como "usuarios de prueba". Para permitir que otros accedan a tu aplicación, agrégalos en roles como "evaluadores".

Al seguir estos pasos, podrás ofrecer una opción adicional de inicio de sesión que mejora la experiencia del usuario al simplificar el proceso de autenticar en tu aplicación. No olvides que practicar y experimentar con estas configuraciones te ayudará a estar preparado para desafíos similares en el futuro.

Y eso no es todo, te dejo un reto: ¡prueba a implementar la autenticación con Twitter para continuar expandiendo tus habilidades!