Autenticación nativa con Facebook en Ionic 3.x

En este post vamos a explicar como se realiza la autenticación nativa con Facebook en Ionic 3.x, ya que hay diferentes formas de realizar esta integración. Aquí vamos a usar el enfoque nativo, es decir, que usa la aplicación nativa de Facebook (si estuviera instalada en el teléfono) para realizar la autenticación en nuestra app Ionic sobre plataformas Android. De esta manera, el usuario no tendrá que introducir sus credenciales cada vez que nuestra aplicación solicite autorización a Facebook.

   

La documentación (https://ionicframework.com/docs/native/facebook/) oficial de Ionic nos remite al siguiente plugin (https://github.com/jeduan/cordova-plugin-facebook4). Según la documentación del plugin, el mismo es un «fork» del plugin original para Facebook. Visto que este original está menos mantenido que el el «fork», usaremos el «fork».

Paso 1: Crear una aplicación en Facebook Developers

Para ello, lo primero que tenemos que hacer es irnos al portal de desarrollo de Facebook (https://developers.facebook.com/). Iniciamos sesión con nuestra cuenta de Facebook.

Hacemos clic en “Mis aplicaciones”. Aquí nos aparecerán las que tengamos ya creadas. En nuestro caso, vamos a crear una nueva.

Vemos en la parte superior izquierda el nombre de la aplicación y su identificador.

Paso 2: Configurar la nueva aplicación

Para ver más detalles sobre la aplicación nos vamos a la sección “Configuración”.

Pulsamos en “+ Añadir plataforma”, y elegimos, en este caso, Android.

Introducimos el ID del paquete, que conseguimos del archivo ~/config.xml en el proyecto, que se genera cuando hacemos ionic cordova platform add android).

 <widget id="com.f.login" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0"> 

También nos pide su hash, que conseguimos con el keytool igual. Para obtener el hash, utilizamos keytool, herramienta incluida en el Java SE Development Kit (JDK) que tengamos instalado. OpenSSL lo podemos descargar desde OpenSSL. Abrimos una terminal y ejecutamos el siguiente comando:

keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64

Esto genera una cadena de 28 caracteres.

La introducimos en el portal de Facebook Developers.

Cuando guardemos los cambios, nos saldrá este mensaje, pero como la aplicación todavía no es pública, lo podemos ignorar.

Ahora, una parte importante es configurar al menos un usuario de prueba. Dado que nuestra aplicación todavía no es pública, no queremos que por casualidad alguien se haga con la APK y pueda hacer log in en ella a través de Facebook, de modo que dispongamos de las credenciales necesarias para probarla y acceder a ella. Podemos modificar la contraseña del usuario ya creado o añadir otros nuevos.

Si lo hacemos con un usuario que no esté definido de prueba, es decir, con permisos para usar el log in a través de Facebook, nos aparecerá el siguiente mensaje:

En “Revisión de la aplicación” es donde configuramos si nuestra aplicación es pública o no, en este caso la dejamos como no pública porque estamos haciendo pruebas. Además, es donde podemos ver los datos que vamos a recibir del usuario cuando inicie sesión. Los permisos básicos (“public_profile”, “user_friends” e “email”) no necesitan “enviarse a revisión”, se aprueban de forma automática, esto es, nuestra aplicación puede utilizar estos permisos sin necesidad de que Facebook analice qué uso hacemos de ellos.

Sin embargo, este proceso es obligatorio para el resto de permisos, en el que Facebook revisa el modo en que se usan, para lo cual hay que seguir un procedimiento especial desde el portal que no vamos a ver aquí:

Por ahora, dejaremos los permisos que vienen por defecto, no seleccionaremos ninguno extra.

Paso 3: Crear proyecto en Ionic

Toca crear nuestro proyecto en Ionic.

Creamos una aplicación en blanco con:

ionic start fNativeLogin blank

Si nos pregunta si queremos añadir integración con Android, respondemos que sí.

La variable “APP_ID” es la App ID que vimos antes en el portal de Facebook en la sección de “Configuración”. “APP_NAME” es el nombre que se muestra en el Dashboard del portal de Facebook. También instalamos el módulo npm para ionic-native.

ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="XXXXXXXXXXXXXXXX" --variable APP_NAME="fNativeLogin"

En tu proyecto, sustituye “XXXXXXXXXXXXXXXX” por tu ID.

npm install --save @ionic-native/facebook

Tras esto, en nuestro archivo ~/config.xml aparecerá lo siguiente:

<plugin name="cordova-plugin-facebook4" spec="^1.9.1">
        <variable name="APP_ID" value="XXXXXXXXXXXXXXXX" />
        <variable name="APP_NAME" value="fNativeLogin" />
</plugin>

En tu proyecto, sustituye “XXXXXXXXXXXXXXXX” por tu ID.

A continuación, añadimos el siguiente código a los archivos:

/src/app/app.module.ts (solo se muestran las líneas añadidas)

import { Facebook } from "@ionic-native/facebook";
// ...
providers: [
    // ...
    Facebook
  ]
// ...

/src/pages/home/home.ts (se muestra código completo)

import { Component } from '@angular/core';
import { Platform } from "ionic-angular";
import { NavController } from 'ionic-angular';
import { Facebook } from "@ionic-native/facebook";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  scopes: string[];
  isLoggedIn: boolean;
  user: any;

  constructor(private facebook: Facebook,
              public platform: Platform,
              public navCtrl: NavController) {
    this.scopes = ['public_profile', 'user_friends', 'email'];
    this.isLoggedIn = false;

    platform.ready().then((readySource) => {
      console.log("Platform ready from", readySource);
      // More info on login status at: https://developers.facebook.com/docs/reference/javascript/FB.getLoginStatus
      facebook.getLoginStatus()
        .then(response => {
          console.log("Status: ", response.status);
          if(response.status === "connect") {
            console.log("User logged in and has authenticated the app: ", response);
            this.isLoggedIn = true;
          } else {
            console.log("User logged in to Facebook but has not authenticated the app OR user isn't logged into Facebook", response);
            this.isLoggedIn = false;
          }
        })
        .catch((error) => console.log(error));
    });
  }

  public loginWithFacebook(){
    this.facebook.login(this.scopes)
      .then(response => {
        if(response.status === "connected") {
          console.log("Logged in succesfully");
          this.getUserDetail(response.authResponse.userID);
          this.isLoggedIn = true;
        } else {
          console.log("Not logged in :(");
          this.isLoggedIn = false;
        }
      })
      .catch((error) => console.log('Error logging into Facebook', error));
  }

  public logoutFromFacebook(){
    this.facebook.logout()
      .then( (response) => {
        console.log("Logged out: ", response);
        this.isLoggedIn = false
      })
      .catch((error) => {
      console.log('Error logout from Facebook', error)}
      );
  }

  getUserDetail(userId) {
    this.facebook.api("/" + userId +"/?fields=id,email,name,picture,gender",["public_profile"])
      .then((detail) => {
        console.log("User detail: ", detail);
        this.user = detail;
      })
      .catch((error) => {
        console.log(error);
      });
  }
}

/src/pages/home/home.html (se muestra el código completo):

<ion-header>
  <ion-navbar>
    <ion-title>
      Ionic Blank
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
    Tap the "Login with" button to login using the Facebook native app. If the app can't be found
    (maybe because it isn't installed), a prompt will appear (to install it). When logged in, tap "Logout from" to log out from Facebook.

<div *ngIf="isLoggedIn == true && user">

<h2>Hi, {{user.name}} ({{user.email}})</h2>

      Gender: {{user.gender}}

      <img src="{{user.picture.data.url}}" width="100" alt="{{user.name}}" />

      <button ion-button icon-right (click)="logoutFromFacebook()">
        Logout from
        <ion-icon name="logo-facebook"></ion-icon>
      </button>
  </div>

    <button ion-button icon-right (click)="loginWithFacebook()">
      Login with
      <ion-icon name="logo-facebook"></ion-icon>
    </button>

</ion-content>

Ejecutamos nuestra aplicación en Android con:

ionic cordova run android

Comprobamos que funciona. Si abrimos nuestra aplicación e intentamos hacer login en Facebook sin la aplicación nativa instalada, nos llevará a la página web. Si ya la tenemos instalada, nos llevará a la pantalla de login de la aplicación nativa. Nos pedirá los permisos que hayamos definido en la variable «scopes» de /src/pages/home/home.ts y en el portal de desarrollo. En cuanto hagamos login satisfactoriamente volveremos a nuestra aplicación y se mostrarán los datos del usuario.

Todo el equipo de Tribalyte esperamos que os haya sido muy útil esta entrada. En breve publicaremos otro artículo similar sobre cómo realizar el registro y autenticación desde la app nativa de LinkedIn. Estad atentos!

---