Bonjour à tous! Dans cet article, nous allons voir comment utiliser Facebook Login dans Ionic 4.
Il existe aujourd’hui de nombreuses méthodes de connexion disponibles pour les applications mobiles et Facebook reste la plus populaire.
Pour Ionic, la méthode Facebook Login l’une des plus efficace et simple à mettre en place, car pour se connecter il suffit la plupart du temps de cliquer sur un bouton.
Le deuxième avantage de Facebook Login pour Ionic, est que nous pouvons récupérer des informations concernant l’utilisateur comme son nom et sa photo de profil.
Dans ce tuto Ionic, nous allons voir les étapes suivantes:
- Créer un projet Facebook Developper
- Configurer Facebook Login dans Firebase
- Installer Facebook Login dans Ionic
- Créer un bouton de connexion 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: https://drissas.com/associer-firebase-application-ionic-4/
Comment créer un projet Facebook Developper ?
Pour utiliser la méthode de connexion avec Facebook, nous allons avoir besoin d’installer un plugin et de créer un projet Facebook Developper.
Nous allons utiliser plus précisément 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 notamment pour générer des identifiants.
Connectez-vous à Facebook sur le site suivant https://developers.facebook.com/ pour accéder à l’interface Facebook Developper.
C’est sur ce site internet que vous pourrez gérer tous vos projets Facebook, pour chacune de vos applications par exemple.
Commencez par créer un nouveau projet au nom de votre application ou de votre projet actuel. C’est le nom de ce projet que les gens verront lorsqu’ils se connecteront avec Facebook dans votre application.
Vous arrivez alors sur le tableau de bord de votre projet Facebook, c’est ici que vous accédez aux identifiants de votre projet ainsi qu’aux différentes informations nécessaires.
Rendez-vous dans le menu Paramètres puis dans l’onglet Général. Ici vous trouverez tous les identifiants dont vous aurez besoin pour la suite.
Conservez cette page ouverte pour la prochaine étape et ainsi copier l’identifiant de votre application Facebook. Vous aurez également besoin de votre clé secrète, pour l’afficher vous devez entrer votre mot de passe Facebook.
Vous pouvez ajouter une image à votre projet Facebook pour rassurer vos utilisateurs lorsqu’ils se connecterons à Facebook.
Comment configurer Facebook Login dans Firebase ?
Dans cette partie, nous allons associer votre projet Facebook à votre base de données Firebase, pour pouvoir authentifier nos utilisateurs.
Pour commencer ouvrez votre projet Firebase et accédez à la console: https://console.firebase.google.com/
Vous devez avoir un projet Firebase déjà créé pour continuer à suivre ce tuto, si ce n’est pas le cas consultez cet article: https://drissas.com/associer-firebase-application-ionic-4/
Rendez-vous dans le menu Authentification de votre projet Firebase puis cliquez sur « Mode de connexion« .
C’est dans cet onglet que nous allons configurer le mode de connexion Facebook Login, mais également plein d’autre méthode.
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.
Ceux sont les deux informations essentielles pour connecter Facebook et Firebase, ils vous suffit de les entrer dans leur champ respectif pour connecter nos deux services.
La dernière étape à ne pas oublier est de copier l’URI de redirection que vous propose Firebase et de l’entrer dans la console Facebook Developper.
Cette URI est disponible à la fin de votre page de configuration de Facebook depuis Firebase, et vous devez l’entrer dans le menu Paramètres de Facebook Developper, dans le champ « URI de redirection OAuth valides« :
Une fois que vous avez copié et collé cette URI dans Facebook, nous serons autorisés à rediriger nos utilisateurs vers cette URL pour les connecter avec Facebook.
Comment installer Facebook Login dans Ionic ?
Maintenant que vous disposez de l’App ID et du nom officiel de votre projet Facebook, vous pouvez installer le plugin Cordova.
Car pour installer correctement le plugin Facebook Login dans Ionic, vous devez dès le départ lui donner l’identifiant et le nom de votre projet Facebook pour que la configuration fonctionne.
Je vous propose donc les commandes d’installation du plugin, avec comme paramètres pour la commande ionic cordova ces deux informations.
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 installer Firebase natif dans votre application en entrant les deux commandes suivantes:
ionic cordova plugin add cordova-plugin-firebase npm install @ionic-native/firebase
Maintenant que nous avons installé les deux plugins nécessaires au fonctionnement de notre connexion avec Facebook, nous pouvons passer à la rapide configuration de ces plugins.
Pour cela, ouvrez maintenant votre fichier:
src/app/app.module.ts
Nous allons simplement importer le plugin Facebook dans notre fichier app.module.ts comme ceci:
import { Facebook } from '@ionic-native/facebook/ngx';Et pouvoir ensuite le déclarer dans notre provider, et l’utiliser dans le reste de l’application:
providers: [
Facebook,
StatusBar,
SplashScreen,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],Voilà pour l’installation du plugin Facebook Login dans Ionic, avec simplement l’installation de Firebase Natif à faire en plus.
Comment créer un bouton de connexion Facebook dans Ionic ?
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 { 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
L’affichage de votre application sur votre navigateur se fera de manière similaire, simplement avec la plateforme Browser pour vous devez relancer la commande à chaque fois pour faire vos tests.
Comment stocker les informations de l’utilisateur dans Firebase ?
La dernière étape consiste à récupérer les informations renvoyées par Facebook, et de les ajouter à notre base de données Firebase.
Nous allons donc utiliser pour cela le plugin AngularFire qui est indispensable pour travailler avec Firebase dans Ionic.
Encore une fois, je vous renvoie à mon article sur AngularFire: 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
je peux par exemple afficher toutes ces informations dans la console pour vous montrer que nous sommes capable de les récupérer:
.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);
})Finalement, plutôt que de simplement les afficher, nous pouvons les ajouter directement sur Firebase avec le plugin AngularFire.
Ce plugin permet d’ajouter et de récupérer du contenu de notre base de données Firebase, dans notre cas nous allons lui envoyer des informations.
Nous allons créer une table Users dans notre base de données Firebase, avec comme clé l’identifiant de l’utilisateur et comme information son nom et l’URL de sa photo:
this.afDB.object('Users/' + success.user.uid).set({
displayName: success.user.displayName,
photoURL: success.user.photoURL
});De cette manière pour chaque nouvel utilisateur, on stockera ces informations dans la table Users, mais à chaque connexion ces informations personnelles seront mises à jour.
Nous pouvons maintenant ajouter ce bout de code dans nos deux fonctions de connexion avec Facebook.
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() pour tout vos test avec la commande ionic serve:
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));
});
}Vous pouvez donc tester le bon fonctionnement de votre bouton de connexion avec Facebook notamment en testant avec la commande:
ionic serve
Pour faire un test rapide, puis avec la commande:
ionic cordova run browser
Pour faire vos tests comme sur un smartphone. En fait la plateforme Browser a le même comportement que votre application sur un terminal iOS ou Android, c’est un version de votre application que vous construisez puis exécutez.
Contrairement à la version Web classique, qui peut être actualisé en direct, la version Browser comme la version iOS ou Android se construit (pendant quelques minutes) puis s’exécute.
Cette version Browser est également utile pour accéder à des fonctionnalités dites natives de nos smartphones, comme l’accès à la localisation ou à l’appareil photo.
Pour aller plus loin dans le développement mobile avec Ionic et Firebase consultez mon cours IONIC FACILE. Vous y apprendrez à créer 5 applications incroyables avec une interface sociale et des fonctionnalités avancées.