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 Facebookconst provider =newfirebase.auth.FacebookAuthProvider();// Iniciar sesión con ventana emergentefirebase.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 FacebookfacebookIcon.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.
Creo que a todo el curso le falto explicar todo el HTML de como funciona.
Pero ese no es el punto central del curso, si se pone a explicar todo el HTML y Js, que hacen y como funciona, el curso pierde su esencia. Para entender bien html, css3, js están otros cursos dedicados para este fin, que ayudan en su totalidad a seguir el curso
Para este curso en necesario saber esos temas.
los que lo quieran hacer con twitter deben:
registrarse en : developer.twitter.com
repetir en autenticacion.js
authTwitter(){const provider =newfirebase.auth.TwitterAuthProvider(); firebase.auth().signInWithPopup(provider).then(result=>{$('#avatar').attr('src', result.user.photoURL)$('.modal').modal('close')Materialize.toast(`Bienvenido ${result.user.displayName} !! `,4000)}).catch(error=>{console.error(error)Materialize.toast(`Error al autenticarse con Twitter: ${error}`,4000)})}```
3. en authController.js
4.Agregar las llaves que les da twitter en su firebase
5. agregar a twiter la url que les da firebas.(https://developer.twitter.com/en/docs/apps/app-permissions)Es mas lento que en facebook pero la metodologia en igual.
jajajaja "tengo un reto para tí" como si la autenticación con estas apps fuese algo intuitivo.
ayuda! al iniciar sesion con facebook me sale
Facebook has detected MyApp isn't using a secure connection to transfer information.
Until MyApp updates its security settings, you won't be able to use Facebook to log into it.
Para ambos casos Facebook y Twitter es necesario soplicitar accesos Elevados para poder acceder a la informacion del Login, es facebook es facil en twitter, solo deben agregar un pequeño texto diciendo que es para fines de estudio y ya te aprueban.
Al parecer hay un problema con la carga de este video. @teamplatzi
con la aplicacion de invie solicite la autorizacion por twitter para utilizar la autenticacion y nunca la aprobaron. a lo mejor estoy haciendo algo mal?
Hola, me puedes contar cual fue el proceso que hiciste?? para la autenticación con twitter tienes que ir a () y crear una app, y en la consola del proyecto tienes los datos para colocar en firebase
Como comenta el profesor por favor dirígete a Twitter Developer y crea la aplicación (no se te será rechazada) e instantaneamente se te darán las credenciales de uso necesarias para el Twitter Login :muscle:
Buenos días un favor muy grande aún no logro autenticarme con email, Google, Facebook, ya he revisado en varias ocasiones y el código esta correcto. solo que cuando reviso en la consola me sigue marcando error aquí:
.catch(err => {
_ console.error(error)_ --> Esto en mi código lo tengo como comentario
** console.error(err)** indicando que esta indefinido
Materialize.toast(Error al autenticarse con Facebook: ${err}, 4000)
})
Les comento que cambien un poco el código por que la forma en que nos enseñaron me marcaba más errores(que es la que esta en comentario)
** no es para hacer comentarios en js, para eso tienes:
//comentario de una línea
o bien
/*comentario de
varias líneas*/
También, dentro de los parámetros de Materialize.toast, el string no lo pasas entre cadenas (como cualquier otro string) y al no ir entre cadenas es interpretado como una variable (incluso con espacios en blanco) y eso te da error al no estar definida. Prueba a poner:
Materialize.toast(´Error al autenticarse con Facebook: ${err}´,4000)
Excelente, estoy haciendo esto a la vez que hice un tutorial de Dominicode en youtube y el curso de Angular y todo se complementa perfecto. Recomendado Dominicode, Angular 9 con Firebase.
Pueden usar la consola del navegar para ver los posibles problemas.
Excelente curso!!
Autenticación google ✔
Autenticación Facebook ✔
buenas noches Mariano angtes que nada felicidades por completar estos pasos.
Un favor yo realice la autenticación con google y facebook pero me marca ciertos errores, te comparto mi repo en git y githubpages para ver si me puedes apoyar e indicar en donde me equivoque.
Para los que tienen problemas con firefox y el error "he popup has been closed by the user before finalizing the operation" es debido a una extension en mi caso que bloquea el seguimiento por parte de facebook, solo hay que desistalarlo o desactivarlo y permitirá el inicio automatico con fb
¿Alguien pudo mostrar su foto de perfil? A mi no me carga. Ya probé con otro facebook y me sigue saliendo el avatar por defecto.
¿Quiere decir que para este tipo de proyectos no se necesitan un backend developer?
Firebase es una herramienta todo en uno. Funciona muy bien para empezar un proyecto. Pero si escala mucho, que es la idea, deja de funcionar tan bien y lo recomendable es empezar a construir tus propios sistemas.
Firebase es un backend as service
me sale el siguiente error, porque sera?
la autenticacion con facebook queda registrado en firebase? o solo es para acceder?
con facebook queda registrado en firebase el correo y se crea el UID de usuario, de igual forma te sirve para acceder. Si tratas de registrar una cuenta con el mismo correo que accediste de facebook no te lo permite porque ya existe.Sin embargo hay una opción para crear varias cuentas con la misma dirección de correo
Me funcionó correctamente el inicio de sessión con Google y con Facebook. Sin embargo, en Firebase tuve que habilitar una opción para permitir que se puedan crear varios usuarios con el mismo correo; de lo contrario al ya estar registrado con la cuenta de google no me dejaba realizar el registro con facebook.
¿Hay alguna manera de que permita ingresar con Google y Facebook y que en Firebase se cree sólo un registro de usuario?
¡Hola! Tengo el tutorial perfecto para ti:
:point_right: How to link Social Logins with Firebase in React
Mi commit de esta clase con mi practica de nextjs con este curso
