Comment intégrer l'authentification Facebook dans une application iOS

L'authentification avec Facebook, non seulement vous permet d'ajouter à votre application une caractéristique sociale, mais elle peut également être utilisée comme un système de connexion, au lieu d'en créer un personnalisé. En l'ajoutant, vous offrez aux utilisateurs une manière familière de s'authentifier, étant donné que la majorité d'entre eux utilisent Facebook.

L'intégration de Facebook est supportée nativement depuis iOS 6, même s'il est toujours nécessaire d'ajouter manuellement le SDK Facebook dans vos projets. Il y a deux moyens fournis par le SDK pour s'authentifier avec Facebook. Le premier consiste en une solution relativement facile, qui utilise une vue de connexion prédéfinie qui gère toute la session et les choses relatives à la connexion. Le second est une approche plus « lourde », où tout doit être mis en œuvre et géré par le développeur, mais en contrepartie le processus de connexion peut être hautement personnalisé. La méthode à utiliser dans un projet dépend des exigences de l'application. Si le bouton prédéfini Connexion avec Facebook est adapté à l'apparence de l'application, alors vous devriez choisir la première option. Si une personnalisation plus poussée est nécessaire, l'option programmatique est plus appropriée.

Dans ce tutoriel, nous allons voir comment s'authentifier avec Facebook en utilisant la première façon, et donc en dire davantage à ce sujet. La vue de connexion, ou programmatiquement parlant, la classe FBLoginView, fournit un bouton Facebook standard pour vous connecter et vous déconnecter de l'application. La position apparente de la vue peut être spécifiée, mais sa taille ou son titre ne sont pas modifiables. En fait, le titre est adapté automatiquement en fonction de l'état de connexion à un moment donné. Dans les coulisses, la classe effectue tout le travail lourd. Elle gère toutes les communications avec Facebook et les divers changements de la session, stocke constamment le jeton d'authentification reçu de Facebook après une connexion réussie, vérifie un jeton existant au moment du lancement de l'application et beaucoup plus. Les développeurs n'ont pas à gérer tous ces détails, ni même à se soucier d'eux. Ils sont juste tenus d'ajouter l'affichage de la vue de connexion au contrôleur de vue approprié, de définir toutes les permissions voulues et de mettre en œuvre quelques méthodes de délégué pour gérer les changements de l'état de connexion.

L'authentification avec Facebook repose sur le système de contrôle d'accès Single Sign-On (SSO), selon lequel les utilisateurs peuvent accéder à plusieurs applications en utilisant la même session après s'être authentifiés une seule fois. Si, par exemple, vous avez l'application Facebook installée sur votre appareil et que vous êtes déjà connecté, lorsque vous utiliserez pour la première fois une autre application qui implémente la fonctionnalité d'authentification avec Facebook, vous verrez que vous êtes déjà connecté et aucune information d'identification supplémentaire ne sera requise. Vous aurez seulement besoin d'autoriser cette application. L'idée de base derrière tout cela est le fait qu'un dispositif (comme l'iPhone) est personnel, donc les utilisateurs ne sont pas tenus de fournir les informations de connexion à plusieurs reprises. Il existe pourtant un inconvénient : lorsque vous vous déconnectez d'une application, vous fermez juste son accès à votre compte. Vous n'êtes pas effectivement déconnecté de Facebook comme vous pourriez vous y attendre, donc aucune information d'identification ne sera demandée la prochaine fois que vous utiliserez l'application en question. Dans ce cas, vous devez vous déconnecter explicitement sur Facebook ou par l'intermédiaire des paramètres de l'iPhone/iPad.

À la fin de ce tutoriel, vous serez en mesure de vous authentifier avec Facebook et d'utiliser dans vos projets ce que vous allez apprendre. Cependant, je vous conseille vivement de lire la documentation officielle de Facebook concernant la gestion du flux de connexion et la technologie Single Sign-On. Cela vous aidera également à obtenir une compréhension profonde sur ce sujet d'actualité.

En regardant l'ensemble de ce tutoriel, on pourrait dire qu'il est séparé en deux parties principales. La première est consacrée à la préparation nécessaire avant toute mise en œuvre tant dans Facebook qu'en Xcode. Dans cette partie nous allons voir comment créer un compte Facebook à des fins de développement, comment configurer Xcode, y ajouter le framework Facebook SDK et comment utiliser les informations du compte Facebook nouvellement créé dans le projet. Une fois cette étape nécessaire terminée, nous nous consacrerons à l'implémentation. En mettant en œuvre un projet de démonstration, nous allons voir comment fonctionnent la vue d'authentification et FBLoginClass lors de la connexion et la déconnexion. Enfin, nous implémenterons toutes les méthodes de délégué nécessaires pour informer notre application sur l'état de la connexion et pour afficher les informations spécifiques de l'utilisateur.

La figure suivante vous donne une idée de l'objectif final de ce tutoriel.

Notez que si vous téléchargez le code source du projet, vous devez effectuer quelques étapes préparatoires avant de l'exécuter. Plus précisément, vous devrez d'abord définir l'information de votre propre application Facebook dans le fichier .plist du projet. Veillez à saisir correctement les valeurs FacebookAppID, FacebookDisplayName de votre application et le tableau URL Types. Si vous omettez cela, vous ne serez pas en mesure de tester le projet. En plus, vous devrez forcément ajouter le framework Facebook SDK au projet. Pour accomplir tout cela, suivez les instructions décrites dans la section Préparer l'environnementPréparer l'environnement.

Commençons par lancer Xcode et créer un nouveau projet pour l'application de démonstration, comme montré sur l'image suivante :

Dans le guide qui s'affiche, sélectionnez Single View Application dans la catégorie Application, sous la section iOS. Cliquez sur le bouton Next pour continuer. Dans la deuxième étape, entrez la valeur LoginSampleFB sur le champ Product Name et assurez-vous que l'option iPhone est sélectionnée dans le menu déroulant des périphériques.

Cliquez encore une fois sur le bouton Next et lors de la dernière étape sélectionnez un répertoire pour enregistrer le projet. Puis, cliquez sur le bouton Create pour passer à la suite.

Avant d'utiliser toute fonctionnalité du SDK Facebook, il est nécessaire d'effectuer certaines tâches préalables. Il s'agit de préparations sur la plate-forme Facebook et le projet Xcode, ainsi que de l'ajout du framework Facebook SDK à l'application. Bien sûr, vous devez avoir un compte Facebook actif. Dans le cas où vous n'en avez pas, créez-en un puis continuez.

Pour commencer, ouvrez Safari ou tout autre navigateur que vous utilisez, et allez sur le site des développeurs Facebook. Cliquez sur le lien Log In à l'extrême droite de l'écran, et sur la page suivante, entrez vos informations d'identification.

Après l'authentification, vous serez probablement guidé vers votre page d'accueil Facebook. Dans ce cas, dans le menu du haut cliquez sur le lien le plus à droite, avec une image de flèche vers le bas et dans le menu qui apparaît, sélectionnez l'option Manage Apps.

Ensuite, toujours dans le menu du haut, cliquez sur Apps, puis sur l'option Create a New App. Comme je l'ai déjà dit, pour les besoins de ce tutoriel nous allons créer une application de test que vous pourrez supprimer plus tard.

Dans la fenêtre qui apparaît, dans le champ Display Name entrez la valeur LoginSample comme nom de l'application. Dans le menu déroulant Category, sélectionnez la catégorie de votre choix, ne laissez pas la valeur par défaut. Comme vous le voyez sur l'image suivante, j'ai choisi la valeur Education.

Cliquez sur le bouton Create App, puis entrez le code captcha que vous voyez sur votre écran dans la fenêtre de contrôle de sécurité. Une fois que vous avez terminé, la nouvelle application sera créée et vous serez guidé vers son tableau de bord.

La prochaine étape consiste à activer la connexion de l'application dans iOS. Cliquez sur Settings dans le menu de gauche et dans la zone principale, cliquez sur le bouton +Add Platform.

Dans la nouvelle fenêtre, sélectionnez la plate-forme iOS. Un nouveau panneau intitulé iOS apparaît sur le tableau de bord. Il est très important d'entrer dans le champ Bundle ID exactement la valeur du Bundle Identifier du projet, sinon les utilisateurs de l'application ne pourront pas s'authentifier. Donc revenez à Xcode, cliquez sur project target dans le volet Project Navigator et copiez la valeur du champ Bundle Identifier sous l'onglet General.

Retournez au tableau de bord de Facebook et collez ou tapez le Bundle Identifier dans le champ Bundle ID. Aussi, veillez à activer le bouton Single Sign On. Enfin, cliquez sur le bouton Save Changes et cette étape est prête. Ne vous déconnectez pas du tableau de bord, car nous n'avons pas encore terminé.

Ensuite, visitez ce lien, téléchargez le SDK Facebook pour iOS et installez le paquetage en suivant les instructions affichées à l'écran. Par défaut, le paquetage est extrait dans le répertoire Documents de votre compte utilisateur sur votre ordinateur. Vous pouvez le laisser là ou le déplacer vers un autre répertoire. Dans ce tutoriel, je suppose que le SDK se trouve sous le répertoire ~/USER/Documents. Une fois que vous avez terminé l'extraction du paquetage, ouvrez le répertoire FacebookSDK, puis faites glisser et déposer FacebookSDK.framework dans Xcode, dans le groupe Frameworks. Dans la fenêtre modale que Xcode présente, désélectionnez la case à cocher Copy items into destination group's folder (if needed), pour ne pas copier effectivement le framework dans le projet, mais qu'une référence vers celui-ci soit créée. Ainsi, si vous téléchargez et extrayez une nouvelle version du SDK, votre projet sera automatiquement mis à jour lorsque vous le rouvrirez. Laissez les autres options telles quelles et cliquez sur le bouton Finish.

Il reste une dernière étape à effectuer, l'ajout de trois nouvelles clés au fichier .plist du projet. Ouvrez-le en cliquant sur le groupe Supporting Files dans le navigateur de projet, puis sur le fichier FBLoginSample-Info.plist. Ajoutez une nouvelle clé nommée FacebookAppID et comme valeur, collez la valeur de l'App ID que vous pouvez copier à partir du tableau de bord Facebook, en haut. Puis ajoutez la clé FacebookDisplayName et comme valeur, collez le Display Name que vous pouvez également copier à partir du tableau de bord.

Enfin, créez une nouvelle clé nommée URL Types et définissez son type tableau avec un seul élément. Nommez cet élément URL Schemes et faites-en aussi un tableau. Dans son seul et unique élément, définissez la valeur App ID copiée à partir du tableau de bord Facebook en la préfixant avec les lettres fb. La figure suivante illustre les trois ajouts dans le fichier .plist :

Toutes les étapes décrites ici sont obligatoires pour chaque application qui est censée intégrer des fonctionnalités Facebook.

Au cours de la phase de développement d'une application, et surtout lorsqu'une authentification y est impliquée, utiliser votre compte habituel pour effectuer tous les tests nécessaires est généralement une mauvaise pratique. Heureusement, Facebook prend en charge la création et l'utilisation de faux utilisateurs pour tester l'application. Ces utilisateurs ne peuvent pas nuire à votre compte, et bien sûr ils peuvent être supprimés à tout moment, généralement dès que l'application a été développée. Vous pouvez en créer autant que vous souhaitez, vous pouvez les « baptiser » comme vous voulez ou laisser Facebook composer des noms aléatoires, et vous pouvez attribuer à un utilisateur de test d'autres utilisateurs de test comme amis. Vous pouvez même vous connecter au compte d'utilisateur de test comme s'il s'agissait d'un utilisateur normal.

Pour créer (au moins) un utilisateur de test pour l'application que nous allons mettre en place ici, allez au tableau de bord Facebook de l'application LoginSample et sélectionnez l'option Roles dans le menu de gauche.

En haut de la zone principale du tableau de bord, cliquez sur le lien Test Users, puis sur le bouton Add, comme vous le voyez sur cette image :

Une petite fenêtre apparaît, où vous définissez le nombre d'utilisateurs de test que vous souhaitez ajouter ainsi que quelques autres options. Si vous voulez créer un seul utilisateur, ne changez rien et cliquez sur le bouton Create Test Users.

Vous pourriez ignorer la création d'un nouvel utilisateur de test et dans ce cas Facebook en ajoutera un par défaut, nommé Open Graph Test User. Quoi qu'il en soit, voici la liste des utilisateurs de test tels qu'ils apparaissent sur mon tableau de bord, où tout a été créé automatiquement :

À droite des utilisateurs de test, il y a quelques options qui vous permettent de les renommer, vous connecter sur leur compte factice ou ajouter des amis. N'hésitez pas à les utiliser pour voir à quoi elles servent.

Par la suite, nous allons utiliser l'adresse e-mail d'un utilisateur de test pour nous authentifier avec Facebook. Enfin, je vous conseille de modifier l'utilisateur de test que vous allez utiliser et de définir un mot de passe, afin de ne pas rencontrer de problème pendant le processus de connexion.

Tous les préparatifs nécessaires ont été faits et nous sommes maintenant prêts à passer à la mise en œuvre. Comme je l'ai déjà dit dans l'introduction, nous allons ajouter une vue toute faite, disponible déjà dans le SDK Facebook. Cette vue est basée sur une classe nommée FBLoginView, et présente deux avantages :

1. Affiche automatiquement le bouton connexion / déconnexion de Facebook en fonction de l'état de connexion ;
2. Gère de façon transparente toutes les choses relatives à la session, les états de connexion et le chargement des données.

Du point de vue du développeur, l'utilisation de la vue de connexion se compose en général d'un processus en deux étapes. La première comprend toutes les tâches nécessaires pour afficher la vue et la seconde implique la mise en œuvre de certaines méthodes de délégué pour gérer tous les changements apportés à l'état de connexion et à la session.

Dans la vue par défaut de la classe ViewController, nous allons ajouter des sous-vues et la plupart d'entre elles seront utilisées pour afficher les informations de l'utilisateur après une connexion réussie. Plus précisément, la sous-vue la plus importante que nous allons ajouter est la vue de connexion, qui est en fait le bouton de connexion. En plus de cela, nous allons utiliser trois objets UILabel pour afficher :

• l'état actuel de la connexion ;
• le nom de l'utilisateur ;
• l'adresse e-mail de l'utilisateur.

Enfin, nous aurons un autre objet UIView pour afficher l'image de profil de l'utilisateur. Lorsque l'utilisateur est déconnecté, toutes les étiquettes et la photo de profil seront cachées, à une exception près : l'étiquette d'état de connexion.

Commençons par ouvrir le fichier Main.storyboard. Ajoutez les sous-vues suivantes à la scène View Controller :

1. UIView

   1. Frame : X=60, Y=430, Width=200, Height=50

2. UILabel

   1. Frame : X=20, Y=32, Width=280, Height=21
   2. Text Alignment : Center

3. UIView

   1. Frame : X=85, Y=61, Width=150, Height=150

4. UILabel

   1. Frame : X=20, Y=219, Width=280, Height=21
   2. Text Alignment : Center
   3. Font : System Bold

5. UILabel

   1. Frame : X=20, Y=248, Width=280, Height=21
   2. Text Alignment : Center
   3. Font Size : 14.0

Pour que les deux objets UIView fonctionnent correctement, nous devons modifier leurs classes et configurer celles liées à Facebook. Plus précisément, pour la UIView en bas de l'interface (1 dans la liste ci-dessus), dans le champ Class* de la section CustomClass** dans Identity Inspector, nous devons définir FBLoginValue, comme indiqué ci-dessous :

Pour la vue de l'image de profil, c'est-à-dire le deuxième objet UIView (3 dans la liste ci-dessus), nous devons définir comme nom de classe FBProfilePictureView :

La définition de ces classes personnalisées pour les vues ci-dessus ne suffit pas à les faire fonctionner comme prévu. Il faut encore appeler ces deux classes dans la méthode application:didFinishLaunchingWithOptions: de la classe AppDelegate. Cependant, nous devons d'abord importer les bibliothèques Facebook SDK dans la classe, alors ouvrez le fichier AppDelegate.m et ajoutez l'instruction suivante en tête de celui-ci :

#import <FacebookSDK/FacebookSDK.h>

Puis, dans le fichier AppDelegate.m ajoutez les deux lignes suivantes dans la méthode de délégué application:didFinishLaunchingWithOptions: :

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
     // Override point pour personnalisation après le lancement de l'application.

     [FBLoginView class];
     [FBProfilePictureView class];

     return YES;
}

Maintenant que le premier contact avec le SDK Facebook a été établi, créons quelques propriétés IBOutlet pour les sous-vues que nous avons ajoutées à l'interface puis, nous allons faire les connexions. Ouvrez le fichier ViewController.h et ajoutez les déclarations de propriétés suivantes :

@interface ViewController : UIViewController

 property (weak, nonatomic) IBOutlet FBLoginView *loginButton;

@property (weak, nonatomic) IBOutlet UILabel *lblLoginStatus;

@property (weak, nonatomic) IBOutlet UILabel *lblUsername;

@property (weak, nonatomic) IBOutlet UILabel *lblEmail;

@property (weak, nonatomic) IBOutlet FBProfilePictureView *profilePicture;

@end

Bien sûr, vous devez y importer aussi la bibliothèque Facebook SDK :

#import <FacebookSDK/FacebookSDK.h>

Enfin, ouvrez le fichier Main.storyboard et connectez toutes les propriétés IBOutlet pour les sous-vues appropriées. En particulier, veillez à faire correspondre :

1. La propriété loginButton à la vue FBLoginView en bas de la scène ;
2. La propriété lblLoginStatus au premier UILabel le plus en haut ;
3. La propriété lblUsername au deuxième UILabel, où apparaîtra le nom de l'utilisateur connecté ;
4. La propriété profilePicture à la vue FBProfilePictureView ;
5. La propriété lblEmail au dernier objet UILabel.

Après avoir fait toute la préparation précédente, la vue de connexion est prête. Lorsque le bouton de connexion sera actionné, les informations d'identification de l'utilisateur doivent être renseignées afin de s'authentifier. Cela peut se faire de deux façons : soit par l'intermédiaire de l'app Safari, soit via l'app Facebook si elle est installée sur votre appareil (à noter que l'app Facebook ne fonctionne que sur un dispositif réel et pas dans le simulateur). Une fois les informations de connexion fournies, notre application doit reprendre le contrôle, mais à part cela, le SDK Facebook doit gérer et déterminer le processus de connexion.

Par conséquent, avant de tester l'application il faut ajouter le code nécessaire qui fera ce que je viens de décrire. Tout d'abord, ouvrez le fichier AppDelegate.m et ajoutez la méthode de délégué suivante :

-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{

}

iOS appellera cette méthode après que l'utilisateur ait autorisé l'application via Safari ou Facebook. Ici, nous allons ajouter une seule ligne pour laisser Facebook SDK manipuler le résultat de la connexion et modifier la vue de connexion en conséquence. Dans les coulisses, le jeton d'authentification reçu par Facebook sera stocké et l'état de la session va changer.

Dans le fragment de code suivant, vous voyez le code nécessaire ajouté dans la méthode ci-dessus qui gère le processus de connexion :

-(BOOL)application:(UIApplication *)application openURL:(NSURL *)url sourceApplication:(NSString *)sourceApplication annotation:(id)annotation{

     return [FBAppCall handleOpenURL:url
                   sourceApplication:sourceApplication];
}

En plus, nous devons faire en sorte que toutes les sous-vues, à l'exception de l'étiquette d'état de connexion, soient cachées jusqu'à ce que l'état connecté soit déterminé. Elles devraient devenir visibles uniquement après une connexion réussie et leurs valeurs définies, sinon elles doivent rester invisibles. Nous allons créer une petite méthode pour gérer cela. Ouvrez le fichier ViewController.m et dans la section de la classe privée ajoutez la déclaration suivante :

@interface ViewController ()

-(void)toggleHiddenState:(BOOL)shouldHide;

@end

Ensuite, définissez cette méthode :

-(void)toggleHiddenState:(BOOL)shouldHide{
     self.lblUsername.hidden = shouldHide;
     self.lblEmail.hidden = shouldHide;
     self.profilePicture.hidden = shouldHide;
}

Il est évident que la valeur du paramètre shouldHide définit l'état masqué des sous-vues. Maintenant, appelons-la dans la méthode viewDidLoad, car les sous-vues sont d'abord cachées. Ainsi, par l'appel à cette méthode, nous définissons une chaîne vide comme valeur du texte de l'étiquette de statut de connexion :

- (void)viewDidLoad
{
     [super viewDidLoad];
     // Faire toute configuration supplémentaire après le chargement de la vue, généralement à partir d'un fichier nib.

     [self toggleHiddenState:YES];
     self.lblLoginStatus.text = @"";

}

Il est toujours nécessaire de spécifier les permissions de lecture souhaitées pour votre application lorsque vous implémentez la connexion avec Facebook. Le SDK Facebook utilise par défaut les autorisations public_profile, indépendamment si vous le spécifiez ou pas. Ainsi, l'information publique de l'utilisateur (nom, photo de profil, amis, etc.) est retournée. Cependant, même si le SDK utilise automatiquement public_profile, il est recommandé de définir explicitement toutes les autres autorisations que vous souhaitez demander. Dans cette démonstration, nous voulons obtenir l'adresse e-mail de l'utilisateur, donc la permission email est nécessaire aussi.

Voici comment vous pouvez spécifier les autorisations dont vous avez besoin. Notez que vous devez l'ajouter à la méthode viewDidLoad :

self.loginButton.readPermissions = @[@"public_profile", @"email"];

Au cas où vous voulez des autorisations autres que pour le profil public, l'adresse e-mail de l'utilisateur et la liste d'amis, ou si vous avez besoin d'autorisations de post, votre application doit être approuvée par Facebook avant d'arriver dans App Store. Si elle ne l'est pas, les fonctionnalités liées à Facebook ne fonctionneront pas dans votre application.

Maintenant, effectuez le premier build de votre application et exécutez-la. Appuyez (ou cliquez) sur le bouton Connexion avec Facebook et soyez prêt à saisir vos informations d'identification. Dans une section précédente de ce tutoriel, nous avons parlé d'utilisateurs de test, donc je vous conseille d'utiliser un tel compte pour faire vos tests. Lorsque vous allez revenir à l'application, vous verrez que le titre de la vue de connexion a changé en Déconnexion. Rien d'autre ne se passe encore, mais nous allons corriger cela tout de suite.

Notez que si vous testez l'application sur un périphérique réel et que vous avez l'application Facebook installée, dans le cas où vous êtes connecté à cette application via Facebook, vous ne serez plus invité à entrer vos informations d'identification pour autoriser l'application. Après tout, c'est la raison du Single Sign-On.

Si vous tentez de fermer la session, une demande de confirmation apparaît, comme indiqué ci-dessous :

Si vous réussissez à vous connecter et vous déconnecter, vous verrez que la vue d'authentification rend la connexion via Facebook vraiment facile. Mais pour l'instant, la seule chose qui change c'est la vue du bouton, rien d'autre. Dans cette section, nous allons ajouter toutes les méthodes de délégué nécessaires qui nous permettront de savoir si nous sommes connectés ou pas et d'afficher ou masquer les informations correspondantes.

Il existe au total quatre méthodes de délégué qui devraient être implémentées. Avant de les ajouter, nous devons rendre notre classe ViewController conforme au protocole FBLoginViewDelegate. Ouvrez le fichier ViewController.h et dans la ligne d'en-tête adoptez le protocole, comme indiqué ci-dessous :

@interface ViewController : UIViewController <FBLoginViewDelegate>

Maintenant, ouvrez le fichier ViewController.m et avant la mise en œuvre des méthodes de délégué, faites de notre classe le délégué de la vue de connexion. Il suffit d'ajouter cette ligne à la méthode viewDidLoad: :

self.loginButton.delegate = self;

Concentrons-nous maintenant sur les méthodes de délégué. La première dont nous allons parler est appelée lorsque l'utilisateur est connecté. Grâce à elle, nous pouvons changer l'état hidden de nos sous-vues, et définir la valeur de l'état de connexion actuel. Ci-dessus se trouve son implémentation :

-(void)loginViewShowingLoggedInUser:(FBLoginView *)loginView{
     self.lblLoginStatus.text = @"Vous êtes connecté.";

     [self toggleHiddenState:NO];
}

Deux tâches simples sont effectuées ici : le message approprié est défini comme texte de l'étiquette d'état et les autres sous-vues deviennent visibles.

Maintenant que la vue de l'image de profil et l'étiquette avec le nom de l'utilisateur peuvent être affichées, car nous sommes connectés, il faut aussi leur assigner des valeurs. Cela sera fait par une autre méthode de délégué, qui nous donne l'information que nous voulons. Cette méthode contient comme paramètre un objet FBGraphUser, qui est en fait un objet NSDictionary contenant toute l'information publique de l'utilisateur connecté. Voici sa mise en œuvre :

-(void)loginViewFetchedUserInfo:(FBLoginView *)loginView user:(id<FBGraphUser>)user{
     NSLog(@"%@", user);
     self.profilePicture.profileID = user.id;
     self.lblUsername.text = user.name;
     self.lblEmail.text = [user objectForKey:@"email"];
}

J'ai ajouté intentionnellement une commande NSLog dans la méthode ci-dessus, juste pour vous permettre de voir les données contenues dans l'objet user. En attribuant la propriété id comme l'ID du profil dans la vue de photo de profil, le SDK Facebook télécharge l'image appropriée et l'affiche. Si aucune image de l'utilisateur n'a été spécifiée, alors l'image par défaut de l'utilisateur Facebook sera utilisée. Enfin, le nom de l'utilisateur et son adresse e-mail sont inscrits sur les étiquettes correspondantes.

Avec les deux méthodes de délégué ci-dessus, nous avons réussi à gérer les cas où l'utilisateur s'est connecté. Maintenant, nous devons gérer la déconnexion. Dans ce cas, il y a une autre méthode de délégué, dans laquelle nous allons simplement modifier le texte sur l'étiquette d'état et cacher le reste des sous-vues. La voici :

-(void)loginViewShowingLoggedOutUser:(FBLoginView *)loginView{
     self.lblLoginStatus.text = @"Vous êtes déconnecté.";

     [self toggleHiddenState:YES];
}

Il reste à implémenter une seule méthode de délégué, qui va gérer les erreurs éventuelles. Dans cet exemple, nous ne ferons aucune gestion réelle d'erreur, nous afficherons tout simplement l'erreur dans le débogueur. Cependant, dans une application réelle, vous devez gérer toutes les erreurs en fonction des exigences de votre application.

-(void)loginView:(FBLoginView *)loginView handleError:(NSError *)error{
     NSLog(@"%@", [error localizedDescription]);
}

Après la mise en œuvre des quatre méthodes ci-dessus, vous pouvez à nouveau tester l'application. Cette fois-ci, lorsque vous êtes connecté, vous verrez le nom d'utilisateur, la photo de profil et l'adresse e-mail s'afficher sur la vue.

L'authentification avec Facebook constitue l'une des meilleures solutions lorsque vous avez besoin d'ajouter à votre application un système de connexion orienté SSO. En accomplissant les quelques étapes simples décrites dans ce tutoriel, vous gagnez plusieurs avantages : vous évitez de créer votre propre mécanisme de connexion et d'authentification et vous offrez à vos utilisateurs une technologie familière. Mettre en vedette des expériences bien connues conduira sûrement à des applications plus attrayantes et à plus d'utilisateurs potentiels. Les applications de socialisation couvrent une grande partie du spectre des applications disponibles et savoir comment faire face à une authentification Facebook et aux technologies Facebook en général est presque obligatoire. Pour finir, j'espère que ce tutoriel vous sera utile et que vous allez ajouter ce que vous avez appris ici dans votre boîte à outils de code.

Pour information, vous pouvez télécharger le projet Xcode complet ici. Comme toujours, si vous avez des questions ou des commentaires, laissez-moi un message sur la page de l'article original.

Nous remercions Simon ng de nous avoir aimablement autorisés à publier son article. Cet article est une traduction autorisée dont le texte original peut être trouvé sur appcoda.com. Nous remercions aussi Mishulyna pour sa traduction, LeBzul pour sa relecture technique ainsi que FRANOUCH pour sa relecture orthographique.