Facebook SDK pour les applications Android

L’utilisation de Facebook SDK vous apporte non seulement une fonctionnalité d’authentification sans mot de passe simple et efficace, mais aussi la possibilité de sensibilisation et de rétention des utilisateurs et un moyen inégalé d’analyse à votre application Android. Tout ces aspects et bien plus seront détaillés dans cet article issue du suivi de la formation “Passwordless Login Solutions for Android by facebook”.

A) Authentification par email et sms

Cette première partie présente étape par étape le processus d’intégration d’authentification Facebook par email et sms dans votre application Android.

Configuration de compte développeur Facebook

Si vous n’avez pas un compte développeur Facebook, allez ici et créez un. Puis, créez une nouvelle application.

Au niveau des paramètres de l’application, choisissez l’option “Add product” (barre de navigation gauche) et ajoutez “Account Kit”.

Dans les paramètres de “Account Kit”, activez tous les options de connexion.

Téléchargement et configuration du Facebook SDK

Ouvrez votre projet Android, accédez au fichier build.gradle (Project: …) et ajoutez le code suivant :

Ensuite, passez au niveau de build.gradle(Module: …) et incluez la dépendance suivante :

Synchronisez le projet :

Enfin, ajoutez les méta-données suivantes dans la balise application du fichier AndroidManifest.xml.

Configurez le FACEBOOK_APP_ID et ACCOUNT_KIT_CLIENT_TOKEN en prenant les valeurs respectives du tableau de bord du “Account Kit” de votre application Facebook.

Dans le même fichier AndroidManifest.xml et sous les balises de méta-données, ajoutez Les balises des activités de connexion fournie par le SDK de Facebook :

Le clé AK_LOGIN_PROTOCOL_SCHEME doit être échangé par akFACEBOOK_APP_ID par exemple si votre FACEBOOK_APP_ID égale 1234 le AK_LOGIN_PROTOCOL_SCHEME est ak1234.

N’oubliez pas de définir, dans le fichier styles.xml, le thème AppLoginTheme qui hérite de Theme.AccountKit :

Initiation du flux de connexion

Vous devez ajouter une activité de connexion avec une interface qui contient deux boutons (Connexion par sms) et (Connexion par email).

Pour chaque bouton définissez l’attribut onClick (onPhoneLogin pour le bouton de connexion par sms et onEmailLogin pour le bouton de connexion par email). Par la suite, ouvrez le fichier java de l’activité de connexion et définissez le deux méthodes :

Evidemment, vous avez remarqué l’utilisation de la méthode onLogin qui doit être implémenter de la manière suivante :

La méthode onLogin crée l’activité de connexion Facebook puis la lance et attendre le résultat. Le résultat sera traité par la méthode onActivityResult :

Si tout passe bien, la méthode launchAccoutActivity sera activée et vous amène à l’interface principale de votre application.

Pour terminer l’implémentation, vous devez ajouter la vérification de l’état de connexion au démarrage de l’activité pour éviter la répétition de processus d’authentification à chaque fois.

Accès aux informations du compte

Pour récupérer certains informations du compte tel que le nom, l’email, … vous pouvez utiliser le code suivant :

Déconnexion

La déconnexion est assurée par ce simple bout de code :

B) Authentification directe

L’authentification Facebook directe utilise un flux Oauth 2.0 typique.

1 → L’utilisateur appuie sur le bouton de connexion pour demander l’accès avec un ensemble d’autorisations.

2 → Le SDK notifie l’utilisateur par une boîte de dialogue de connexion.

3 → Si l’utilisateur accepte, un jeton d’accès (access token) est accordé à l’application. Suivant l’autorisation, le jeton d’accès peut être utilisé pour interagir avec le compte de l’utilisateur (par exemple, accéder aux informations de son profil).

Pour ajouter cette fonctionnalité à votre application, défilez vers le bas dans la page de paramètres et sélectionnez Add Platform.

Sélectionnez Android.

Ensuite, remplissez les informations nécessaires et activez Single Sign On.

Pour obtenir le Key Hashes, exécutez les commandes suivantes:

Par la suite, mettez les valeurs obtenues au niveau de la zone de texte Key Hashes.

Pour couvrir toutes les conditions de connexion vous devez prévoir le cas où l’utilisateur ne dépose pas de l’application Facebook dans son smartphone. Dans ce cas Facebook prévoit l’utilisation d’une activité spécifique qui peut être intégrée dans le fichier AndroidManifest.xml :

Le FB_LOGIN_PROTOCOL_SCHEME est tout simplement fbFACEBOOK_APP_ID par exemple si votre FACEBOOK_APP_ID égale 1234 le FB_LOGIN_PROTOCOL_SCHEME est fb1234.

Maintenant, vous pouvez ajouter le fameux bouton bleu de connexion Facebook:

Par la suite, vous devez ajouter le code nécessaire pour le traitement des événements liés à la connexion.

L’objet AccessToken est utilisé aussi pour récupérer des informations de profil de l’utilisateur.

Les méthodes suivantes permettent d’afficher des informations du profil:

Pour ajouter la fonctionnalité de déconnexion à votre application vous pouvez mettre le code suivant :

Demande de permissions

La meilleure pratique est de demander l’autorisation lors de son utilisation.

Lorsque vous testez les autorisations, vous recevez ce message:

Facebook offre un service appelé “Login Review” pour examiner les autorisations que votre application demande. Vous n’avez pas besoin de vous soumettre pour les autorisations suivantes: public_profile, user_friends et email. Sinon, un examen est nécessaire et si vous avez choisi de ne pas soumettre pour l’examen, les personnes ne pourront pas connecter à votre application via Facebook.

C) Les événements et l’analyses de l’application

Facebook conserve la trace des événements de connexion et vous donne des informations démographiques avec pratiquement aucune ligne supplémentaire de code. Tout ce que vous devez faire est d’ajouter la dépendance suivante à votre application :

Si vous accédez à l’onglet Analytics dans le tableau de bord de votre application, vous verrez déjà des données sur votre application.

Vous pouvez également accéder à l’onglet Events à gauche pour voir quels sont les événements par défaut.

Facebook enregistre automatiquement les événements pour vous, y compris les nouvelles connexions, les taux d’accepte d’autorisations et les taux d’enlèvement d’autorisations.

Par exemple, “Account Kit” enregistre automatiquement 6 types d’événements pour vous:

Côté client:
— Affichage de connexion→lorsque la demande du numéro de téléphone ou de l’email s’affiche.
— La connexion commence→lorsque le numéro de téléphone ou l’email est entré et le bouton suivant est cliqué.
— Connecté→la connexion est terminée et un jeton d’accès est reçu.

Du côté serveur:
— Demande de connexion→requête pour commencer le flux de connexion.
— Notification envoyée→toute confirmation envoyée par le serveur.
— Connexion terminée→la connexion est terminée et un jeton d’accès est généré.

En plus, vous pouvez ajouter le suivi des événements personnalisés. Par exemple, il pourrait être utile de savoir si les utilisateurs se connectent plus avec leur numéro de téléphone ou leur email. Pour implémenter cette fonctionnalité vous pouvez utiliser le code suivant :

Pour chaque clic de bouton, la fonction logEvent est appelée avec une chaîne qui indique le nom de l’événement.

Pour voir l’analyse de votre application, accédez au portail développeur du Facebook et cliquez sur “View Analytics”.

Cliquez sur “Account Kit” dans la barre latérale à gauche et vous obtenez quelque chose comme ça :

Cette interface vous fournit des statistiques très intéressantes pour chaque événement et même le nombre des nouvelles connexions par pays, genre et age.

D) Configuration des utilisateurs de test

Les utilisateurs de test ou “Test Users” sont des comptes Facebook provisoires utilisés pour tester les diverses fonctionnalités de votre application.

Commençant par la création d’un nouveau “Test Users”:

Pour changer le nom ou le mot de passe du compte, choisissez “Edit” puis “Change the name or password for this test user”.

Pour Connecter en tant qu’utilisateur de test, sélectionnez “Edit”, puis “Log in as this test user”.

Vous serez avertis quelques fois que vous déconnectez de votre compte développeur et que vous connectez en tant qu’utilisateur de test.

Confirmez dans les paramètres Facebook de votre utilisateur de test que l’application n’a pas encore été autorisée. Sélectionnez d’abord “Settings” puis “Apps” et enlevez l’application si elle existe.

Maintenant, vous avez un utilisateur prêt à être utilisé pour tester les fonctionnalités de votre application.

D) Le Graph API

Le Graph API est une api HTTP qui représente la principale façon d’extraire et de mettre des données dans la plate-forme de Facebook. Vous pouvez l’utiliser pour implémenter des fonctionnalités liées au Facebook dans votre application. Par exemple, vous pouvez avoir des données, publier de nouvelles informations, gérer des annonces, télécharger des photos et effectuer plein d’autres tâches dans votre application.

Le Graph API est implémenté sous la forme d’une structure de données du type graphe et il est composé des éléments suivants :

— noeuds : essentiellement des objets comme un Utilisateur, une Photo, une Page, un Commentaire, …

— attributs : des données à l’intérieur des objets par exemple date de naissance, nom, …

— liens : des liaisons entre les différents objets de graphe.

Avec l’utilisation de Graph API vous pouvez facilement apporter à l’utilisateur de votre applications des données qu’il utilise souvent dans Facebook par exemple sa liste des amis ou ses albums photos, etc.

Pour bien manipuler le Graph API vous pouvez recourir aux ressources suivants :

— la documentation de Graph API ici, par exemple si vous choisissez le nœud Album vous allez savoir comment récupérer un album en utilisant différents moyens (HTTP, PHP, JavaScript, Android, iOS) et vous allez connaitre les différents attributs et liens de l’objets Album.

— le Graph API Explorer ici, un outil de bas niveau que vous pouvez l’utiliser pour interroger, ajouter et supprimer des données d’un compte Facebook.

Récupération des données

Par exemple, vous voulez récupérer l’id, le nom et les photos d’un utilisateur. Primo, récupérez un clé d’accès aux photos de l’utilisateur en cliquant sur “Get Token” puis cochez “user_photos” et cliquez sur “Get Access Token” la fenêtre d’autorisation va s’afficher et vous devez accepter. Le clé d’accès sera ajouté et vous pouvez récupérer les données.

Au niveau de la zone de requête mettez la chaîne suivante puis cliquez sur “Submit” :

Vous devez avoir quelque chose comme ça :

La question ici est “Comment savoir les paramètres à utiliser dans la requêtes?”, la réponse est assez simple, utilisez la requête suivante et vous allez récupérer l’ensemble des paramètres :

Si non, vous pouvez consulter la documentation puis choisir le noeud “User” et vous trouvez l’ensemble des attributs à utiliser dans votre requête.

Ajout des données

Jusqu’au ici, vous avez vu comment récupérer des données d’un compte Facebook. Maintenant, vous passez à l’ajout. Avant tout, vous devez récupérer le clé d’accès nécessaire pour le partage. Donc, cliquez sur “Get Token” puis cochez “publish_actions” et enfin “Get Access Token”.

Partage de text

Vous pouvez maintenant partager un statue Facebook à partir de Graph API Explorer. Dans ce cas le type de requête devient POST ou lieu de GET et si vous consultez la documentation ici vous pouvez savoir la requête utilisée pour le partage “Publishing” d’un status.

Cliquez sur “Submit” et vous devez avoir un id en retour.

Partage d’image

Le partage d’une image sur le mur de l’utilisateur nécessite l’utilisation de la requête suivante :

En cas de réussite de l’opération des informations de ce type seront retournées :

Ajout d’image à un album

L’insertion d’une image dans un album de l’utilisateur nécessite en plus de l’autorisation de publication, l’autorisation d’accès aux photos de l’utilisateurs qui vous avez utilisé auparavant pour récupérer la liste des photos de l’utilisateurs.

Pour créer un nouveau album vous pouvez utiliser la requête suivante :

Vous recevez l’id de nouveau album en cas de réussite de l’opération.

Vous pouvez utiliser l’id de l’album pour l’insertion d’images au sein de lui.

La différence avec l’opération d’insertion d’image déjà vue est le changement de “me” par l’id de l’album et après le “Submit” vous recevez une résultat de même type qu’auparavant.

Utilisateurs de test

Le Graph API Explorer permet la création des utilisateurs de test à votre application.

Choisissez le nom de votre application de la liste des applications (coin haut droit) puis générez un clé d’accès en utilisant “Get Token” → “Get App Token”, modifiez le type de requête à POST, cherchez l’id de l’application et formulez une requête de cette forme “id_application/accounts/test-users?name=nom_utilisateur”. Enfin, choisissez “Submit” et l’utilisateur sera créé et ses différents attributs seront retournés.

Si vous voulez changer le mot de passe de l’utilisateur de test mettez son id dans la requête suivi par le nouveau mot de passe comme suit :

“success”: true montre que le changement de mot de passe est réussi.

Une fois vous créez le nombre souhaité des utilisateurs de test vous pouvez les récupérer tous en utilisant cette requête :

La requête de type GET est suivie par l’id de l’application et le chemin de récupération des utilisateurs de test.

Vous pouvez utiliser les données reçues pour créer un réseau des amis. L’opération va être un peu compliqué, car l’utilisateur 1 doit envoyer une demande d’amitié à l’utilisateur 2 qui doit l’accepter.

Commençant par la duplication de l’onglet de Graph API Explorer, choisissez un utilisateur 1 et copiez la valeur de son attribut “access_token”, mettez la valeur dans la zone “Access Token:” de second onglet et choisissez la requête POST et introduisez la requête suivante qui se termine par l’id d’un autre utilisateur 2 :

La réception de “success”: true indique que la demande est envoyée.

Maintenant, pour accepter la demande coupez la valeur de “access_token” de l’utilisateur 2 et mettez la dans la zone “Access Token:”. Par la suite, prenez l’id de l’utilisateur 1 et mettez le au lieu de l’id de l’utilisateur 2. Pratiquement, vous inversez l’id et le “access_token” de deux utilisateurs :

La réception de “success”: true après le submit indique que la demande est acceptée.

L’utilisation de Graph API dans Android

Vous allez voir par un exemple l’utilisation de Graph API dans une application Android pour récupérer la liste des amis qui utilise votre application Facebook.

Commençons par la vérification de l’état de connexion avec Facebook :

Par la suite, vous devez voir si vous avez l’autorisation de connaître la liste des amis :

Si vous n’avez pas l’autorisation vous pouvez la demander. La demande lance l’activité d’autorisation de Facebook qui va retourner une résultat à votre activité une fois l’opération terminée.

Maintenant, vous passez à la récupération des amis qui utilisent votre application Facebook:

Le code source de différentes applications est hébergé ici.

E) Service de vérification d’applications Facebook

En fait, les demandes de choses en dehors des autorisations suivantes: public_profile, user_friends et email exigent l’examen de l’application. Facebook offre un service de vérification pour s’assurer que le minimal des autorisations sont utilisées au niveau de votre application.

Si un examen est nécessaire et vous choisissez de ne pas soumettre l’application pour examen, les personnes ne pourront pas connecter à votre application via Facebook. Pour avoir plus d’informations consulter ce lien.