Blog technique sur mes expériences de développeur.
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.
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.
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 :
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.
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.
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.
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.
Maintenant que la plate-forme Android a été créé, nous devons renseigner les différents champs d’un petit formulaire.
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 :
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"/>
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.
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 :
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 :
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 :
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 :