Accueil > Silverlight > Interaction Silverlight et Facebook (part II): l’API Graph

Interaction Silverlight et Facebook (part II): l’API Graph

Dans le premier article de cette série, nous avions vu comment créer un bouton Silverlight aux couleurs de Facebook.
C’est bien beau de pouvoir styler un bouton mais il est grand temps de lui ajouter des fonctionnalités! Pour cela, nous allons nous pencher sur les différentes API qu’offre Facebook et la manière de s’en servir. Nous tenterons de trouver une solution qui fonctionne aussi bien dans le browser qu’à l’extérieur pour que notre application continue de fonctionner même une fois installée sur le poste de l’utilisateur.

Enregistrer son application sur Facebook

Tout d’abord, il va falloir autoriser votre application sur Facebook et obtenir un appId.
Pour cela rendez vous sur cette page: http://www.facebook.com/developers/ et créez une nouvelle application.
Vous récupérerez un identifiant d’application qui nous servira pour la suite.

Fonctionnement de l’API

L’api exposée par facebook est l’API Graph. Elle fonctionne par des requêtes http qui renvoient des objets sérialisés en JSON.
Tous les objets de Facebook ainsi que les relations entre eux sont accessibles à travers cet API. Il est assez facile de construire des objets qui correspondent à cette structure pour recevoir les réponses de l’API et les utiliser facilement dans votre application. Le détail des objets est disponible ici: http://developers.facebook.com/docs/reference/api/
Toutes les informations sont accessibles en https avec une url de la forme:
https://graph.facebook.com/{id de l’objet recherché}

Les connexions entre les objets sont accessibles par:
https://graph.facebook.com/{id de l’objet source}/{type de connexion}

Il existe un raccourci « me » permettant de désigner l’utilisateur courant.
On aura donc par exemple pour récupérer les infos de l’utilisateur courant:
https://graph.facebook.com/me/
Et pour récupérer ses amis:
https://graph.facebook.com/me/friends/
Il est donc comme vous le voyez très simple de naviguer dans le graphe de facebook pour y récupérer les infos que l’on souhaite.

Si vous avez cliqué sur les liens ci dessus, vous avez du voir une erreur:
« An active access token must be used to query information about the current user. »

Cette erreur est plutôt rassurante, en effet, comme personne n’a autorisé l’accès à ces informations, Facebook bloque tout le contenu ce qui est une bonne nouvelle pour le respect de la vie privée!

Authentification et autorisations

Facebook fonctionne sur le protocole OAuth 2.0. Pour pouvoir récupérer des informations, votre application va donc devoir être autorisée par l’utilisateur et récupérer un « access_token » fourni par Facebook.
Cet access_token devra être passé à toutes les requêtes à l’API Graph pour qu’elle renvoie effectivement les données.
Pour récupérer cet access_token, une requête de cette forme doit être faite:

https://graph.facebook.com/oauth/authorize?client_id=…&redirect_uri=http://www.example.com/oauth_redirect&type=user_agent&display=popup&scope=XXX

Le paramètre client_id est l’identifiant de votre application
Le paramètre redirect_uri est l’url vers laquelle sera redirigée la réponse. Cette URL doit être sur le même domaine que l’url déclarée à Facebook lors de l’enregistrement de l’application.
Le paramètre type permet de spécifier quel type d’authentification on utilise (ici le user agent flow qui est préconisé par Facebook dans ce genre de scenarii car c’est celui qui est utilisé par l’api javascript).
Le paramètre display permet de spécifier comment doit s’afficher la fenêtre d’authentification: popup, wap, touch ou page complète.
Le paramètre scope contient une liste des autorisations requises pour l’application séparées par des virgules. Une liste complète des autorisations existantes est disponible ICI

Si l’utilisateur autorise votre application, une requête contenant l’access_token ainsi que sa date d’expiration est envoyée à votre url de redirection.
Petite astuce, si vous voulez un access_token qui n’expire pas, demandez la permission offline_access qui vous permet de lire les informations de l’utilisateur même quand il n’est pas connecté.

Scénario In-browser: L’API Javascript

Facebook propose une API Javascript pour effectuer ces opérations.
Elle simplifie grandement les choses mais elle a un revers: elle impose de charger le script d’initialisation complet de Facebook qui est particulièrement lourd.
Pour y palier, il faut charger ces scripts et initialiser l’application de manière asynchrone grâce au script suivant:

<div id="fb-root"></div>
<script>
  window.fbAsyncInit = function() {
    FB.init({appId: 'your app id', status: true, cookie: true,
             xfbml: true});
  };
  (function() {
    var e = document.createElement('script'); e.async = true;
    e.src = document.location.protocol +
      '//connect.facebook.net/en_US/all.js';
    document.getElementById('fb-root').appendChild(e);
  }());
</script>

Il existe différentes localisations du script il suffit de remplacer en_US par la localisation que vous souhaitez. Elles sont identifiées par : code ISO de la langue + « _ » + code du pays. (pour la France fr_FR)

Une fois l’application initialisée, plusieurs fonctions sont disponibles:

  • FB.login: Permet d’authentifier l’utilisateur
  • FB.getLoginStatus: Permet d’obtenir le statut d’authentification de l’utilisateur

Cette API va être très pratique pour gérer les scénarii d’interaction Silverlight / Facebook dans le browser.
Il est en effet très simple de faire communiquer le Silverlight avec le javascript contenu dans la page qui l’héberge.

Pour déclarer une méthode connue et appelable par le javascript de la page, il faut enregistrer l’objet qui la contient grâce à un appel à :

HtmlPage.RegisterScriptableObject("FacebookHelper", this);

et ajouter à la méthode l’attribut [ScriptableMember].
Elle est accessible du javascript par le code:

var control = document.getElementById("silverlightControl");
control.Content.NomDeLObjet.NomDeLaMethode(Arguments);

à l’inverse, pour appeler une fonction javascript de la page à partir du silverlight, il faut utiliser

HtmlPage.Window.Invoke("NomDeLaFonction", Arguments);

On pourra donc au clic sur le bouton d’authentification appeler une fonction javascript de la forme:

    <script>            
        function FacebookLogin() {
            FB.getLoginStatus(function (response) {
                if (response.status != "connected") {
                    RequestPerms();
                }
                else {
                    var accessToken = response.session.access_token;
                    var uid = response.session.uid;
                    var control = document.getElementById("silverlightControl");
                    control.Content.FacebookHelper.FacebookLoginCallback(accessToken, uid);
                }
            });
        }
 
        function RequestPerms() {
            FB.login(
                    function (response2) {
                        if (response2.status == "connected") {
                            var accessToken = response2.session.access_token;
                            var uid = response2.session.uid;
                            var control = document.getElementById("silverlightControl");
                            control.Content.FacebookHelper.FacebookLoginCallback(accessToken, uid);
                        }
                    }, { perms: 'email' });
        }
    </script>    

Dans le code précédent, la fonction FacebookLogin invoquée par le bouton Silverlight va vérifier l’état de la session de l’utilisateur et l’authentifier au besoin en demandant la permission d’accéder à son email. Le gros inconvénient est que la demande d’autorisation ouvre une popup qui sera bloquée par la majorité des navigateurs il faudra donc que l’utilisateur débloque manuellement la popup pour autoriser l’application.
Au retour, la réponse contiendra l’access_token et le retransmettra au silverlight qui pourra l’utiliser pour requêter l’API Graph tout simplement grâce à des requpetes http (par exemple avec un objet WebClient)

Dans les scenarii in browser, il est donc très simple de récupérer l’access_token permettant de requêter l’API Graph grâce au SDK Javascript. En revanche, qu’en est-il pour les scenarii OOB?

Gérer le cas Out of Browser

Ici les choses se corsent un peu: impossible d’utiliser l’API javascript, il va falloir inclure un contrôle WebBrowser dans notre page et aller s’autoriser manuellement sur Facebook.

On va donc devoir utiliser comme source du webbrowser l’url qu’on a vue tout à l’heure:
https://graph.facebook.com/oauth/authorize?client_id=…&redirect_uri=http://www.example.com/oauth_redirect&type=user_agent&display=popup&scope=XXX

Seulement le fait de naviguer vers cette url oblige votre application à être en mode full trust car elle n’est pas contenue dans le domaine de base de l’application.
2ème problème, il va nous falloir une page pour réceptionner la redirection et à partir de cette page récupérer l’access_token qui sera renvoyé.
Nous allons pour cela utiliser l’évènement ScriptNotify du contrôle WebBrowser.
Le contenu de la page de redirection sera donc le suivant:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <div id="fb-root">
    </div>
    <script>
        window.external.notify(window.location.href);        
    </script>
</body>
</html> 

Il suffira ensuite dans le gestionnaire de l’évènement ScriptNotify de décomposer les fragments de l’url pour récupérer l’access_token et s’en servir dans l’API Graph.

Vous pouvez voir en action une petite démo ICI
Le code source est disponible ICI
Cette application très simple fonctionne en mode in browser et en mode oob et permet d’afficher l’email de l’utilisateur après l’avoir récupéré via l’API Graph de Facebook.
N’oubliez pas d’enregistrer votre propre application chez facebook car l’appId qui est inclus dans le code ne fonctionnera que sur le domaine de l’application de démo…

EDIT: Une petite erreur d’url s’était glissée et empêchait la démo de fonctionner oob. Elle affichait une erreur 404 au retour de l’authentification facebook. C’est corrigé!

Nous avons vu comment autoriser notre application à utiliser des données de Facebook dans les scenarii in browser et out of browser et comment requêter l’API Graph.
Il nous reste à voir dans les articles suivants comment envoyer des informations à Facebook pour les publier et comment suivre et analyser les résultats de notre application grâce à Insight.

Enjoy…

Étiquettes : ,
  1. BEN HAJ
    30/03/2011 à 2:54

    D’abord je te remercie pour ce tutoriel aussi bien organisé.
    J’ai téléchargé ton appli mais elle ne marche que en mode ‘Out of browser’ !
    pour un scenario ‘in browser’ l’application se plante au niveau de :HtmlPage.Window.Invoke(« InitFacebook », « fr_FR »);
    et elle lève une exception ‘Échec de l’appel : InitFacebook.’

    Pouvez-vous m’aider ?

    Merci.

  2. 30/03/2011 à 5:45

    Bonjour,
    Je crois savoir d’où vient le problème. En effet dans la solution en téléchargement, il y a 2 pages de test: FaceBookSLTestTestPage.html et FaceBookSLTestTestPage.aspx. Je viens de me rendre compte que je n’ai mis les fonctions javascript nécessaires que dans la version html et pas aspx. Le plantage que tu vois doit venir du fait que tu essayes la version aspx.
    En revanche si tu copies les fonctions javascript que tu trouveras dans la page html dans la page aspx ça fonctionnera. Visual Studio génère les 2 pages de test mais je n’utilise la page aspx qu’au cas où j’ai besoin de code serveur sur la page.

  1. 21/12/2010 à 1:10

Laisser un commentaire

Entrez vos coordonnées ci-dessous ou cliquez sur une icône pour vous connecter:

Logo WordPress.com

Vous commentez à l'aide de votre compte WordPress.com. Déconnexion / Changer )

Image Twitter

Vous commentez à l'aide de votre compte Twitter. Déconnexion / Changer )

Photo Facebook

Vous commentez à l'aide de votre compte Facebook. Déconnexion / Changer )

Photo Google+

Vous commentez à l'aide de votre compte Google+. Déconnexion / Changer )

Connexion à %s

%d blogueurs aiment cette page :