Autenticación con Facebook en Ionic con Firebase

En posts anteriores vimos cómo utilizar Firebase con Ionic para autenticar usuarios registrar y autenticar usuarios utilizando correo y contraseña; en esta ocasión vamos a ver cómo utilizar el proveedor de Facebook de Firebase para autenticar nuestros usuarios con su cuenta de Facebook.

firebase-ionic-facebook

Prerrequisitos

Por comodidad vamos a adicionar esta funcionalidad a la aplicación que ya empezamos a implementar en los posts anteriores por lo que les recomiendo que lean esos posts primeramente y luego regresen a este.

Aplicación de Facebook

Por supuesto, para poder permitir autenticacion con Facebook necesitamos tener creada una aplicacion de facebook, lo cual podemos hacer en el sitio de desarrolladores de Facebook. Hay muchos articulos sobre como hacerlo por lo que no vamos a entrar en detalles sobre esto, sólo mencionar que vamos a necesitar el App Id de la aplicacion que creemos.

Plugin de Cordova y wrapper de Facebook de Ionic Native

Necesitaremos este plugin y su wrapper de Ionic Native porque vamos a utilizar (de estar disponible) la integración nativa a través de la app de Facebook, de lo contrario vamos a utilizar el navegador para integrarnos.

Para instalarlos, nos colocamos en la carpeta de nuestro proyecto y ejecutamos el comando que veremos a continuación, pero antes, debemos obtener y reemplazar el valor de APP_ID con el “App Id” de nuestra app de Facebook y de igual manera con APP_NAME:

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="1911595049109511" --variable APP_NAME="IonFire"

Con el comando anterior instalamos el plugin de Cordova, antes de seguir quiero mostrar lo que sucedió en mi caso:

Instalando plugin de Cordova de Facebook
Instalando plugin de Cordova de Facebook

Noten como durante la instalación tuve que actualizar un plugin del CLI de Ionic e instalar uno nuevo, esto es debido a que el nuevo CLI de Ionic está organizado ahora por plugins, los cuales vamos a ir instalando a medida que los vayamos necesitando, por ejemplo los comandos relacionados con el CLI de Cordova (como ionic cordova plugin add) se encuentran en @ionic/cli-plugin-cordova por lo cual me ha pedido que lo instale.

Aún falta instalar el Wrapper de Ionic Native, el cual instalaremos ejecutando:

npm install --save @ionic-native/facebook

Finalmente necesitamos registrar el plugin en el módulo principal de nuestra aplicación que se encuentra en src/app/app.module.ts:

Primero lo importamos en la línea 6 y luego lo adicionamos a la lista de proveedores en la línea 52.

El botón

Pues es hora de adicionar el botón de entrar con Facebook, tanto en la pantalla de inicio de sesión como en la de registro respectivamente:

En la línea 31 podemos ver cómo adicionamos un div donde pusimos el botón, ya le colocamos que método queremos invocar cuando lo toquemos (el cual vamos a implementar luego) y le pusimos una clase CSS llamada facebook-btn la cual vamos a crear más adelante para darle un poco de estilo, ahora hacemos lo mismo en la página de registro:

No hay mucho que comentar sobre el código anterior…

Vamos a adicionar la clase CSS al archivo src/theme/variables.scss para poder utilizarla en varias pantallas:

.facebook-btn {
  text-transform: none !important;
  background-color: #4267b2 !important;
}

Ya tenemos todos los cambios visuales que necesitamos, si ejectuamos ionic serve podemos ver el botón en ambas pantallas, pero si lo tocamos veremos que produce un error porque no hemos implementado el método signInWithFacebook().

Servicio de autenticación

Ya nos toca refactorizar un poco el servicio de autenticación que creamos en posts anteriores el cual se encuenta en el archivo src/providers/auth-service.ts, por lo que vamos a cambiarlo por el siguiente código:

Veamos qué modificaciones hicimos:

  • En la línea 4 cambiamos cómo importamos el contenido del módulo firebase/app pues ahora vamos a empezar a necesitar más clases de dicho módulo.
  • Debido a que cambiamos cómo importamos el contenido del módulo firebase/app debemos arreglar algunas referencias que perdimos pues ahora necesitamos especificar que, por ejemplo, las clases User y Promise que estabamos utilizando son del módulo firebase, por lo que a través del código ahora veremos cómo utilizamos firebase.User y firebase.Promise.
  • En la línea 30 vemos la implementación del método que nos va a permitir entrar con Facebook dado un token de autenticación, con dicho token creamos una credencial de tipo FacebookAuthProvider de Firebase la cual luego utilizamos en el método signInWithCredential() de la propiedad auth (instancia de la clase Auth de Firebase) perteneciente a angularFireAuth (servicio de AngularFire que inyectamos en posts anteriores). Necesitamos este método porque con el uso del plugin de Cordova para Facebook vamos a poder obtener el token de autenticación, ya que el mismo nos permite autenticar al usuario, luego necesitamos este método para poder “crear/autenticar” el usuario en nuestra aplicación de Firebase.
  • También implementamos el método signInWithPopup(), el cual vamos a utilizar cuando el teléfono no tenga instalada la aplicación nativa de Facebook o si decidimos usar este código como parte de nuestro sitio web, en resumen lo que hace es que utiliza el método de igual nombre de la propiedad auth el cual recibe una instancia “vacía” de FacebookAuthProvider, el API del Firebase se encarga de autenticar al usuario en Facebook, llenar la instancia de FacebookAuthProvider y “crear/autenticar” el usuario en Firebase.

Implementación de la funcionalidad de los botones

De regreso a las pantallas de inicio de sesión y registro para poder implementar el método signInWithFacebook() que dejamos pendiente, modificamos src/pages/signin/signin.ts de la siguiente manera:

  • En la línea 2 vemos cómo importamos el servicio Platform, con el cual vamos a poder determinar sobre qué entorno se está ejecutando la aplicación.
  • Importamos el wrapper de Ionic Native para el plugin de Facebook, como mismo hicimos en el módulo de la aplicación.
  • En las líneas 24 y 25 (en el constructor) inyectamos los servicios que acabamos de importar.
  • Finalmente en la línea 47, iniciamos la implementación del método signInWithFacebook(), en resumen, lo que hacemos es verificar utilizando el servicio Platform si la aplicación está ejecutandose nativamente (‘cordova’), de ser así utilizamos el plugin de Cordova para Facebook para autenticar el usuario y obtener el token y luego utilizamos el método signInWithFacebook() del servicio de autenticación authService, el cual recibe el token de autenticación de Facebook para “crear/autenticar” el usuario en Firebase. De no estar ejecutándose la aplicación en un entorno nativo utilizamos el método signInWithPopup() el cual ya explicamos anteriormente.

Les dejo de tarea hacer lo mismo en la pantalla de registro, pues es exactamente lo mismo.

Podemos ver que hay un poco de duplicación de código, lo cual vamos a aprender a resolver en un próximo post.

Ya casi estamos listos, sólo faltan algunos pasos que tienen que ver con algunas configuraciones que debemos hacer en Firebase y Facebook.

Firebase

En Firebase tenemos que activar el proveedor de autenticación de Facebook, es muy parecido a lo que hicimos cuando activamos el de “Email/Password” solo que esta vez seleccionamos el de Facebook.

Entramos a la consola de Firebase y seleccionamos el proyecto que creamos para esta aplicación, en mi caso “IonFire”, luego vamos a seleccionar el menú Authentication que se encuentra en el panel de navegación de la izquieda, seleccionamos el tab “SIGN-IN METHOD”, nos colocamos encima de la fila del proveedor de Facebook y veremos cómo al final de la fila aparece un ícono de un lápiz, al hacerle click, veremos la siguiente ventana:

Habilitando proveedor de autenticación de Facebook
Habilitando proveedor de autenticación de Facebook

Como vemos tenemos que activarlo donde dice “Enable” y colocar el “App ID” y el “App Secret” de la aplicación de Facebook que hayamos creado. En la configuración de la aplicación de Facebook tenemos que adicionar las plataformas en las que deseemos publicar nuestra aplicación: Web, Android, iOS, etc. En el caso de la Web debemos colocar la URL que nos muestra en la imagen anterior como “Site URL”:

facebook-site-url
Facebook Site URL

Hay muchas guías sobre cómo configurar una aplicación en Facebook, si tienen algún problema me dejan saber en los comentarios e intentaré ayudarles.

Y eso es todo ya podemos ejecutar nuesta aplicacion y empezar a registrar usuarios con Facebook en Firebase. Espero que les sirva de ayuda.

Si te gustó el post ayuda a compartirlo en tus redes sociales 🙂

 

Anuncios

Un comentario en “Autenticación con Facebook en Ionic con Firebase

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s