header_lecciones_v5

Cómo implementar un login de Facebook con Ionic

por Fabián Serna, el 23 de marzo de 2020

Cómo implementar un login de Facebook con Ionic
Implementar un login con Google o Facebook en Ionic puede ser un dolor de cabeza para muchos desarrolladores de app móviles híbridas, pero con esta guía dejará de ser una molestia. En esta segunda entrega explicaré como hacerlo en Facebook. Si quieres saber cómo hacerlo para Google puedes consultar la primera parte. 

Para implementar el login de facebook en nuestro proyecto ionic debemos:

Crear login de Facebook con Ionic

1. Crear la aplicación en Facebook para desarrolladores

Para crear una aplicación en Facebook, debemos primero iniciar sesión para que se nos habilite la pestaña de Mis apps le damos click allí y luego en Crear una aplicación como podemos ver en la siguiente imagen.

Crear la aplicación en Facebook para desarrolladores

Luego proporcionamos el nombre de la aplicación y un correo electrónico que Facebook automáticamente proporciona con el que hemos iniciado sesión, y le damos click en Crear identificador de la app.

Crear identificador de la app.

Se nos abrirá un panel de servicios que ofrece Facebook para nuestra aplicación, escogemos Inicio de sesión con Facebook dándole click en Configurar.

Configurara aplicación en Facebook

Luego Facebook nos pedirá en que plataforma queremos usar el servicio, seleccionamos web, luego configuraremos el servicio para Android.

Configurara servicio para Android

Ahora nos pedirán la URL de la página que consumirá el servicio de sesión con Facebook, como en este caso solo será una configuración de prueba, proporcionare mi localhost con el puerto en el que corro mi proyecto Ionic, de la siguiente manera.

URL de la página que consumirá el servicio de sesión con Facebook

Damos click en save y luego omitimos los siguientes pasos, simplemente damos click en Configuración y luego en Básica, para configurar la política de privacidad ya que sin ella no podemos activar nuestra aplicación de Facebook.

Configurar la política de privacidad

Para configurar la política de privacidad de nuestra aplicación, simplemente ingresamos en URL de la Política de privacidad exactamente la URL en la que estamos, dicha URL sería https://developers.facebook.com/apps/${tuIdApp}/settings/basic/, lo cual quedaría algo así.

configurar la política de privacidad de nuestra aplicación

Ahora cambiamos el estado de nuestra aplicación dándole click al botón que se muestra en la parte superior del panel.

LoginFace8

Luego nos mostrarán un modal para que elijamos la categoría de la aplicación, seleccionamos el que más se relacione con nuestra aplicación y le damos click en Cambiar modo.

Categoría de la aplicación

2. Configurar Firebase con nuestra aplicación de Facebook

Para configurar nuestra aplicación de Facebook en Firebase, necesitamos el Identificador de la app y la Clave secreta de la app, que podemos encontrar en Facebook volviendo a Configuración > Básica, donde configuramos anteriormente la política de seguridad, para obtener la clave secreta debemos darle click en mostrar.

LoginFAce10

Luego ingresamos la clave de la cuenta con la que iniciamos sesión en Facebook.

Ingresar contraseña

Damos click en Enviar y podremos ver la clave secreta de nuestra aplicación de Facebook.

Ahora volvemos a la consola de Firebase e ingresamos en Authentication > Método de inicio de sesión como hicimos anteriormente para habilitar la autenticación de Google, solo que esta vez será para habilitar la autenticación con Facebook, para esto damos click en Facebook.

Configurar Firebase con nuestra aplicación de Facebook

Damos click en habilitar e ingresamos el identificador de la app en App ID y la clave secreta en App Secret, y antes de darle Guardar copiamos la URL que nos proporcionan debajo del App Secret.

Identificador de la app en App ID y la clave secreta en App Secret

Ahora si le damos en Guardar y volvemos a Facebook, allí damos click en Inicio de sesión con Facebook y luego en Configuración.

LoginFace14

Y en URI de redireccionamiento de OAuth válidos pegamos la URL que copiamos de Firebase y le damos en Guardar cambios.

Pasos Configurar Firebase con nuestra aplicación de Facebook

3. Implementar la autenticación en Ionic

Para implementar la autenticación de Facebook en nuestro proyecto Ionic simplemente debemos editar el método loginFacebook() de la siguiente manera.

async loginFacebook() {

    const res = await this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());

    const user = res.user;

    console.log(user);

    this.picture = user.photoURL;

    this.name = user.displayName;

    this.email = user.email;

}

Ahora, corremos nuestro proyecto Ionic e intentemos iniciar sesión con Facebook, deberíamos obtener el siguiente error.

mplementar la autenticación en Ionic

Pero esto no quiere decir que implementamos mal el login con Facebook, solo que Facebook rechaza las peticiones de autenticación de un sitio web que corre en http y no en https, y nosotros estamos corriendo nuestra aplicación en http, lo que quiere decir que nuestra aplicación ya hace peticiones de autenticación a Facebook en ambientes web.

4. Implementar el plugin Facebook

Hasta este punto de la guia ya tenemos un login con Facebook funcionando solo en ambientes web, ahora vamos a implementar el plugin Facebook en nuestro proyecto Ionic para que nuestro login funcione en ambientes Android también, para esto debemos comenzar con la instalación de dicho plugin.

Para la instalación del plugin necesitamos el Identificador de la app y el Nombre para mostrar que se encuentra en la Configuración > Básica de nuestra aplicación de Facebook.

Implementar el plugin Facebook

 

Luego debemos ejecutar el siguiente comando reemplazando las variables con los datos que acabamos de consultar de nuestra aplicación.

import { Component } from '@angular/core';

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

import * as firebase from 'firebase/app';

import { Platform } from '@ionic/angular';

import { GooglePlus } from '@ionic-native/google-plus/ngx';

import { Facebook, FacebookLoginResponse } from '@ionic-native/facebook/ngx';

 

@Component({

  selector: 'app-home',

  templateUrl: 'home.page.html',

  styleUrls: ['home.page.scss'],

})

export class HomePage {

  ...

  constructor(

    private afAuth: AngularFireAuth,

    private platform: Platform,

    private googlePlus: GooglePlus,

    private fb: Facebook

  ) {}

 

  loginFacebook() {

    if (this.platform.is('capacitor')) {

      this.loginFacebookAndroid();

    } else {

      this.loginFacebookWeb();

    }

  }

 

  async loginFacebookAndroid() {

    const res: FacebookLoginResponse = await this.fb.login(['public_profile', 'email']);

    const facebookCredential = firebase.auth.FacebookAuthProvider.credential(res.authResponse.accessToken);

    const resConfirmed = await this.afAuth.auth.signInWithCredential(facebookCredential);

    const user = resConfirmed.user;

    this.picture = user.photoURL;

    this.name = user.displayName;

    this.email = user.email;

  }

 

  async loginFacebookWeb() {

    const res = await this.afAuth.auth.signInWithPopup(new firebase.auth.FacebookAuthProvider());

    const user = res.user;

    console.log(user);

    this.picture = user.photoURL;

    this.name = user.displayName;

    this.email = user.email;

  }

  ...

}

5. Configurar proyecto Android

Luego de implementar el plugin 'facebook' en nuestro proyecto, debemos agregar la plataforma de android en nuestra aplicación de Facebook, desde Facebook para desarrolladores, entrando de nuevo a la Configuración > Básica, como lo hemos hecho anteriormente, y bajamos del todo en la pagina y damos en Agregar plataforma.

Configurar proyecto Android

Luego nos pedirán seleccionar una plataforma seleccionamos Android. 

Configurar proyecto Android 2

Facebook nos pedirá el nombre del paquete, que ya todos sabemos cual es en este caso, com.pragma.logingaf y nos pedirá un hash de clave la cual obtenemos ejecutando el siguiente comando dependiendo del S.O. de su máquina.

Mac/Linux:

$ keytool -exportcert -alias androiddebugkey -keystore

~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Windows:

> keytool -exportcert -alias androiddebugkey -keystore

"C:\Users\SUUSUARIO\.android\debug.keystore" | openssl sha1 -binary |

openssl base64

Nota: La variable openssl para windows la podemos encontrar en https://code.google.com/archive/p/openssl-for-windows/downloads

El comando anterior nos pedirá una contraseña, ingresamos Android y obtendremos el hash que necesitamos proporcionarle a Facebook.

Luego de conocer el nombre del paquete y el hash de clave volvemos a Facebook e ingresamos los datos en sus campos correspondientes, activamos la opción Inicio de sesión único y damos en Guardar cambios, como se puede ver en la siguiente imagen.

Configurar proyecto Android 3

Al darle Guardar cambios Facebook nos notificará que no pudo encontrar la aplicación en Google Play con el nombre del paquete, pero eso significa que todo esta bien, ya que no hemos subido nuestra aplicación en dicha tienda, simplemente le damos en Usar el nombre de este paquete.

Configurar proyecto Android 4

Ahora necesitamos configurar lo siguiente en nuestro proyecto de Android.
Abrimos el archivo strings.xml que normalmente se encuentra en /app/res/values/ del proyecto de android y agregamos las siguientes lines.

<string name="fb_app_name">NombreDeTuAppEnFacebook</string>
<string name="fb_app_id">IdentificadorDeLaApp</string>
<string name="fb_login_protocol_scheme">fb'IdentificadorDeLaApp'</string>

En este caso sería.

<resources>

    <string name="app_name">LoginGaF</string>

    <string name="title_activity_main">LoginGaF</string>

    <string name="package_name">com.pragma.logingaf</string>

    <string name="custom_url_scheme">com.pragma.logingaf</string>

    <string name="fb_app_name">LoginGaF</string>

    <string name="fb_app_id">600043833895236</string>

    <string name="fb_login_protocol_scheme">fb600043833895236</string>

</resources>

Tenga en cuenta que la última línea es el mismo identificador de la app pero con un fb antes. Ahora editamos el archivo AndroidManifest.xml que normalmente se encuentra en /app/manifests/, agregando a la etiqueta manifest la siguiente propiedad.

<manifest

    xmlns:tools="http://schemas.android.com/tools"

...>

Y debajo del activity en el mismo archivo manifest.xml agregamos lo siguiente.

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/fb_app_id"/>

<activity tools:replace="android:label" android:name="com.facebook.FacebookActivity" android:configChanges= "keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:label="@string/app_name" />

<activity android:name="com.facebook.CustomTabActivity" android:exported="true">

    <intent-filter>

        <action android:name="android.intent.action.VIEW" />

        <category android:name="android.intent.category.DEFAULT" />

        <category android:name="android.intent.category.BROWSABLE" />

        <data android:scheme="@string/fb_login_protocol_scheme" />

    </intent-filter>

</activity>

Y por último debemos resolver el error de hash que se genera al ejecutar nuestra aplicación Ionic en un dispositivo Android físico, ya que Facebook lo tomará como una aplicación que ya ha sido publicada en la tienda de GooglePlay y exigirá el hash con la que fue publicada, cuando en realidad sigue siendo una aplicación en modo desarrollo, para esto simplemente corremos nuestro proyecto Android en un dispositivo móvil físico, no en un emulador porque estos seguirán utilizando el hash que ya hemos registrado en Facebook.

Con la aplicación corriendo en nuestro celular intentamos iniciar sesión con Facebook y volvemos al ide de Android, entramos en la pestaña LogCat, ingresamos hash en el buscador y seleccionamos No Filters, deberíamos obtener el siguiente error.

Configurar proyecto Android 5

Y el key hash de la imagen anterior, marcado en rojo, es el hash que debemos añadir en nuestra aplicación de Facebook, volviendo a Configuración > Básica, como hicimos añadiendo el primer hash.

Configurar proyecto Android 6

Damos en Guardar cambios luego en Usar el nombre de este paquete y finalmente tenemos un login con Google y Facebook funcionando en ambientes Android y web utilizando Ionic 4.

Ojalá esta guía les pueda ser muy útil.

Guía para crear una aplicación serverless en 4 pasos

Temas:Desarrollo de Software

Lecciones Pragma

Lecciones en Academia Pragma

Aquí encontrarás tutoriales técnicos para que apliques en temas de desarrollo de software, cloud, calidad en software y aplicaciones móviles. 

También puedes visitar nuestro Blog con contenido actual sobre Transformación Digital, Marketing, Conocimiento de Usuario y más. 

Blog

Suscríbete a la academia

Descarga la Guía para trabajar con ambientes IBM Websphere Portal