Android : Mettre en place le Facebook connect dans une application

26 avril 2014

Aujourd’hui, de nombreuses applications permettent à des utilisateurs d’accéder à leurs services sans avoir besoin de créer un compte spécifique via l’utilisation de leur compte Facebook. Certaines applications, à l’image de Tinder, ne se basent d’ailleurs que sur Facebook : impossible d’accéder à l’application sans une identification Facebook.

Puisque Facebook est à la mode, nous allons voir dans ce billet comment mettre en place une connexion Facebook au sein de vos applications Android.

Cet article utilise une version dépréciée du SDK Facebook.

Téléchargement du SDK Facebook

Pour pouvoir utiliser les fonctionnalités relatives à Facebook, en l’occurence le Facebook Connect, nous allons devoir télécharger le SDK pour Android proposé par le réseau social.

Pour télécharger la dernière version du SDK Facebook pour Android, rendez-vous sur cette page. Dans le cadre de ce tutoriel, c’est la version 3.8 qui sera téléchargée et utilisée.

Création d’une application Facebook

Pour pouvoir intégrer les fonctionnalités relatives à Facebook dans une application Android, il convient dans un premier temps de créer une application Facebook. Via un système d’identifiant, il sera alors possible d’associer notre application Android à une application Facebook.

Nous allons donc créer une application Facebook. Pour ce faire, rendez-vous sur le site développeur de Facebook, et dans le sous menu Applications, cliquez sur Créer une application.

Une fenêtre modale s’ouvre alors vous demandant de choisir pour votre application :

un nom ;
un espace de nom (optionnel) ;
une catégorie.

Une fois le formulaire rempli, cliquez sur Créer une application.

Vous devriez alors être automatiquement redirigé vers le tableau de bord de votre application comme en témoigne la capture d’écran ci-dessous :

Notez la présence d’un identifiant et d’une clef secrète qui nous seront nécessaires lorsque de l’intégration de Facebook dans notre application Android.

Création de l’application Android

Nous allons abandonner quelques instants Facebook pour créer notre application Android, mais ne vous inquiétez pas, nous aurons vite besoin de retourner du côté de Facebook pour terminer toutes les configurations nécessaires au bon fonctionnement de notre application.

Dans Eclipse, créez alors un nouveau projet Android grâce à l’assistant.

Une fois terminé, vous devriez alors voir votre projet Android apparaître dans Eclipse.

Pour finaliser la création de notre projet Android, nous allons y intégrer le SDK Facebook pour Android. Il s’agit en réalité d’ projet qu’il convient d’importer dans notre Workspace comme Existing Projects Into Workspace.

Comme en témoigne la capture ci-dessous, vous avez la possibilité d’intégrer à votre projet le SDK et de nombreux projets d’exemple. Dans le cadre de ce tutoriel, contentez-vous d’intégrer le projet FacebookSDK :

Votre espace de travail Eclispe devrait alors se mettre à jour :

Il ne nous reste plus qu’à indiquer à notre principal d’utiliser le projet FacebookSDK comme une bibliothèque. Pour ce faire, rendez-vous dans les propriétés du projet Android, puis dans l’onglet Android et tout en bas, ajoutez le projet FacebookSDK comme bibliothèque.

Configuration de l’application Facebook

Avant d’aller plus loin au niveau de notre application Android, revenons du côté de l’application Facebook créée précédemment afin de terminer sa configuration.

Ajout de la plate-forme Android

Nous allons associer notre application Android à notre application Facebook. Pour ce faire, rendez-vous dans le dashboard de l’application Facebook puis allez dans la section Paramètres. Cliquez alors sur le bouton Ajouter une plateforme et choisissez Android dans la fenêtre qui s’ouvre.

Configuration de la plate-forme Android

Maintenant que la plate-forme Android a été créé, nous devons renseigner les différents champs d’un petit formulaire.

Package Name doit contenir le nom de package de votre application ;
Class Name doit contenir le nom de votre classe Java principale ;
Key Hashes doit contenir les hashs obtenus à partir des clefs de signature de votre application ;
Single Sign On doit être activé pour permettre le Facebook Connect.

Le seul renseignement un peu technique à obtenir est le Key hashes. Pour l’obtenir, il convient de copier/coller le morceau de code suivant (fourni par Facebook) et de l’exécuter.

try {
  PackageInfo info = getPackageManager().getPackageInfo(
    getPackageName(), 
    PackageManager.GET_SIGNATURES);

  for (Signature signature : info.signatures) {
    MessageDigest md = MessageDigest.getInstance("SHA");
    md.update(signature.toByteArray());
    Log.d("KeyHash:", Base64.encodeToString(md.digest(), Base64.DEFAULT));
  }
}
catch (NameNotFoundException e) { }
catch (NoSuchAlgorithmException e) { }

Par exemple, si vous utilisez une clef différente pour la phase de développement et pour la mise en production de votre application, il conviendra de renseigner 2 key hashes : un pour chaque clef.

Avec la clef de debug par défaut, voici ce que j’obtiens :

Une fois rempli, le formulaire Facebook ressemble donc à ça :

Mise en place du Facebook Connect

Maintenant que notre application est en place, nous allons mettre en place le Facebook Connect à proprement parlé au sein de notre application Android. Mais avant ça, il nous reste encore quelques petites configurations à mettre en place.

Tout d’abord, nous devons autoriser notre application à accéder à internet via l’autorisation suivante :

<uses-permission android:name="android.permission.INTERNET"/>

Nous devons également renseigner, toujours au niveau du fichier AndroidManifest.xml, l’identifiant de notre application Facebook via le code XML suivant :

<meta-data android:name="com.facebook.sdk.ApplicationId" android:value="@string/applicationId"/>

Il convient alors d’ajouter l’identifiant dans le fichier strings.xml :

<string name="applicationId">1111</string>

Finalement, nous devons déclarer l’activité qui permettra d’afficher le formulaire de connexion à Facebook :

<activity android:name="com.facebook.LoginActivity"/>

L’interface graphique

Nous allons faire les choses très simplement, ainsi, je remplace juste la TextView affichant Hello world de mon projet par un bouton dans le projet Android que nous avons automatiquement généré :

<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.rolandl.blog.facebook.MainActivity$PlaceholderFragment" >
	
	<Button
  		android:id="@+id/facebookConnect"
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:text="Connect to facebook" />
</RelativeLayout>

Il ne nous reste ensuite plus qu’à capturer l’évènement du click au niveau du fragment en implémentant l’interface OnClickListener :

public static class PlaceholderFragment
  extends Fragment
  implements OnClickListener {
		
	public PlaceholderFragment()
	{
	}

	@Override
	public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
		final View rootView = inflater.inflate(R.layout.fragment_main, container, false);
		final Button facebookConnect = (Button) rootView.findViewById(R.id.facebookConnect);
		facebookConnect.setOnClickListener(this);
		return rootView;
	}

	@Override
	public void onClick(View view) {
				
	}
}

Il conviendra donc de lancer le processus de connexion dans la méthode onClick.

La connexion à Facebook

En soit, lancer la connexion à Facebook est très simple puisqu’il convient d’appeler la méthode statique openActiveSession de la classe Facebook Session. Cette méthode accepte alors trois paramètres :

une activité ;
un fragment ;
une callback dont la méthode call sera appelée à la fin de la connexion.

C’est dans cette méthode que nous pourrons récupérer l’état de la session et vérifier que la connexion via Facebook a réussi ou échoué.

Créeons alors dans notre fragment une méthode connectToFacebook appelant elle-même la fameuse méthode statique openActiveSession de la classe Facebook Session :

public void connectToFacebook() {
  Session.openActiveSession(getActivity(), this, true, new Session.StatusCallback() {

	@Override
	public void call(Session session, SessionState state, Exception exception) {
		
	}});
}

Dans la callback call, il convient donc de vérifier que la connexion a effectivement réussi en vérifiant l’état de la session. Si celle-ci est ouverte c’est que la connexion a réussi. Dans le cas contraire, nous pouvons afficher le message d’erreur stockée dans l’exception :

public void connectToFacebook() {
  Session.openActiveSession(getActivity(), this, true, new Session.StatusCallback() {

	@Override
	public void call(Session session, SessionState state, Exception exception) {
	  if (session.isOpened() == true) {
		  //connexion réussie !
	  }
	  else {
		  if(exception != null) {
	      //On affiche le message d'erreur
	      Toast.makeText(getActivity(), exception.getMessage(), Toast.LENGTH_LONG).show();
      }
	  }
	}});
}

En réalité, lorsqu’on demande à Facebook de lancer la connexion de l’utilisateur, on quitte notre application. Ainsi, afin de pouvoir exploiter correctement les résultats de Facebook, il convient de surcharger la méthode onActivityResult de notre fragment :

@Override
public void onActivityResult(int requestCode, int resultCode, Intent data) {
  super.onActivityResult(requestCode, resultCode, data);
  Session.getActiveSession().onActivityResult(getActivity(), requestCode, resultCode, data);
}

Afin de pouvoir tester le bon fonctionnement de notre connexion Facebook, il convient d’afficher, lorsque la session est ouverte, le nom et le prénom de l’utilisateur. Ces informations de nous sont pas données automatiquement et nécessite la mise en place d’une requête via la méthode newMeRequest de ma classe facebook Request. Cette méthode prend deux paramètres :

la session Facebook ;
une callback.

Cette nouvelle callback sera appelée quand la requête sera terminée et nous renverra l’utilisateur à travers la classe Facebook GraphUser :

Request.newMeRequest(session, new GraphUserCallback() {
	@Override
	public void onCompleted(GraphUser user, Response response) {
	  if(user != null) {
		  //on affiche le nom et le prénom de l'utilisateur
		  Toast.makeText(getActivity(), user.getFirstName() + " " + user.getLastName(), Toast.LENGTH_LONG).show();
	  }
	  else {
		  //on affiche un message d'erreur
		  Toast.makeText(getActivity(), "Impossible de récupérer les informations", Toast.LENGTH_LONG).show();
	  }
	}
}).executeAsync();

Voici donc notre méthode connectToFacebook complète :

public void connectToFacebook() {
  Session.openActiveSession(getActivity(), this, true, new Session.StatusCallback() {

	@Override
	public void call(Session session, SessionState state, Exception exception) {
	  if (session.isOpened() == true) {
		  Request.newMeRequest(session, new GraphUserCallback() {
			
			  @Override
			  public void onCompleted(GraphUser user, Response response) {
				  if(user != null) {
					  //on affiche le nom et le prénom de l'utilisateur
					  Toast.makeText(getActivity(), user.getFirstName() + " " + user.getLastName(), Toast.LENGTH_LONG).show();
				  }
				  else {
					  //on affiche un message d'erreur
					  Toast.makeText(getActivity(), "Impossible de récupérer les informations", Toast.LENGTH_LONG).show();
				  }
			  }
		  }).executeAsync();
	  }
	  else {
		  if(exception != null) {
	      //On affiche le message d'erreur
	      Toast.makeText(getActivity(), exception.getMessage(), Toast.LENGTH_LONG).show();
      }
	  }
	}});
}

Pour lancer la connexion, il convient alors d’appeler la méthode connectToFacebook lorsque l’utilisateur clique sur le bouton de connexion :

@Override
	public void onClick(View view) {
	  connectToFacebook();
	}

Voici alors quelques captures d’écran de la connexion à Facebook :

La déconnexion

Nous allons un petit peu plus loin et changer légèrement notre application Android. Ainsi, à partir de maintenant, nous allons, au clic sur le bouton, détecter si l’utilisateur est déjà connecté ou pas. S’il est connecté, nous allons le déconnecter et s’il n’est pas connecté, nous allons le connecter.

Pour savoir si un utilisateur est connecté, il convient de récupérer la session en cours. Si celle-ci est null ou non ouverte, ça signifie que l’utilisateur n’est pas connecté. Nous allons donc créer une méthode getFacebookSession qui va appeler la méthode statique getActiveSession de la classe Facebook Session :

public Session getFacebookSession()
{
  Session session = Session.getActiveSession();

  return session;
}

Le problème avec cette méthode, c’est qu’elle nous renvoie uniquement une session qui aurait été ouverte dans l’instance actuelle de l’application. Or, pour une meilleure ergonomie, il convient de pouvoir restaurer une session d’une précédente instance de notre application. Ceci est possible grâce à la méthode statique openActiveSessionFromCache de la classe Facebook Session. Voici donc ce à quoi ressemble notre méthode getFacebookSession après modifications :

public Session getFacebookSession()
{
  Session session = Session.getActiveSession();

  if (session == null)
  {
    session = Session.openActiveSessionFromCache(getActivity());
  }

  return session;
}

Nous allons maintenant créer une méthode disconnectFromFacebook permettant de déconnecter l’utilisateur de notre application. Cette méthode est très simple à écrire puisqu’il convient de récupérer la session de l’utilisateur et d’appeler la méthode closeAndClearTokenInformation :

public void disconnectFromFacebook()
{
  final Session session = getFacebookSession();

  if (session != null)
  {
    session.closeAndClearTokenInformation();
    Toast.makeText(getActivity(), "Déconnecté", Toast.LENGTH_LONG).show();
  }
}

Finalement, il convient de modifier la logique de la méthode onClick :

@Override
public void onClick(View view) {
	if(getFacebookSession() == null || getFacebookSession().isOpened() == false) {
	  connectToFacebook();
	}
	else {
	  disconnectFromFacebook();
	}
}

Voici alors une capture d’écran de la déconnexion :