Facebook Ionic | ¡Todo lo que necesitas saber está aquí!

¿Quieres que tus usuario hagan login con Facebook en tu aplicación Ionic? O, por ejemplo, compartir un post directamente en la red social ¿verdad?

Mi nombre es Aitor Sánchez, soy desarrollador de apps desde 2014, y en este artículo vas a aprender a comunicarte con la api de Facebook desde tu app Ionic y lograr que tus usuario puedas iniciar sesión o compartir contenido en la RRSS directamente desde tu app.

Pero antes de continuar, esta es la Flutter Mafia. Es mi newsletter donde tu vas a aprender a hacer apps y a ganar dinero con ellas junto con otros genietes que ya están dentro. Y si te suscribes te regalo mi ebook "Duplica los ingreso de tus apps en 5 minutos" No es broma, quizás te interese.

Y ahora si, comenzamos. Let´s go!

Instalación de Facebook Ionic

Pues cómo en todos los componentes desacoplados, necesitamos realizar una instalación externa para poder usarlos. Para ello, vamos a utilizar las 2 siguientes líneas de consola:

$ ionic cordova plugin add cordova-plugin-facebook-connect --variable APP_ID="123456789" --variable APP_NAME="myApplication"
$ npm install @awesome-cordova-plugins/facebook

La primera de ella, realizará la instalación del plugin que nos permitirá la comunicación nativa con el sistema donde esté corriendo la aplicación. No te preocupes por las variables, estas las vamos a ver a continuación.

Y la segunda será la que instale el código necesario para que podamos comunicarnos desde el nuestro con el plugin.

Pues listo, ya tenemos lo necesario instalado.

Configuración del componente de Facebook para Ionic

Posteriormente tendremos que realizar la importación dentro de los providers de nuestra app para poder inyectarlo cómo servicio, que es lo que nos interesa.

Nota: Recuerda que no es recomendable incluirlo en el AppModule a menos que lo vayamos a usar por toda nuestra app. Es mejor meterlo en los providers del componente que lo vaya a usar.

...

import { Facebook } from "@awesome-cordova-plugins/facebook/ngx"

...

providers: [
…,
Facebook,
…
]

...

Parte de Facebook en la App

Ahora necesitamos, para sacar las dos variables de la instalación, crear una app en el panel de desarrolladores de Facebook. Para ello vamos a ir a la siguiente dirección URL:

https://developers.facebook.com/apps

Una vez dentro, si no estás registrado tendrás que hacerlo, vamos a crear una nueva app o seleccionar una existente.

Una vez que ya la tengamos, en el panel de la izquierda vamos a pulsar sobre configuración y después sobre información básica. Ahí nos mostrará lo que necesitamos.

En este caso vamos a coger, el App ID y el Display Name. Y estos serán los dos parámetros que usaremos en nuestra app cuando usamos la consola en la sección de Instalación.

Parte del panel de Facebook

El siguiente paso, es incluir la información de nuestra app en el panel. Primero tenemos que sacar el ID, o paquete, de la aplicación de nuestro archivo “config.xml”.

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

“com.mycompany.testapp” sería el nombre del paquete.

Con esto en posesión, vamos a ir otra vez a nuestro panel, donde estábamos antes, y vamos a pulsar sobre “Añadir plataforma”. Así nos permitirá ir añadiendo sistemas de uso.

Instalación en iOS

Pues cuando aparezca la ventana de seleccionar plataforma, hay que pulsar sobre iOS.

Una vez dentro de su configuración, lo único que tenemos que hacer para poder usar el entorno de desarrollo, es poner nuestro nombre de paquete en “Bundle ID”. Y listo, ya podemos hacer uso de Facebook (en desarrollo) en nuestra app.

Instalación en Android

Similar al anterior, cuando aparezca la ventana pulsar sobre Android.

Y cuando estemos ya en la configuración, poner el package ID donde pone “Nombre del paquete de Google Play”.

Una vez que guardemos ya podemos usar el api en desarrollo.

Eventos del api de Facebook

Por otro lado, aunque no es necesario explicación, aquí os voy a dejar dos enlaces para que puedas ilustrarte sobre los eventos que genera el api de Facebook y cuales puede controlar para usar en tu app:

• [iOS] https://developers.facebook.com/docs/ios/app-events
• [Android] https://developers.facebook.com/docs/android/app-events

Los eventos de activación se traquearán automáticamente en tu aplicación solo con tener instalado el módulo.

Plataformas soportadas

• Android
• iOS
• Browser

Cómo se usa Facebook en Ionic, ejemplo / example de uso

Antes de continuar, y cómo me gusta hacer siempre, vamos a meter el ejemplo de uso y así todo queda mucho más claro.

import { Facebook, FacebookLoginResponse } from '@awesome-cordova-plugins/facebook/ngx';

constructor(private fb: Facebook) { }

...

this.fb.login(['public_profile', 'user_friends', 'email'])

  .then((res: FacebookLoginResponse) => console.log('Logged into Facebook!', res))

  .catch(e => console.log('Error logging into Facebook', e));


this.fb.logEvent(this.fb.EVENTS.EVENT_NAME_ADDED_TO_CART);

Como verás, el ejemplo es sencillo pero completamente usable. En primer lugar, realizamos un import de clase “Facebook” y de la interface “FacebookLoginResponse”.

Posteriormente, inyectamos una instancia de la clase “Facebook” en el constructor. Esta clase será la encargada del trabajo duro.

Y cómo podemos ver en el ejemplo, vamos a usar la función “login” para realizar un login contra Facebook.

En caso de que todo vaya correctamente, la promesa se resolverá y llevará consigo una instancia de “FacebookLoginResponse” donde nos dará todos los parámetros necesarios para poder seguir usando el api. Los datos los veremos más adelante, en la sección de interfaces.

En caso de que falle, saldrá por el catch.

Y listo, ya tenemos disponible el ejemplo para usarlo, y lo mejor de todo, ya entendemos cómo funciona.

Funciones y métodos de Facebook en Ionic

Ahora vamos a pasar a ver las funciones disponibles y que es lo que podemos hacer con ellas:

login(permisions)

• Esta función es la que desencadena todo, y la que nos permite acceder a los datos del usuario desde nuestra app.
• Parámetros:
  • permisions -> string[] -> La lista de permisos solicitados cuando un usuario hace login.
    • Aquí tienes una lista de los permisos disponibles: https://developers.facebook.com/docs/facebook-login/permissions/
  • Retorna una promesa que tendremos que contorlar. En ella llega una instancia de “FacebookLoginResponse”. Esta instancia, la veremos más abajo, en la sección de las interfaces.

Ejemplo de respuesta:

{
  status: 'connected',
  authResponse: {
    session_key: true,
    accessToken: 'kgkh3g42kh4g23kh4g2kh34g2kg4k2h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
    expiresIn: 5183979,
    sig: '...',
    secret: '...',
    userID: '634565435'
  }
}

logout()

• Fuerza una desconexión de Facebook y caduca el token de acceso.
• Retorna una promesa que tendrás que controlar. Si se resuelve se habrá realizado correctamente y en caso contrario, habrá fallado.

getLoginStatus()

• Con esta función podemos determinar el estado de conexión del usuario con la app y con Facebook. La respuesta será muy similar a la de login, pero esta vez en el status podremos tener 3 tipos diferentes:
  • connected -> El usuario está logeado en Facebook y autentificado en la app.
  • not_authorized -> El usuario está logeado en Facebook, pero no está autentificado en nuestra app.
  • unknown -> El estado de la conexión es desconocido. También será cuando no esté logeado en Facebook.
• Retorna una promesa que tendremos que controlar. Si se resuelve es que todo ha ido correctamente. De lo contrario, algo ha fallado.

Ejemplo de respuesta:

{
  authResponse: {
    userID: '12345678912345',
    accessToken: 'kgkh3g42kh4g23kh4g2kh34g2kg4k2h4gkh3g4k2h4gk23h4gk2h34gk234gk2h34AndSoOn',
    session_Key: true,
    expiresIn: '5183738',
    sig: '...'
  },
  status: 'connected'
}

showDialog(dialogOptions)

• Esta es la función que se usa en la mayoría de las aplicaciones. Es la que nos permite mostrar, por ejemplo, un dialogo para hacer login o compartir contenidos en nuestro muro.
• parámetros:
  • dialogOptions -> Serán los parámetros que le pasamos a solicitud. Ahora veremos un ejemplo de solicitud más abajo.
    • Los métodos disponibles los tienes disponibles aquí: https://developers.facebook.com/docs/javascript/reference/FB.ui
  • Retorna una promesa que tendremos que controlar. Si se resuelve es que todo ha ido correctamente y los datos solicitados llegan través de ella. En caso de reject, es que algo ha ido mal.

Ejemplo de solicitud:

{
  method: 'share',
  href: 'http://example.com',
  caption: 'Such caption, very feed.',
  description: 'Much description',
  picture: 'http://example.com/image.png'
}

api(requestPath, permissions)

• Esta función hace una llamada a la ApiGraph de Facebook. Algo que se ha realizado a parte del api normal. Digamos una api 2.0
• Puedes consultar más detalles aquí: https://developers.facebook.com/docs/javascript/reference/FB.api
• Parámetros:
  • requestPath -> string -> Será el endpoint deonde queremos hacer la solicitud.
  • permissions -> string[] -> En caso de que falte algún permiso no solicitado en el login, este es el campo donde tenemos que ponerlo. La lista es la misma que hemos visto en el método “login”.
• Retorna una promesa que tendremos que controlar. Similar al resto, si se resuelve todo habrá ido bien y si se sale por el catch habrá fallado.

logEvent(name, params, valueToSum)

• Esta función fuerza un log de evento. Los eventos son los que hemos visto en la sección de eventos.
• Parámetros:
  • name -> string -> El nombre del evento.
  • params -> string -> Será un objeto extra con información adicional del evento. (opcional)
  • valueToSum -> string -> (opcional)
• Retorna una promesa que hay que controlar. Si se resuelve es que todo haya ido correctamente.

logPurchase(value, currency)

• Similar a la anterior, pero para logs de compras in app.
• Parámetros:
  • value -> number -> El valor de la compra.
  • currency -> string -> La moneda utilizada, véase ISO 4217 que es la que utiliza.
• Retorna una promesa que tendremos que controlar. En caso que esté todo correcto se resolverá y en caso contrario fallará y saldrá por el catch.

getDeferredAppLink()

• Nos devuelve el link de la app usada en Facebook.
• Retorna una promesa que tenemos que controlar y que dentro lleva este enlace.

Tutorial en video por si no te gusta leer

Algo más que quizás te interese

Mira, en el momento que tu mejoras el logo de una app que tengas publicada en Google Play, las descargas y los ingresos que esta aplicación genera aumentan. Esto es así. Mejor logo es igual a más dinero.

Basándonos en esto, hemos creado esta herramienta que te permite evaluar, optimizar y mejorar los logos de tus apps para que reciban más descargas. No te quiero espoilear, dentro hay un video explicativo. Entra en el enlace.

Geniete, espero haberte ayudado con tus dudas sobre el tema de la integración con Facebook y nos vemos en el siguiente artículo. Hasta entonces ¡que vaya bien!