Je vous ai concocté un petit guide pour pouvoir intégrer Facebook Login à votre application Ionic 3 ! Je vous laisse lire la suite...

Petite information avant de commencer, ce guide est réalisé avec la configuration suivante:

• Ionic 3.9.2
• Angular 4.1.3
• Système Windows
• Plateforme Android

Je vous laisse l'adapter suivant votre configuration.

1. Créer son application dans l'environnement Facebook

Facebook Login utilisera une application Facebook que vous devez créer au préalable.

Pour cela, allez sur l'interface developpers de Facebook: https://developers.facebook.com/

En haut à droite, dans Mes apps, cliquez sur Ajoutez une app.

Suivez les instructions. Une fois celle-ci créée, accédez au tableau de bord de cette application.

Notez bien l'ID et le nom de l'app en haut à gauche qui vous seront utiles dans la suite du guide!

2. Démarrer le développement de son application

Commençons par créer l'application avec la commande suivante:

ionic start MyApp blank

Cette commande implique que vous ayiez tout l'environnement de développement d'une application Ionic, c'est à dire NodeJS, le package Ionic et Cordova, le SDK Android Studio et le JDK (Java Development Kit).

Si vous lancez la commande ionic serve --lab, vous aurez la vue suivante:

Si vous lisez attentivement les recommandations Facebook, vous serez amené à:

• Utiliser le SDK Facebook Javascript (Pour application Web)
• Utiliser le SDK Facebook pour Android ou IOS ou d'autres plateformes

Dans notre cas, nous n'allons utiliser ni l'un ni l'autre, mais un plugin fourni par Cordova et implémenté par Ionic.

Dans le répertoire de votre application, exécutez les commandes suivantes (en les adaptant à votre configuration ):

ionic cordova platform add android
ionic cordova plugin add cordova-plugin-facebook4 --variable APP_ID="123456789" --variable APP_NAME="MyApp" --save
npm install --save @ionic-native/facebook

Vous l'avez compris, c'est ici que vous allez définir l'ID et le nom de l'app mentionnés plus haut. Ces commandes installent le plugin Facebook de Cordova ainsi que le package d'intégration du plugin Facebook à Ionic.

Le --save en fin de commande vous permettra d'éviter une erreur du type "plugin_not_installed" lorsque vous déployez votre application sur device.

3. Mettre à jour l'Application sur Facebook

Une fois le plugin Facebook installé, ouvrez le fichier config.xml.

Vous obtenez le résultat suivant:

Notez l'identifiant ID de la balise <widget> qui sera utile à l'application Facebook.

Vous pouvez modifier cet identifiant si vous le voulez

Sur le tableau de bord de l'application Facebook, dans Paramètres > Général, cliquez sur Ajoutez une plateforme.

Choisissez votre plateforme (Dans mon cas Android, vous l'avez compris ).

Recopiez l'ID de la balise <widget> dans Nom du package Google play:

Si vous définissez un ID différent de io.ionic.starter, un message indiquant que Facebook ne trouve pas le package dans le store apparait. Validez quand même.

4. Récupérer la clé de Hashage pour le développement (Android seulement)

Si vous utilisez une autre plateforme qu'Android sur un système différent de Windows, vous pouvez passer ce chapitre.

Pour valider votre application, Facebook aura besoin de la Hash key. Il vous faut la générer.

Si vous n'avez pas openSSL, vous devez l'installer. Pour cela:

• Récupérez la version openSSL correspondant à votre système sur ce lien: https://code.google.com/archive/p/openssl-for-windows/downloads. (Attention, les utilisateurs de Windows 64bits doivent télécharger openssl-0.9.8e X64, et non la dernière version)
• Dézippez le contenu dans un répertoire
• Ajoutez le chemin vers bin de ce répertoire dans le PATH système (comme ceci ...path\openssl-0.9.8e_X64\bin)

Localisez l'outil keytool dans les répertoires du JDK (Par exemple C:\Program Files\Java\jdk1.8.0_131\bin\keytool.exe)

Ouvrez un nouveau terminal, placez-vous sur C:\ puis exécutez la commande suivante:

"C:\Program Files\Java\jdk1.8.0_131\bin\keytool.exe" -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64

Lorsque le mot de passe est demandé, entrez "android".

Il ne vous reste plus qu'a saisir cette clé dans le champs Hashages clés des paramètres de l'application Facebook.

5. Développer son application

Maintenant que tout est prêt entre Facebook et l'application Ionic, il ne nous reste plus qu'a implémenter Facebook Login.

Commençons par importer le module Facebook de Ionic. Dans app.module.ts:

// src/app/app.module.ts
...
import { Facebook } from "@ionic-native/facebook";

@NgModule({
  ...
  providers: [
    ...
    Facebook
  ],

Nous allons ensuite créer un provider Facebook Service. Dans facebook-service.ts:

// src/providers/facebook-service.ts

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

@Injectable()
export class FacebookService {

  session: any;

  constructor (public facebook: Facebook) {}

  login(){
    //On demande les permissions suivantes: email
    this.facebook.login(['email']).then((response)=>{
      if(response.status === "connected"){
        this.session = response;
        console.log(this.session);
      }
    }, (error)=>{console.log(error);});
  }
}

Ne pas oublier de déclarer ce provider dans app.module.ts

Dans le fichier home.ts:

// src/pages/home/home.ts

import { Component } from '@angular/core';
import { FacebookService } from "../../providers/facebook-service";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public facebook: FacebookService) {  }

  fbLogin() {
    this.facebook.login();
  }

}

Dans le fichier home.html:

<!-- src/pages/home/home.html -->

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

<ion-content padding>
  <button ion-button full (click)="fbLogin()">Connect with facebook</button>
</ion-content>

Le code ci-dessus permet d'afficher les informations de session de Facebook. Pour tester votre code, vous devez exécuter la commande ionic cordova run android car le service serve ne permettra pas d'instancier le plugin facebook de Cordova.

Maintenant que nous pouvons nous connecter à Facebook, nous allons récupérer des infos grâce au Graph de Facebook.

Dans facebook-service.ts:

// src/providers/facebook-service.ts

...
import { Observable } from 'rxjs/Observable';

...
  login(){
    //On retourne un observable pour gérer les réponses Asynchrones
    return Observable.create(observer => {
      this.facebook.login(['email']).then((response) => {
        if (response.status === "connected") {
          this.session = response;
          observer.next(true);        //On retourne true ou false qui correspond au statut de la connexion
          observer.complete();
        } else {
          observer.next(false);
          observer.complete();
        }
      }, (error) => {
        console.log(error);
      });
    });
  }

  getProfile(){ // Nouvelle fonction qui retourne un Observable avec les informations de profil
    return Observable.create(observer => {
      if(this.session.status === "connected"){
        this.facebook.api("/me?fields=name,picture", ["public_profile"]).then((response)=>{
          console.log(response);
          observer.next(response);    //On retourne la réponse Facebook avec les champs name et picture
          observer.complete();
        },(error) => {
          console.log(error) });
      } else {
        observer.next(undefined);
        observer.complete();
      }
    });
  }

Dans le fichier home.ts:

// src/pages/home/home.ts

...
export class HomePage {

  userProfile: any;    //Cet objet contiendra les informations de profil
  ...

  fbLogin() {
    this.facebook.login().subscribe((connected)=>{   //On surveille l'observable afin de récupérer le status de connection
      if(connected === true){
        this.facebook.getProfile().subscribe((profile)=>{   //Si connecté, on récupére le profil
          this.userProfile = profile;
        }, (error)=>{console.log(error);});
      }
    }, (error)=>{console.log(error);});
  }

}

Dans le fichier home.html:

<!-- src/pages/home/home.html -->

...

<ion-content padding>
  ...
  <ion-card *ngIf="userProfile">
    <img src="{{userProfile.picture.data.url}}" >
    <p>{{userProfile.name}}</p>
  </ion-card>
</ion-content>

Après test de l'application, on obtiendra le résultat suivant:

Vous pouvez constater que l'image de votre profil Facebook se trouve dans userProfile.picture.data.url. Vous pouvez vérifier l'objet récupéré dans la console.

Si vous voulez manipuler d'autres champs et permissions Facebook, vous avez la liste ici.

Le code source du guide est disponible sur Github: https://github.com/clemdesign/ionic-3-facebook-login-sample

C'est tout pour ce guide. En espérant qu'il vous sera utile!

Je vous donne rdv au prochain article.

Article précédent Article suivant

---