por Fabián Serna, el 23 de marzo de 2020
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 la aplicación en Facebook para desarrolladores
- Configurar Firebase con nuestra aplicación de Facebook
- Implementar la autenticación en Ionic
- Implementar el plugin Facebook
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.
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.
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.
Luego Facebook nos pedirá en que plataforma queremos usar el servicio, seleccionamos web, luego configuraremos el 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.
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.
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í.
Ahora cambiamos el estado de nuestra aplicación dándole click al botón que se muestra en la parte superior del panel.
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.
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.
Luego ingresamos la clave de la cuenta con la que iniciamos sesión en Facebook.
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.
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.
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.
Y en URI de redireccionamiento de OAuth válidos pegamos la URL que copiamos de Firebase y le damos en Guardar cambios.
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.
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.
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.
Luego nos pedirán seleccionar una plataforma seleccionamos Android.
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.
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.
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.
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.
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.
