Configuración e implementación del método de autenticación con Facebook de Firebase en Angular6.

Configuración e implementación del método de autenticación con Facebook de Firebase en Angular6.

Para habilitar el proceso de autenticación con Facebook:

1. Lo primero que debemos hacer es ir, en la consola de nuestro proyecto en Firebase, a la sección de Authentication, en la pestaña de Método de inicio de sesión o SignIn Method y habilitar el método Facebook donde debemos colocar el App ID y el App Secret. Para obtenerlos vamos a Facebook for Developers (previo inicio de sesión en Facebook) y agregamos nuestra aplicación (en la parte superior derecha), luego en la sección Configuración > Básica obtenemos nuestros App ID y el App Secret.

2. Una vez de vuelta en la consola de Firebase copia la URI de redireccionamiento (justo antes de guardar en la pestaña para habilitar el inicio de sesión con Facebook) y la agregamos en el producto de inicio de sesión con Facebook de nuestra aplicación en la consola de Facebook. Para ello vamos, en la parte derecha, a Productos > Inicio de sesión con Facebook > Configuración a la sección URI de redireccionamiento de OAuth válidos, agregamos la URI que nos provee Firebase y guardamos los cambios.

En este punto ya configuramos el proceso de autenticación con Facebook en nuestro proyecto de Firebase y estamos listos para implementar el inicio de sesión con Facebook en nuestra aplicación.

Nota: justo antes de guardar el proceso de autenticación de Facebook en Firebase hay un enlace Más información, sección Integración con proveedores de identidad federada > Facebook > Web, donde se detalla el proceso.

Implementación de método de autenticación con Facebook en nuestra aplicación Angular6:

1. En nuestro servicio authentication.service.ts agregamos el método logInWithFacebook() e importamos las funcionalidad de firebase/app:

import * as firebase  from'firebase/app'

...

logInWithFacebook() {
    let provider = new firebase.auth.FacebookAuthProvider();
    return this.angularFireAuth.auth.signInWithPopup(provider);
  }

1. En nuestro componente login.component.ts agregamos la llamada al método que acabamos de crear en nuestro servicio:

loginWithFacebook() {
    this.autheticationService.loginWithFacebook()
      .then( data => {
        alert('Logeado con Facebook correctamente')
        console.log(data)
      })
      .catch( error => {
        alert('Ocurrió un error')
        console.log(error)
      })
  }

1. Y finalmente agregamos un botón en la plantilla del componente que ejecute la llamada del proceso de autenticación:

<a (click)="loginWithFacebook()" *ngIf="operation == 'login'" class="btn btn-primary facebook">Logear con facebook</a>