Dans ce tutoriel en deux parties (directement issu du même article que j’avais posté fin 2016 sur l’ancienne version du site), nous allons nous intéresser à l’intégration et l’utilisation de l’API Facebook dans une application Android.
Le tutoriel détaille la marche à suivre avec Android Studio et Gradle, mais les manipulations sont sensiblement les mêmes pour les autres IDEs et systèmes de build.
Facebook fourni un SDK (Software Development Kit) spécifique pour Android. Ces APIs vous permettent d’intégrer un certain nombre de fonctionnalités dans votre application. Dans ce tutoriel, nous nous concentrerons sur l’authentification à l’aide de Facebook, l’obtention de son nom et de son image de profil et nous utiliserons brièvement l’API Graph afin de récupérer l’adresse email d’un utilisateur.
Les sources de l’exemple peuvent être trouvées à cette adresse.
Configurations
Création et configuration du projet
Dans un premier temps, créez un nouveau projet Android. Pour pouvoir utiliser le SDK Facebook, le projet doit utiliser une version de l’API Android supérieure ou égale à l’API 15 (Ice Cream Sandwich – Android 4.0.3).
Pour ce projet de test, utilisez de préférence un activité vide.
Les autorisations d’accès à internet sont nécessaires, ajoutez le code correspondant dans le manifeste du projet :
|
1 |
<uses-permission android:name="android.permission.INTERNET"/> |
Il faut ensuite inclure le SDK Facebook. Celui-ci utilisant Maven, il faut ajouter le dépot Maven Central au fichier de build de projet de Gradle (build.gradle) :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
// Top-level build file where you can add configuration options common to all sub-projects/modules. buildscript { repositories { jcenter() mavenCentral() } dependencies { classpath 'com.android.tools.build:gradle:2.1.2' // NOTE: Do not place your application dependencies here; they belong // in the individual module build.gradle files } } allprojects { repositories { jcenter() mavenCentral() } } task clean(type: Delete) { delete rootProject.buildDir } |
Rappelons qu’un projet Gradle Android comporte deux fichiers build.gradle. L’un étant au niveau “projet” (dans le répertoire racine du projet), et le second au niveau “app” (dans le répertoire app/). Pour l’ajout de Maven Central, il faut modifier le fichier de niveau projet.
Enfin il est nécessaire d’ajouter la dépendance du Facebook SDK au fichier build.gradle de niveau app :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
apply plugin: 'com.android.application' android { compileSdkVersion 24 buildToolsVersion "24.0.0" defaultConfig { applicationId "fr.etienne_boespflug.samples.facebook_api_sample" minSdkVersion 15 targetSdkVersion 24 versionCode 1 versionName "1.0" } buildTypes { release { minifyEnabled false proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro' } } } dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) testCompile 'junit:junit:4.12' compile 'com.android.support:appcompat-v7:24.2.0' compile 'com.facebook.android:facebook-android-sdk:[4,5)' } |
Afin de s’assurer que le projet est correctement configuré, ajoutez import com.facebook.FacebookSdk; dans le fichier MainActivity.java afin de vérifier que l’importation du package fonctionne et lancez l’application.
Si tout ce passe bien, vous pouvez passer à la suite.
Enregistrement de l’application
Avant de pouvoir utiliser l’API Facebook, il est nécessaire d’enregistrer la nouvelle application, de manière à obtenir un identifiant d’application unique. Pour ce faire, rendez vous sur la console développeur Facebook. Il vous sera proposé de créer un compte développeur si vous n’en possédez pas encore.
Création d’une nouvelle application
Il vous est alors proposé de créer une nouvelle application, entrez le nom de votre application et cliquez sur “Create New Facebook App ID”.
Par la suite, précisez le “display name” qui est le nom de l’application tel qu’il sera affiché ainsi que la catégorie de l’application et l’adresse mail de contact.
Ces informations (display-name, catégorie etc…) ne sont pas celles qui seront utilisées par le Play Store de Google. Il s’agit là de deux plateformes différentes. Facebook demande ces valeurs afin de pouvoir correctement rediriger l’utilisateur en cas d’erreur et pour des raisons légales (et certainement aussi parce-qu’ils aiment bien récupérer des données quand ils en ont l’occasion ;)).
Une fois que l’application est créée, vous arrivez sur la page de configuration. Celle-ci se présente sous la forme d’un tutoriel pour la configuration. Passez directement à la toute fin où il vous sera demandé de préciser le nom du package de l’application et le nom de l’activité principal :
Puisque l’application n’est pas encore publiée sur Google Play, une boite de dialogue vous demandera de confirmer le nom du package.
Génération du Development Key Hash
Afin de pouvoir authentifier les requêtes provenant de notre application, il faut fournir un Key Hash.
Puisque l’application est toujours en cours de développement, il va falloir fournir une clef de développement (Development Key Hash). Lors de la mise en production, une nouvelle clef devra être générée. En effet, lorsque vous travaillez avec une clef de développement, seuls les comptes Facebook prévus pour les tests sont autorisés à se connecter sur votre application pour des raisons de sécurité.
La génération de cette clef de développement peut se faire simplement à l’aide de l’outil Keytool et d’OpenSSL.
En toute logique, keytool doit être disponible sur votre ordinateur puisqu’il est fourni avec le JDK. Si vous ne possédez pas OpenSSL, vous pouvez le télécharger à cette adresse.
Génération en ligne de commande sous Windows
Sous Windows, rendez-vous dans le répertoire contenant l’exécutable keytool. Celui-ci se trouve dans le dossier bin du répertoire d’installation du JDK (en général C:/Program Files/Java/jdk1.x.x_xx/bin).
Exécutez ensuite la commande suivante :
|
1 |
keytool -exportcert -alias androiddebugkey -keystore %HOMEPATH%\.android\debug.keystore | openssl sha1 -binary | openssl base64 |
Il est possible que votre keystore soit situé à un autre emplacement que %HOMEPATH%\.android\debug.keystore, dans ce cas, remplacez le chemin par celui de votre keystore. De la même manière, remplacez la commande openssl par le chemin de l’executable openssl.exe si la commande n’est pas reconnue par l’invite de commande Windows (“C:\Program Files\OpenSSL\bin\openssl.exe” sur ma machine par exemple).
Génération en ligne de commande sous GNU/Linux et Mac OS
Sous Mac OS, utilisez la commande suivante :
|
1 |
keytool -exportcert -alias androiddebugkey -keystore ~/.android/debug.keystore | openssl sha1 -binary | openssl base64 |
Ici aussi, si le keystore de développement n’est pas situé dans le répertoire ~\.android\debug.keystore, remplacez le chemin-ci dessus par le vôtre.
Génération en Java
Une autre solution pour récupérer le Key Hash est d’utiliser une fonction Java qui récupère le hash à notre place et l’afficher sur la console.
L’affichage du Key Hash ne doit en aucun cas rester en production pour des raisons de sécurité. Dans l’idée, si vous choisissez cette méthode, commentez le code java se chargeant de la récupération du hash pour éviter tout appel malveillant.
Pour ce faire, nous allons utiliser la fonction statique suivante :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
public static String getFacebookKey(Context context) { try { @SuppressLint("PackageManagerGetSignatures") PackageInfo info = context.getPackageManager().getPackageInfo(context.getPackageName(), PackageManager.GET_SIGNATURES); for(Signature signature : info.signatures) { MessageDigest md = MessageDigest.getInstance("SHA"); md.update(signature.toByteArray()); return Base64.encodeToString(md.digest(), Base64.DEFAULT); } } catch (android.content.pm.PackageManager.NameNotFoundException e) { Log.e("POSTHASH", "SHA-1 generation: the key count not be generated: NameNotFoundException thrown"); } catch (NoSuchAlgorithmException e) { Log.e("POSTHASH", "SHA-1 generation: the key count not be generated: NoSuchAlgorithmException thrown"); } return null; } |
Je ne vais pas détailler ce code puisque son fonctionnement exact ne nous intéresse pas dans ce tutoriel. Dans notre cas, il nous suffit de l’appeler et d’afficher la chaîne de caractère retournée qui correspond au Key Hash :).
Récupération de l’App ID et finalisation de la configuration
Une fois que le Key Hash a été généré, ajoutez-le à la liste de votre application sur la page de configuration. La configuration est maintenant terminée et nous pouvons récupérer l’application ID.
Pour ce faire, cliquez sur My Apps en haut à droite de la page :
Une fois que vous avez l’app ID, ajoutez le dans le fichier de ressource string.xml (en général app/src/main/res/values/string.xml) :
|
1 2 3 4 5 |
<resources> <string name="app_name">Facebook-API-Sample</string> <string name="facebook_app_id" translatable="false">14*************1</string> </resources> |
Ensuite, il nous faut ajouter les méta-données pour l’application ID et déclarer l’activité authentification Facebook dans le manifeste android :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android" package="fr.etienne_boespflug.samples.facebook_api_sample"> <application android:allowBackup="true" android:icon="@mipmap/ic_launcher" android:label="@string/app_name" android:supportsRtl="true" android:theme="@style/AppTheme"> <meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/facebook_app_id" /> <activity android:name=".MainActivity"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> <activity android:name="com.facebook.FacebookActivity" android:configChanges="keyboard|keyboardHidden|screenLayout|screenSize|orientation" android:theme="@android:style/Theme.Translucent.NoTitleBar" android:label="@string/app_name" /> </application> </manifest> |
La configuration est désormais terminée, nous allons maintenant pouvoir implémenter l’authentification avec Facebook.
Intégration de l’authentification avec Facebook
Dans un premier temps, il est nécessaire d’initialiser les APIs. Pour ce faire, il suffit d’ajouter le code suivant au démarrage de l’application, c’est-à-dire dans la fonction onCreate de l’activité principal :
|
1 2 |
FacebookSdk.sdkInitialize(getApplicationContext()); AppEventsLogger.activateApp(getApplication()); |
L’initialisation du SDK doit impérativement se faire avant l’appel à setContentView ou une exception sera levée à la création de l’activité.
Ajoutez également les variables membres que nous allons utiliser par la suite à l’activité principal :
|
1 2 3 4 |
LoginButton facebookLoginButton; CallbackManager callbackManager; ProfileTracker profileTracker; AccessTokenTracker accessTokenTracker; |
Il nous faut maintenant ajouter le bouton d’authentification. À la manière des APIs Google, le SDK de Facebook propose une View spécifique que nous allons simplement ajouter au fichier de layout de l’activité principal.
|
1 2 3 4 5 6 7 |
<com.facebook.login.widget.LoginButton android:id="@+id/facebook_login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp" /> |
Dans onCreate, il faut alors récupérer la référence du bouton (on utilisera l’ attribut déclaré précédemment) :
|
1 2 |
facebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button); facebookLoginButton.setReadPermissions("email"); |
Dans le code ci-dessus, la permission d’accès à l’email de l’utilisateur est demandée. En effet, certaines informations sont accessibles dès lors que l’utilisateur est connecté avec Facebook et d’autres nécessitent une autorisation supplémentaire de sa part (tels que l’adresse mail).
Les informations suivantes sont disponibles sans qu’il ne faille demander de permission supplémentaire : id, name, gender, birthday, age_range, first_name, middle_name, last_name, link, locale, location, timezone. Pour connaître les permissions nécessaires à l’accès à une information, consultez la documentation.
Si vous utilisez le bouton login dans un fragment, une ligne supplémentaire est requise : facebookLoginButton.setFragment(this);.
Le bouton login utilise une système de callback spécifique (entendez par là qu’il ne suffit pas d’ajouter un
View.OnClickListener pour gérer le clic de l’utilisateur).
Il est donc nécessaire de créer un
CallbackManager (ici encore déclaré comme attribut) puis d’enregistrer une fonction callback qui se chargera de gérer le résultat de l’authentification :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
callbackManager = CallbackManager.Factory.create(); // Callback registration facebookLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { /* specific operations */ } @Override public void onCancel() { /* NOP */ } @Override public void onError(FacebookException e) { Log.e("facebook_login", e.getMessage()); } }); |
Pour le moment, la callback ne contient aucun code. Les trois résultats possibles peuvent être gérés :
- onSuccess : cette méthode est appelée lorsque l’authentification s’est déroulée avec succès. Il est alors possible d’utiliser le LoginResult.
- onCancel : appelée lorsque l’activité de Login a été annulée. Dans notre cas, le corps de cet méthode restera vide puisqu’il n’y a pas d’opération spécifiques à faire.
- onError : cette méthode permet de gérer les cas d’erreur (problème de configuration, absence de connexion internet …) à l’aide de l’exception en argument.
En réalité, il est possible que onSuccess soit appelée à la place de onCancel lorsque l’utilisateur annule l’authentification dans certains cas spécifiques, à savoir si MessageDialog est utilisé ou si l’utilisateur s’est connecté mais a refusé les autorisations qui lui ont été demandées par l’application.
De plus, la fonction callback doit être appelée dans la méthode onActivityResult, ce que le callbackManager va se charger de faire :
|
1 2 3 4 5 |
@Override protected void onActivityResult(int requestCode, int responseCode, Intent intent) { super.onActivityResult(requestCode, responseCode, intent); callbackManager.onActivityResult(requestCode, responseCode, intent); } |
Notez qu’on ne se soucie pas du requestCode ici, le callbackManager se chargera lui même de déterminer si le résultat le concerne ou non.
Pour ce tutoriel, nous allons nous contenter d’afficher quelques informations sur l’utilisateur : son nom complet, son image de profil et son adresse mail. Pour ce faire, modifiez le layout de l’activité en conséquence. Votre layout devrait ressembler à cela :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="fr.etienne_boespflug.samples.facebook_api_sample.MainActivity"> <TextView android:id="@+id/name_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_marginTop="30dp" android:textSize="25sp"/> <TextView android:id="@+id/email_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@id/name_view" android:layout_marginTop="8dp" android:textSize="20sp" /> <ImageView android:id="@+id/profile_picture_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@id/email_view" android:layout_marginTop="60dp" /> <com.facebook.login.widget.LoginButton android:id="@+id/facebook_login_button" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_alignParentBottom="true" android:layout_marginBottom="15dp"/> </RelativeLayout> |
À ce stade, nous pouvons faire un premier essai. Lancez l’application, connectez-vous avec Facebook et vous devriez obtenir ceci :
Pour l’instant l’application étant simplement au stade de développement (avec uniquement un Development Key Hash de disponible), seuls les comptes Facebook associés à la phase de développement peuvent se connecter. Le compte développeur ayant créé l’application est automatiquement associé à la phase de développement .
Constatez qu’une fois connecté le bouton de login propose la déconnexion, si vous relancez l’application vous serez toujours connecté (contrairement à une authentification OAuth simple de Google par exemple).
Cela signifie notamment qu’il va être nécessaire de faire en sorte que les données utilisateurs affichées le soient dès le lancement du programme si l’utilisateur est déjà connecté (sinon il lui faudra cliquer sur déconnexion, puis se reconnecter).
Affichage du nom de l’utilisateur
La récupération de l’email et de l’image de profil est un peu plus compliquée, laissons donc cela pour la suite. Pour l’instant, il va falloir récupérer le profil utilisateur.
Le profil utilisateur est représenté par un objet Profile, je vous propose donc de créer une méthode displayProfileData qui se chargera d’afficher les données utilisateurs en fonction du profil passé en paramètre. Si le profil est null, les éventuelles informations sur l’utilisateurs sont effacées (en cas de déconnexion par exemple) :
|
1 2 3 4 5 6 7 8 |
private void displayProfileData(Profile profile) { TextView nameView = (TextView) findViewById(R.id.name_view); if(profile != null) { nameView.setText(profile.getName()); } else { nameView.setText(""); } } |
Ensuite, pour obtenir le profil utilisateur, le SDK propose la méthode statique Profile.getCurrentProfile(). Celle-ci retourne le Profile utilisateur actuellement connecté. En pratique, il est nécessaire d’utiliser un ProfileTracker qui gérera les changement de profil.
En effet, il se peut que l’appel à Profile.getCurrentProfile() retourne null, même en cas de connexion réussie. De fait, il faut créer un ProfileTracker dans la méthode onCreate qui se chargera d’appeler notre méthode displayProfileData lorsque le profil est modifié. De plus, l’utilisation d’un ProfileTracker est un moyen simple pour gérer le cas où l’utilisateur est déjà connecté au démarrage de l’application.
L’attribut profileTracker étant déjà déclaré, nous pouvons l’initialiser dans la fonction onCreate :
|
1 2 3 4 5 6 7 8 9 10 11 |
callbackManager = CallbackManager.Factory.create(); profileTracker = new ProfileTracker() { @Override protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) { displayProfileData(newProfile); } }; profileTracker.startTracking(); facebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button); |
Modifiez également la callback du bouton de login afin qu’elle appelle displayProfileData en cas de succès :
|
1 2 3 4 |
@Override public void onSuccess(LoginResult loginResult) { displayProfileData(Profile.getCurrentProfile()); } |
Notez l’appel à la méthode startTracking() du tracker juste après sa création. L’idéal est de surcharger la méthode onStop de votre activité afin d’assurer que le tracking soit correctement arrêté :
|
1 2 3 4 5 |
@Override protected void onStop() { super.onStop(); profileTracker.stopTracking(); } |
Surchargez également la méthode onResume pour que le profile soit actualisé lorsque l’activité revient au premier plan :
|
1 2 3 4 5 |
@Override protected void onResume() { super.onResume(); displayProfileData(Profile.getCurrentProfile()); } |
Le code est maintenant fonctionnel pour l’affichage du nom de l’utilisateur.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 |
package fr.etienne_boespflug.samples.facebook_api_sample; import android.content.Intent; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.widget.TextView; import com.facebook.CallbackManager; import com.facebook.FacebookCallback; import com.facebook.FacebookException; import com.facebook.FacebookSdk; import com.facebook.Profile; import com.facebook.ProfileTracker; import com.facebook.appevents.AppEventsLogger; import com.facebook.login.LoginResult; import com.facebook.login.widget.LoginButton; public class MainActivity extends AppCompatActivity { LoginButton facebookLoginButton; CallbackManager callbackManager; ProfileTracker profileTracker; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); // Initialize Facebook SDK. FacebookSdk.sdkInitialize(getApplicationContext()); AppEventsLogger.activateApp(getApplication()); setContentView(R.layout.activity_main); callbackManager = CallbackManager.Factory.create(); profileTracker = new ProfileTracker() { @Override protected void onCurrentProfileChanged(Profile oldProfile, Profile newProfile) { displayProfileData(newProfile); } }; profileTracker.startTracking(); facebookLoginButton = (LoginButton) findViewById(R.id.facebook_login_button); facebookLoginButton.setReadPermissions("email"); // facebookLoginButton.setFragment(this); // If using in a fragment. // Callback registration facebookLoginButton.registerCallback(callbackManager, new FacebookCallback<LoginResult>() { @Override public void onSuccess(LoginResult loginResult) { displayProfileData(Profile.getCurrentProfile()); } @Override public void onCancel() { /* NOP */ } @Override public void onError(FacebookException e) { Log.e("facebook_login", e.getMessage()); } }); } private void displayProfileData(Profile profile) { TextView nameView = (TextView) findViewById(R.id.name_view); if(profile != null) { nameView.setText(profile.getName()); } else { nameView.setText(""); } } @Override protected void onStop() { super.onStop(); profileTracker.stopTracking(); } @Override protected void onResume() { super.onResume(); displayProfileData(Profile.getCurrentProfile()); } @Override protected void onActivityResult(int requestCode, int responseCode, Intent intent) { super.onActivityResult(requestCode, responseCode, intent); callbackManager.onActivityResult(requestCode, responseCode, intent); } } |
Vous pouvez lancer l’application et vérifier que tout fonctionne comme prévu, notamment l’affichage des données au lancement si l’utilisateur est déjà connecté ainsi que l’effacement des données en cas de déconnexion :
Victoire ! Le nom d’utilisateur s’affiche correctement, cette première étape dans la récupération d’informations de profil est donc terminée.
Dans un prochain article, nous verrons comment récupérer l’image de profil d’un utilisateur ainsi que son adresse mail.
À bientôt 🙂
You must log in to post a comment.