Cet article a fait l'objet d'une traduction automatique.

À la pointe

Bases de la programmation Facebook : Création d'un client Windows

Dino Esposito

Télécharger l'exemple de code

Dans mon article précédent, j'ai abordé les bases de la programmation de Facebook dans le contexte d'un site Web, notamment un site Web ASP.NET MVC (vous pouvez lire l'article sur msdn.microsoft.com/magazine/jj863128). Comme vous pouvez l'imaginer, l'utilisation de l'API de Facebook n'est pas limitée aux applications Web, même si l'une des ses principales utilisations est juste pour authentifier les utilisateurs d'un nouveau site Web d'une manière plus « douce ».

Dans cet article je construirez une application cliente Windows Presentation Foundation (WPF) qui utilise l'API de Facebook pour authentifier les utilisateurs et afficher les mises à jour avec des photos. Parce que le Web est un environnement différent du poste de travail, cette colonne évidemment sera différente de ce que j'ai écrit le mois dernier. L'API de Facebook, cependant, est le même. Vous pouvez obtenir le Facebook C# SDK via NuGet (voir facebookapi.codeplex.com pour plus d'informations sur l'API de Facebook pour C# / développeurs .NET).

Intégration des applications avec les réseaux sociaux

Plupart des réseaux sociaux ont une architecture similaire. Interaction entre les utilisateurs et le moteur du réseau social se produit dans une des deux manières suivantes : directement via le site Web principal (par exemple, le site de Twitter ou Facebook) ou par l'intermédiaire d'une application hébergée en interne par le site de réseau social. Par souci de clarté, j'appellerai ces apps comme connecteurs.

Une application cliente (site Web, WPF ou Windows Phone) ne peut interagir avec le moteur du réseau social par l'intermédiaire d'un connecteur. Pour l'exemple de code qui accompagne cet article, j'utiliserai un connecteur Facebook appelé Memento (Notez que le code fourni par exemple application, se présente comme un projet unique, pas une solution complète et utilise Visual Studio 2010). Le nom de Memento — et son icône connexe — apparaîtra sous le pied de page de n'importe quel messages sur le mur de n'importe quelle application client à l'aide de Memento pour vous connecter à Facebook. Vous pouvez créer un connecteur pour Facebook à developers.facebook.com/apps.

Connecteurs sont caractérisées par une paire de chaînes uniques — touche app et secret — et, plus intéressant pour nos fins, peuvent servir une variété d'applications clientes, si Web, mobile ou de bureau. Figure 1 résume l'architecture globale des réseaux sociaux lorsqu'il s'agit de l'interaction.

Figure 1 le modèle de l'Interaction des réseaux sociaux

En fin de compte, n'importe quel utilisateur apps qui doivent s'intégrer à des réseaux sociaux les plus populaires (par exemple, Facebook, Twitter ou Foursquare) reposent essentiellement comme des clients d'une application connecteur de spécifiques au réseau social.

Un $ $ etAPP, intégration à un réseau social essentiellement signifie accéder à des fonctionnalités de réseau social au nom d'un utilisateur enregistré. Il s'agit de deux actions : authentification des utilisateurs contre le réseau social et l'action réelle, comme faire un check-in pour un lieu donné, les poster sur le mur de l'utilisateur ou tweeting.

Il s'agit de l'essence d'intégrer un réseau social API dans une application personnalisée, et il s'avère que, il ne serait pas limitée pour juste des apps de Web.

Différences par rapport à une application Windows

Dans la colonne du mois dernier, j'ai abordé tout d'abord comment authentifier les utilisateurs d'un site Web via Facebook, puis j'ai présenté un code pour l'afficher à la fois interactivement et par programme au mur de l'utilisateur. Annonce à la paroi de l'utilisateur ne nécessite pas une autre approche si fait à partir d'une application Windows ; l'authentification, au lieu de cela, nécessite quelques ajustements.

Un réseau social est principalement une application Web et expose des services d'authentification via le protocole d'authentification OAuth. Une application qui souhaite s'authentifier ses utilisateurs par l'intermédiaire de comptes Facebook, par exemple, doit placer un appel HTTP vers un point de terminaison de Facebook. Le point de terminaison, mais renvoie une page HTML pour le réel de l'utilisateur d'interagir avec en entrant des informations d'identification et autorisant le connecteur à exploiter en son nom (voir Figure 2).

Figure 2 le connecteur Memento demande explicitement de l'utilisateur pour les autorisations

La partie qui est différente dans un scénario mobile par rapport à une application Web ou Windows, c'est comment vous gérer la redirection vers la page HTML que le réseau social fournit des autorisations et les informations d'identification.

Yet Another Facebook Windows Client

Créez un projet WPF et ajouter un peu de balisage XAML de la fenêtre principale. Au minimum, vous devez avoir un couple de boutons pour déclencher le login et logout processus et une étiquette pour afficher le nom de l'utilisateur actuellement connecté. En outre, vous pouvez avoir un élément d'image pour afficher la photo de l'utilisateur actuel. Quoi d'autre ? Regardons le code que vous mettez dans le gestionnaire de clic de Login :

var loginUrl = FbHelpers.GetLoginUrl();

La première étape reçoit l'URL de connexion de Facebook. Le code pour obtenir l'URL est le même que vous utiliseriez dans un scénario Web, comme le montre Figure 3.

Figure 3 Code pour obtenir l'URL de connexion

public static String GetLoginUrl()
{
  var client = new FacebookClient();
  var fbLoginUri = client.GetLoginUrl(new
  {
    client_id = ConfigurationManager.AppSettings["fb_key"],
    redirect_uri =
    "https://www.facebook.com/connect/login_success.html", 
    response_type = "code",
    display = "popup",
    scope = "email,publish_stream"
  });
  return fbLoginUri.ToString();     
}

Comme vous pouvez le remarquer, le paramètre redirect_uri (obligatoire) pointe vers un point de terminaison succès Facebook. C'est la page de lancement après que le processus de connexion est terminé. Dans un scénario Web vous utilisez la page en cours, donc il est tout d'abord redirigé vers le site de Facebook et puis retour à la page de requête originale.

La méthode GetLoginUrl obtient seulement l'URL pour appeler à vous connecter. Dans un scénario Web, vous appelez simplement une redirection pour passer à la nouvelle page et afficher l'UI Facebook typique d'ouverture de session ou, si l'utilisateur est déjà connecté sur l'ordinateur en cours d'utilisation — la page autorisations comme indiqué dans Figure 2. Pour réaliser la même chose dans une application Windows, vous avez besoin d'un contrôle WebBrowser initialement masqué dans l'interface utilisateur. Voici le code complet pour le gestionnaire de clic du bouton de connexion de l'application :

public void Login()
{
  var loginUrl = FbHelpers.GetLoginUrl();
  ShowBrowser = true;
  view.Browser.Navigate(loginUrl);
}

Disponible pour télécharger l'exemple d'application utilise le modèle Model-View-ViewModel (MVVM) pour extraire les détails de l'interface utilisateur à l'extérieur. Par conséquent, affectant ShowBrowser true seulement a pour effet d'allumer la visibilité du contrôle WebBrowser. Enfin, la méthode Navigate dirige le composant vers l'URL spécifiée. Figure 4 affiche l'état de l'exemple d'application avant et après la connexion, cliquez sur.

Figure 4 la première étape de connexion à Facebook

Le processus d'authentification peut prendre une ou deux étapes. Si l'utilisateur est déjà connecté au réseau social, le navigateur Web reçoit directement la page de destination. Si l'utilisateur n'est pas connecté, la page montrée Figure 4 est présentée. Toutefois, si l'utilisateur n'est pas associé avec le connecteur utilisé par l'application cliente, puis un écran intermédiaire comme celui montré dans Figure 2 demande explicitement accorder des autorisations.

Comment gérez-vous le chargement des pages dans le composant WebBrowser ? Vous devez essentiellement un gestionnaire d'événements Navigated :

void facebookBrowser_Navigated(Object sender, 
  NavigationEventArgs e)
{
  var fb = new FacebookClient();
  FacebookOAuthResult oauthResult;
  if (!fb.TryParseOAuthCallbackUrl(e.Uri, out oauthResult))
    return;
  if (oauthResult.IsSuccess)           
    _viewPresenter.LoginSucceeded(oauthResult);           
  else           
    _viewPresenter.LoginFailed(oauthResult);
}

Facebook indique si le processus de connexion terminée avec succès ou non. Notez que la connexion échoue si l'utilisateur refuse tout simplement les autorisations demandées au connecteur. Si la connexion échoue, juste réinitialiser l'interface utilisateur de masquer le navigateur Web et afficher des commentaires à l'utilisateur. Il est beaucoup plus intéressant lorsque la connexion est réussie, comme le montre Figure 5.

Figure 5 après une connexion réussie

public void LoginSucceeded(FacebookOAuthResult oauthResult)
{
  // Hide the Web browser
  ShowBrowser = false;
  // Grab the access token (necessary for further operations)
  var token = FbHelpers.GetAccessToken(oauthResult);
  Token = token;
  // Grab user information
  dynamic user = FbHelpers.GetUser(token);
  // Update the user interface
  UserName = String.Format("{0} {1}", user.first_name,
    user.last_name);
  UserPicture = user.picture;
  IsLogged = true;
}

Le code dans Figure 5 est similaire à ce qu'il faut utiliser dans un scénario Web. Notez qu'une fois que l'utilisateur s'est connecté avec succès, le soft n'est pas encore prêt à exploiter pour le compte de l'utilisateur. En outre, l'application ne sait pas encore quoi que ce soit au sujet de l'utilisateur — pas même le nom d'utilisateur ou une sorte de code. Cela signifie que des données d'authentification persistant n'est pas possibles encore. Par conséquent, une autre étape est obligatoire pour les scénarios Web et Windows : obtenir le jeton d'accès.

Le jeton d'accès

Le jeton d'accès est une chaîne, que vous obtenez à partir du réseau social en échange d'un code de connexion réussie. Le code de connexion indique simplement que l'utilisateur qui a procédé à l'authentification est connu pour le réseau. Le code d'accès relie l'identité de l'utilisateur et le connecteur. Le code d'accès indique au moteur de réseau social si l'application utilisateur est suffisamment autorisé à effectuer l'opération demandée pour le compte de cet utilisateur. Le même utilisateur a un jeton d'accès différents pour les différents connecteurs.

Figure 6 montre le code c# pour obtenir l'accès jeton après une connexion réussie de OAuth.

Code de la figure 6 pour obtenir l'accès jeton fois la connexion OAuth

public static String GetAccessToken(FacebookOAuthResult oauthResult)
{
  var client = new FacebookClient();
  dynamic result = client.Get("/oauth/access_token",
    new
    {
      client_id = ConfigurationManager.AppSettings["fb_key"],
      client_secret =
      ConfigurationManager.AppSettings["fb_secret"],
      redirect_uri =
      "https://www.facebook.../login_success.html", 
      code = oauthResult.Code
  });
  return result.access_token;
}

Dans une application Web, vous pouvez faire persister le jeton d'accès dans un cookie personnalisé ou si des données supplémentaires d'un cookie d'authentification personnalisée gérée par un objet IPrincipal personnalisé. Dans un scénario de Windows, vous pouvez recourir au stockage local. Lorsque l'utilisateur se déconnecte d'une application Windows, vous effacez simplement toutes les données stockées. Une fois que vous maintenez le jeton d'accès pour un utilisateur donné et le connecteur, vous êtes prêt à effectuer toute opération qui tombe sous les autorisations accordées, comme indiqué dans Figure 2.

Un type commun de réseau social app « écoute » pour certains aliments pour animaux et enregistre automatiquement au nom de l'utilisateur même. Dans ce cas, vous prenez une fois le jeton d'accès et garder sur l'exécution de l'application jusqu'à ce que l'utilisateur retire les autorisations. Une fois que vous maintenez le jeton d'accès, vous n'avez pas besoin pour s'occuper d'authentification tant que l'utilisateur derrière le jeton est effectivement connecté au réseau social sur l'ordinateur.

Affichage de statut et Photos

Figure 7 montre l'interface utilisateur de l'exemple d'application WPF, une fois que l'utilisateur est connecté à Facebook et le jeton d'accès est stocké en toute sécurité. L'interface utilisateur comprend une zone de texte et un bouton pour publier. Comme vous pouvez le constater, l'interface utilisateur aussi définit un bouton Parcourir et sélectionne une image JPEG à partir du disque local.

Figure 7 validation à partir de l'exemple de Client App

Le code dans Figure 8 montre comment publier une mise à jour avec une photo ci-jointe.

Code de la figure 8 pour publier une mise à jour avec une photo jointe

public static void PostWithPhoto(
  String token, String status, String photoPath)
{
  var client = new FacebookClient(token);
  using (var stream = File.OpenRead(photoPath))
  {
    client.Post("me/photos",
    new
    {
      message = status,
       file = new FacebookMediaStream
  {
         ContentType = "image/jpg",
         FileName = Path.GetFileName(photoPath)
        }.SetValue(stream)
    });
  }
}

Dans Figure 7 vous voyez la mise à jour et l'image postée sur mon calendrier. Notez que le nom du connecteur utilisé est présenté sous le nom de l'auteur.

À venir : JavaScript

Dans cet article, j'ai construit une application WPF pour publier sur Facebook au nom d'un utilisateur. Pour créer une application mobile, vous suivez le même modèle discuté ici. Notez que le modèle est valable quelle que soit la plate-forme mobile de choix. J'ai construit avec succès de Windows Phone et Android apps de cette même façon. Mon prochain article montrera comment utiliser JavaScript pour programme Facebook.

Dino Esposito est l'auteur de « Architecting Mobile Solutions for the Enterprise » (Microsoft Press, 2012) et de « Programming ASP.NET MVC 3 » (Microsoft Press, 2011). Il a également coécrit « Microsoft .NET: Architecting Applications for the Enterprise » (Microsoft Press, 2008). Basé en Italie, Dino Esposito participe régulièrement aux différentes manifestations du domaine organisées aux quatre coins du monde. Vous pouvez le suivre sur Twitter à l'adresse twitter.com/despos.

Merci à l'expert technique suivant d'avoir relu cet article : Scott Densmore