Dans cet article, nous allons voir comment utiliser Facebook dans Ionic 4, plus précisément comment:

  • Se connecter avec Facebook sur Ionic
  • Récupérer les informations de Facebook
  • Stocker ces informations sur Firebase

Pour stocker les informations de Facebook dans Firebase, vous devez avoir suivi le tutoriel sur l’association de Firebase à votre application Ionic:

1 – Créer le projet Facebook

Nous allons utiliser le plugin natif Facebook, je vous laisse donc les liens de la documentation officiel d’Ionic et de Cordova:

Avant d’installer ce plugin, vous avez besoin de créer une application sur la console Facebook for developper.

Connectez-vous à Facebook sur le site suivant https://developers.facebook.com/

Le site Facebook for developers

Créez un nouveau projet au nom de votre application ou de votre projet actuel.

Vous arrivez alors sur le tableau de bord de votre projet Facebook.

Rendez-vous dans le menu Paramètres et dans l’onglet Général. Ici vous trouverez tous les identifiants dont vous aurez besoin pour la suite.

Les paramètres où vous trouvez l’ID de l’App et votre clé secrète

Vous pouvez ajouter une image à votre projet Facebook pour rassurer vos utilisateurs lorsqu’ils se connecterons à Facebook.

2 – Configurer Firebase

Ouvrez votre projet Firebase et accédez à la console: https://console.firebase.google.com/

Rendez-vous dans le menu Authentification de votre projet Firebase puis cliquez sur « Mode de connexion »:

Les modes de connexion de Firebase

Ouvrez ensuite l’élément Facebook et activez le service. Ajoutez ensuite votre app ID et votre App Secret que vous avez copié précédemment.

Le mode de connexion Firebase avec Facebook
Les paramètres de Facebook Login où entrer l’URI de redirection

3 – Installer Facebook Login

Maintenant que vous disposez de l’App ID et du nom officiel de votre projet Facebook, vous pouvez installer le plugin Cordova.

Entrez les commandes suivante en remplaçant APP_ID et APP_NAME par les valeurs de votre projet:

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

Nous allons également installer le plugin natif Firebase qui est complémentaire au plugin AngularFire.

Vous pouvez visiter la documentation officielle de ce plugin sur le site d’Ionic: https://ionicframework.com/docs/native/firebase

Vous pouvez directement l’installer dans votre application en entrant les deux commandes suivantes:

ionic cordova plugin add cordova-plugin-firebase
npm install @ionic-native/firebase

Ouvrez maintenant votre fichier:

src/app/app.module.ts

Nous allons importer le plugin Facebook dans notre fichier:

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

Et le déclarer en tant que provider, pour pouvoir l’utiliser dans le reste de l’application:

providers: [
    Facebook,
    StatusBar,
    SplashScreen,
    { provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
  ],

4 – Bouton de connexion

Maintenant que tous nos plugins sont importés, on peut s’attaquer au bouton de connexion et aux fonctions associées.

Ouvrez pour commencer le fichier TypeScript de le page de votre choix:

src/app/home/home.page.ts

Nous commençons par importer les plugins indispensables à notre page, firebase et Facebook:

import * as firebase from 'firebase/app';
import { Facebook } from '@ionic-native/facebook/ngx';

Mais je vous propose aujourd’hui un tutoriel un peu plus avancé, donc je vous invite à importer l’ensemble de ces plugins que j’utiliserai dans la suite de ce tutoriel:

import { Component, OnInit } from '@angular/core';
import { Platform } from '@ionic/angular';
import { AngularFireDatabase } from '@angular/fire/database';
import { AngularFireAuth } from '@angular/fire/auth';
import * as firebase from 'firebase/app';
import { Facebook } from '@ionic-native/facebook/ngx';

Pour commencer je déclare une variable provider que nous allons utiliser pour la connexion avec Facebook et Firebase:

export class HomePage {
	providerFb: firebase.auth.FacebookAuthProvider;

Dans mon consctructor je déclare tous mes plugins pour pouvoir les utiliser dans le reste de ma page:

constructor(
    public afDB: AngularFireDatabase,
    public afAuth: AngularFireAuth,
    private fb: Facebook,
    public platform: Platform
  ) {
  	this.providerFb = new firebase.auth.FacebookAuthProvider();
  }

On attaque ensuite la fonction que nous allons associer avec notre bouton de connexion HTML.

C’est là que la difficulté commence, en fait il vous faut deux techniques de connexion en fonction de votre plateforme de test.

Si vous utilisez « ionic serve » vous utiliserez une certaine technique, tandis que si vous travaillez directement sur un smartphone, vous utiliserez la technique avec cordova.

On utilise alors le plugin platform pour inspecter la plateforme en cours, si vous êtes sur un smartphone il vous dira que vous utilisez cordova, sinon que vous êtes sur la version web classique.

Pas d’inquiétude pour la suite, nous verrons par le suite les deux cas de figure.

Nous créons donc deux fonctions avec un script différent pour que le bouton de connexion fonctionne que l’on soit sur « ionic serve » ou directement sur smartphone:

facebookLogin() {
    if (this.platform.is('cordova')) {
      console.log('PLateforme cordova');
      this.facebookCordova();
    } else {
      console.log('PLateforme Web');
      this.facebookWeb();
    }
}

Du coup nous appelons la première fonction facebookCordova(), qui est en fait celle qui nous est réellement utile sur le long terme.

Ici elle nous renvoie les informations de l’utilisateur de Facebook en cas de succès, et le rapport d’erreur en cas d’échec:

facebookCordova() {
    this.fb.login(['email']).then( (response) => {
        const facebookCredential = firebase.auth.FacebookAuthProvider
            .credential(response.authResponse.accessToken);
        firebase.auth().signInWithCredential(facebookCredential)
        .then((success) => {
            console.log('Info Facebook: ' + JSON.stringify(success));
        }).catch((error) => {
            console.log('Erreur: ' + JSON.stringify(error));
        });
    }).catch((error) => { console.log(error); });
  }

Nous appelons la deuxième fonction facebookWeb(), elle ne servira que pour les phases de test et de développement de l’application.

Les résultats qu’elle renvoie sont similaires à la fonction précédente:

facebookWeb() {
    this.afAuth.auth
      .signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then((success) => {
        console.log('Info Facebook: ' + JSON.stringify(success));
      }).catch((error) => {
        console.log('Erreur: ' + JSON.stringify(error));
      });
  }

Vous pouvez maintenant tester le fonctionnement de vos fonctions en créant un bouton dans votre fichier HTML et en l’associant à votre fonction principale facebookLogin():

<ion-button shape="round" (click)="facebookLogin()">
  <ion-icon slot="start" name="logo-facebook"></ion-icon>
  Connexion avec Facebook
</ion-button>

Pour tester le fonctionnement de la fonction facebookWeb() entrez la commande suivante:

ionic serve

Pour tester le fonctionnement sur smartphone entrez la commande suivante:

ionic cordova run browser

5 – Stocker les informations sur Firebase

La dernière étape consiste à récupérer les informations renvoyées par Facebook, et de les ajouter à notre base Firebase.

Nous allons donc utiliser pour cela le plugin AngularFire importé et déclaré précédemment.

Encore une fois, je vous renvoie à mon article sur Firebase: https://drissas.com/associer-firebase-application-ionic-4/

Dans nos fonction FacebookCordova et FacebookWeb, tout se passe dans la partie:

.then((success) => {
	console.log('Firebase success: ' + JSON.stringify(success));
})

C’est ici que nous pouvons afficher et récupérer toutes les informations sur l’utilisateur une fois connecté. Nous pouvons par exemple afficher trois informations utiles pour notre base de données:

  • Son identifiant Facebook
  • Son nom complet Facebook
  • L’URL de sa photo de profil Facebook
.then((success) => {
	console.log('Firebase success: ' + JSON.stringify(success));
	console.log('uid: ' + success.user.uid);
	console.log('displayName: ' + success.user.displayName);
	console.log('photoURL: ' + success.user.photoURL);
})

Enfin, plutôt que de simplement les afficher, nous pouvons les ajouter directement sur Firebase avec le code suivant:

this.afDB.object('Users/' + success.user.uid).set({
  displayName: success.user.displayName,
  photoURL: success.user.photoURL
});

Votre fonction facebookCordova() doit maintenant ressembler à ceci:

facebookCordova() {
    this.fb.login(['email']).then( (response) => {
        const facebookCredential = firebase.auth.FacebookAuthProvider
            .credential(response.authResponse.accessToken);
        firebase.auth().signInWithCredential(facebookCredential)
        .then((success) => {
            console.log('Info Facebook: ' + JSON.stringify(success));
            this.afDB.object('Users/' + success.user.uid).set({
              displayName: success.user.displayName,
              photoURL: success.user.photoURL
            });
        }).catch((error) => {
            console.log('Erreur: ' + JSON.stringify(error));
        });
    }).catch((error) => { console.log(error); });
  }

Ainsi que votre fonction facebookWeb():

facebookWeb() {
    this.afAuth.auth
      .signInWithPopup(new firebase.auth.FacebookAuthProvider())
      .then((success) => {
        console.log('Info Facebook: ' + JSON.stringify(success));
		this.afDB.object('Users/' + success.user.uid).set({
              displayName: success.user.displayName,
              photoURL: success.user.photoURL
            });
      }).catch((error) => {
        console.log('Erreur: ' + JSON.stringify(error));
      });
  }