Cómo integrar Facebook login con Firebase

Añade login con Facebook a tu app Angular usando Firebase de forma segura y rápida. Aquí verás cómo implementar signInWithPopup con FacebookAuthProvider, habilitar el provider en Firebase y configurar App ID y App Secret en Facebook Developers, con manejo de errores y verificación del usuario.

¿Cómo integrar login con Facebook en Firebase y Angular?

Implementa el flujo en tu servicio de autenticación y conéctalo al componente de login. La clave es usar AngularFireAuth con signInWithPopup y el FacebookAuthProvider.

¿Qué código va en el servicio de autenticación?

• Importar la librería completa de Firebase y su auth.
• Crear el método público facebookLogin.
• Usar signInWithPopup con new firebase.auth.FacebookAuthProvider().
• Manejar then y catch para éxito y error.

// autorización.service.ts
import * as firebase from 'firebase/app';
import 'firebase/auth';

export class AutorizacionService {
  constructor(private angularFireAuth: AngularFireAuth) {}

  public facebookLogin() {
    return this.angularFireAuth.auth
      .signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then(result => {
        alert('Usuario logueado con Facebook');
        console.log(result); // Explora datos útiles del usuario.
        // TODO: redirigir al usuario cuando el login sea correcto.
      })
      .catch(error => {
        console.log(error); // Manejo de errores.
      });
  }
}

¿Cómo lo llamo desde el componente y la vista?

• Crear un método facebookLogin en el componente que invoque al servicio.
• Añadir un botón alternativo en la pantalla de login.

// login.component.ts
export class LoginComponent {
  constructor(private autorizacionService: AutorizacionService) {}

  facebookLogin() {
    this.autorizacionService.facebookLogin();
  }
}

<!-- login.component.html -->
<button class="btn btn-warning btn-block" (click)="facebookLogin()">
  Login con Facebook
</button>

¿Qué configuración en Firebase y Facebook es obligatoria?

Sin habilitar el provider, verás el error "The given sign in provider is disabled". Activa Facebook en Firebase y configura la app en Facebook Developers.

¿Cómo habilitar Facebook en Firebase Authentication?

• Ir a Authentication > Sign-in method.
• Habilitar Facebook y pulsar Enable.
• Pegar el App ID y App Secret.
• Guardar cambios.

¿Cómo crear la app y obtener App ID y App Secret en Facebook?

• Entrar a developers de Facebook y crear una nueva app.
• Añadir el producto Facebook Login y elegir Web.
• Definir un Site URL temporal si hace falta.
• Ir a Facebook Login > Valid OAuth Redirect URLs.
• Pegar la URL que muestra Firebase para completar el setup.
• Guardar y copiar App ID y App Secret.
• Volver a Firebase y pegarlos en Facebook, luego Save.

¿Qué buenas prácticas y debugging se aplican?

Al finalizar, el login abrirá una ventana de popup y autenticará al usuario con Facebook. Considera estos puntos para un flujo sólido.

¿Cómo manejar estados y errores del flujo?

• Usar .then para éxito: alerta, registro con console.log, y redirección del usuario.
• Usar .catch para errores: imprimir el error en console.log.
• Estar listo para casos raros donde se llama then y catch.

¿Cómo verificar el usuario autenticado?

• Revisar en Application > local storage que exista el usuario autorizado.
• Comprobar en la sección de usuarios que aparezca el usuario de Facebook y el de email como registros distintos.

Ideas clave del flujo: - AngularFireAuth con signInWithPopup y FacebookAuthProvider. - Authentication > Sign-in method en Firebase. - App ID y App Secret desde Facebook Developers. - Valid OAuth Redirect URLs configurado correctamente. - Redirección tras el login exitoso.

¿Tienes dudas sobre algún paso o quieres replicarlo con Google, Twitter o GitHub usando el mismo patrón? Cuéntame en comentarios qué provider quieres integrar y en qué parte necesitas ayuda.