arrow_back Volver
Inicio keyboard_arrow_right Artículos keyboard_arrow_right Artículo

Integrar Facebook Auth de Firebase en Angular

Uriel Hernández

CTO de Código Facilito

av_timer 4 Min. de lectura

remove_red_eye 27202 visitas

calendar_today 25 Octubre 2019

Uno de los principales problemas cuando nos registrarnos en algún sitio web es tener que recordar el usuario y contraseña cuando nos vamos loguear. Por tal motivo es mucho más fácil para nosotros iniciar sesión con alguna red social que tener que recordar con qué datos nos registramos. Para ello existen varios métodos de autenticación dentro de firebase que nos permite iniciar sesión con cualquiera de ellas, sin embargo nos enfocaremos a la más conocida "Facebook".

Configuracion de Firebase y Facebook

Para empezar necesitaremos crear un proyecto en Firebase Console. Luego de ello nos cargará el perfil de configuración, nos dirigimos a "Authentication" y despues "Métodos de inicio de sesion". Y habilitaremos la opción de Facebook, sin embargo nos pide una AppID y AppSecret.

Imgur

Para ello necesitaremos crear una aplicación en Facebook for developers el cual nos proporcionará de un identificador y clave secreta para que firebase pueda comunicarse con él.

Imgur

Tendremos darle un nombre a la aplicación y verificar que el correo de contacto corresponde con el de nuestra cuenta; Y nos redirigirá al menú principal de nuestra app, en ella tendremos que seleccionar Configurar en la tarjeta de inicio de sesión con facebook.

Imgur

Nos preguntara en la plataforma trabajaremos, para ello seleccionaremos "Web"; Nos aparecerá el menú de configuración solicitando la URL de nuestra aplicación, pero se preguntaran ¿tengo que hacer deploy a mi proyecto', pues no ya que firebase se encargará de realizar la comunicación por nosotros. En este caso utilizaremos la URI que nos otorga Firebase al habilitar Facebook (vease en la 2da imagen del tutorial). Daremos save a la url y continuar.

Para obtener el AppID y la AppSecret, nos dirigiremos al menú lateral y seleccionaremos Configuración y luego Básica. Después de eso nos mostrará Identificador de la app y Clave secreta de la app. Y los introducimos en Firebase y guardamos.

Una vez finalizado nos dirigimos a Proyect Overview, y nos aparecerá la leyenda "Para empezar, añade Firebase a tu aplicación" debajo de ella, seleccionaremos Web representado por </>, luego damos un nombre a la aplicación y copiamos var firebaseConfig:

Intregracion a Angular

En nuestra Terminal o CMD crearemos un nuevo proyecto de angular con:

> ng new FirebaseFacebook

Después, instalaremos la librería de Firebase en Angular con el siguiente comando:

> npm install firebase @angular/fire --save

Luego, creamos un archivo llamado firebaseConfig.ts en el directorio "/src/environments" y pegaremos la variable firebaseConfig de la siguiente manera:

Imgur

Hecho esto tendremos que dirigirnos a app.module.ts ubicado en src/app, he importamos la variable, los módulos e inicializamos el módulo de firebase:

import { AngularFireModule} from '@angular/fire';
import { AngularFireAuthModule} from '@angular/fire/auth';
import { firebaseConfig } from '../environments/firebaseConfig';

@NgModule({
  declarations: [...],
  imports: [
    ...,
    // Añadimos estas dos lineas
    AngularFireModule.initializeApp(firebaseConfig),
    AngularFireAuthModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

Ahora necesitaremos un servicio que contendrá los métodos para el respectivo inicio y cierre de sesión. Este se genera con el comando:

> ng generate service services/auth

El archivo aparecerá en src/app/services con el nombre auth.service.ts. Dentro de el importamos los módulos necesarios:

import { AngularFireAuth } from '@angular/fire/auth';
import { auth } from 'firebase/app';

El primero nos servirá para utilizar las herramientas de autenticación de firebase, y el segundo para obtener el provider de Facebook. Después tendremos que inyectar AngularFireAuth en nuestro constructor y obtener el provider de Facebook.

constructor(
    private Auth: AngularFireAuth
  ) { }

fbProvider = new auth.FacebookAuthProvider();

A partir de esto haremos los métodos que se encargaran de comunicarse con firebase y este a su vez con facebook. Primero será el logueo, el cual emplea la variable Auth y el provider que hemos creado.

loginWithFB() {
    this.Auth.auth.signInWithPopup(this.fbProvider)
    .then((result) => {
      console.log(result);
    })
    .catch(err => {
      console.log(err.message);
    })
  }

El método signInWithPopup como su nombre lo dice abre una ventana emergente del proveedor asignado, en este caso facebook, y solicita permisos para acceder a los datos de la cuenta. Además devuelve una promesa con la cual podremos ejecutar código si es que el procedimiento ha sido exitoso o por el contrario si ha fallado. Por lo cual se imprimirá lo que arroje la promesa.

Para utilizar el servicio nos dirigiremos a app.component.ts y app.component.html; En el .ts importamos el servicio y lo inyectamos en nuestro constructor:

import { AuthService } from 'src/app/services/auth.service';

constructor (
    private authService: AuthService
  ) { }

Ahora crearemos el método que será ejecutado por el html, el cual utilizará la variable de nuestro servicio para poder acceder a sus métodos.

logInFB() {
    this.authService.loginWithFB();
}

Solo queda utilizarlo en nuestro .html de la siguiente manera:

<button (click)="logInFB()">
    Iniciar sesion con Facebook
</button>

Este será el resultado:

Imgur

Aumenta tu productividad con GitHub Copilot

  • done Curso GRATUITO
  • done Regístrate antes del 31 de Marzo
  • done Obtén una ventaja competitiva
  • done Aprovecha la IA a tu favor
Más información