Weblog MSDN de Thomas Conté

Le Weblog MSDN de Thomas Conté, en français.

Facebook et Windows Azure: ajouter l’authentification

Facebook et Windows Azure: ajouter l’authentification

  • Comments 1

Dans un précédent billet, nous avons vu comment préparer une application Windows Azure ASP.NET MVC 3 pour développer une application Facebook, et nous avons fait un premier test d’accès à l’API Open Graph sans authentification. Nous allons maintenant modifier cette application pour identifier l’utilisateur, ce qui nous permettra d’accéder à beaucoup plus d’informations via les API Facebook.

Nous allons bien entendu continuer d’utiliser le Facebook C# SDK, qui nous rend la tâche très simple; d’ailleurs, si vous voulez voir une session du MIX11 présentant ce SDK (par son auteur Jim Zimmerman), vous pouvez aller visionner Facebook Development in .NET sur Channel9.

Nous avions déjà précédemment référencé le package “Facebook” via NuGet pour avoir le minimum vital en termes d’API Facebook. Nous allons maintenant ajouter deux nouveaux packages et en profiter pour mettre tout à jour! En effet le SDK C# est très vivant et de nouvelles versions apparaissent fréquemment. Lancez la console NuGet et entrez:

Install-Package FacebookWebMvc

NuGet devrait vous installer deux nouveaux packages (FacebookWeb et FacebookWebMvc) et mettre à jour toutes les dépendances. Voici le résultat dans mon projet:

image

Ces nouveaux packages ajoutent quelques options dans votre fichier de configuration, ouvrez donc Web.config et allez vers la fin. Vous trouverez une ligne facebookSettings dans laquelle vous référencerez votre Application ID et votre Application Secret, ainsi votre URL Facebook (canvasPage) et l’URL de votre application (canvasUrl):

<facebookSettings appId="foo" appSecret="bar" canvasPage="http://apps.facebook.com/qwzptlk/" canvasUrl="http://localhost:81/" />
Vous trouverez bien entendu ces informations dans votre page Facebook Developer My Apps.

Nous allons maintenant ajouter une autorisation sur notre HomeController; le SDK C# Facebook propose un attribut dans Facebook.Web.Mvc pour rendre l’opération super simple, qu’il nous suffit de rajouter à notre méthode Index():

[CanvasAuthorize(Permissions="user_about_me")]

Le seul paramètre nécessaire est Permissions, dans lequel vous passerez le niveau de permissions Facebook que vous souhaitez. Facebook propose une myriade de permissions très granulaires, que vous trouverez documentées dans leur page permissions reference.

Et voilà, c’est tout! Le framework gère tout le reste. Nous pouvons maintenant ajouter dans notre méthode des accès aux données présentes dans le profil de l’utilisateur Facebook; nous allons par exemple récupérer tous ses Likes, voici la méthode complète:

[CanvasAuthorize(Permissions="user_about_me")]
public ActionResult Index()
{
    var fb = new FacebookWebClient();
    dynamic me = fb.Get("me");
    dynamic likes = fb.Get("me/likes");
    ViewBag.name = me.name;
    ViewBag.firstname = me.first_name;
    ViewBag.hometown = me.hometown.name;
    ViewBag.likes = likes.data;
    return View();
}

Comme vous le voyez, le framework utilise des variables dynamiques plutôt que fortement typées, afin de minimiser les dépendances avec la plateforme Facebook, qui a tendance à changer fréquemment.

Voyons la vue Razor correspondante:

@{
    ViewBag.Title = "Index";
}
<h2>Hello @ViewBag.firstname</h2>
How is the weather in @ViewBag.hometown ?
<h2>Stuff you like</h2>
<ul>
@foreach (var i in ViewBag.likes)
{
<li><img src="http://graph.facebook.com/@i.id/picture" alt="@i.name" /></li>
}
</ul>

Et l’on va rajouter un tout petit peu de CSS pour rendre l’affiche de la liste un peu plus sympathique!

body
{
    font-family: Verdana, Tahoma, Arial, "Helvetica Neue", Helvetica, Sans-Serif;
    color: #232323;
    background-color: #fff;
}
ul 
{
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li 
{
    float: left;
    padding: 1px;
}

Vous pouvez maintenant lancer l’application en local et tester l’URL de votre application Facebook. Vous allez tout d’abord être redirigé sur une mire de login (si vous n’êtes pas déjà connecté à Facebook), puis à la page de demande d’autorisation correspondant aux permissions demandées:

image

image

Puis enfin le résultat de votre application:

image

Voilà! Ce code de base est prêt à l’emploi pour créer une application Facebook dans Windows Azure en ASP.NET MVC 3. Le code est disponible sur code.msdn.com.

Un dernier petit truc: pour tester plus rapidement votre application en local, vous pouvez également configurer un serveur IIS au niveau du projet MVC lui-même; avec le SP1 de Visual Studio, vous pouvez même utiliser IIS Express, et cela vous permettra de tester votre application en local encore plus rapidement qu’avec le Compute Emulator Windows Azure:

image

  • merci !

Page 1 of 1 (1 items)
Leave a Comment
  • Please add 3 and 5 and type the answer here:
  • Post