HeightSquare – Partie 1 : Authentification OAuth avec le Windows Runtime

Foursquare est un service de géolocalisation qui vous permet d’indiquer auprès de vos amis les endroits dans lesquels vous vous trouvez. Cette série d’articles s’articule autour de ces services, car Foursquare met à disposition une API qui permet de développer sa propre application. Cette API se présente sous la forme de services REST avec une authentification OAuth. Elle vous permet, une fois authentifié, de récupérer vos “checkins”, vos badges, les informations de vos amis, etc…

Plusieurs API Foursquare .Net existent actuellement sur Codeplex, mais pour l’instant aucune pour les applications Windows Store (ou ModernUI, ou Metro, ou Windows 8…).

Ce service de géolocalisation se prête très bien pour analyser les concepts de développement WinRT suivants :

  • Authentification OAuth grâce à la classe WebAuthenticationBrocker,
  • Enregistrement du jeton d’authentification dans les paramètres Cloud de l’application,
  • Développement d’une API Foursquare sous forme d’un composant Windows Runtime réutilisable quel que soit le langage,
  • un peu d’asynchronisme au passage avec des Task, des IAsyncOperation, des AsyncInfo
    et des SynchronizationContext,
  • et enfin la mise en place du ContactPicker permettant à notre application Foursquare
    de partager les informations de nos amis vers d’autres applications.

La série d’articles sera découpée en 3 parties (normalement!). Et dans cette 1ère
partie je vous propose de découvrir comment nous allons facilement s’authentifier
auprès de services implémentant le protocole OAuth.

L’application finale de cette série d’articles que j’ai baptisé HeightSquare sera téléchargeable dans la dernière partie…😉

En voici un aperçu :

image

Principe du protocole OAuth

De plus en plus de services Internet mettent en place une authentification basée sur le protocole OAuth. On retrouve notamment des services tels que Facebook, Twitter, Google+, FlickR, Foursquare…

Si vous désirez en connaitre la petite histoire, je vous conseille cet article de Wikipédia.

Le principe de l’authentification OAuth est assez simple. Nous allons en donner la définition, mais avant rappelons dans quel contexte un développeur peut rencontrer ce type d’authentification :

  • soit il veut consommer les services d’une API connectée et sécurisée,
  • soit il veut donner accès à sa plateforme via une API connectée et sécurisée.

C’est pour cette raison que des services comme Facebook & Co ont implémenté ce protocole.

Pour le principe d’authentification, il se décompose en étape suivante :

  • On affiche une page de Login du service connecté,
  • l’utilisateur saisie ces informations de connexion,
  • il autorise ou non l’accès à ces informations par l’application
  • le service connecté nous redirige vers une URL prédéfinie afin de nous renvoyer un
    jeton d’authentification

C’est ensuite grâce à ce jeton que nous accèderons aux données de l’utilisateur.

Selon les plateformes, ce jeton peut éventuellement expirer. Auquel cas, il faudra demander à l’utilisateur de s’authentifier une nouvelle fois.

Avec les API de Foursquare, le jeton d’authentification n’expire jamais.

Récemment avec Facebook, les jetons d’authentification de type “Offline Access” ne sont plus pris en charge…

Création de l’application sur le site Foursquare

De manière générale, ce genre d’authentification nécessite de déclarer notre application auprès de la plateforme mettant à disposition le jeton OAuth. Il nous fournir l’URL de callback de notre application et en échange elle nous fournira un identifiant, ou “ClientID”.

Avec Facebook, il faut en plus indiquer quelles sont les informations que notre application sera autorisée à accéder.

Du côté de Foursquare, il vous suffit de vous rendre à cette adresse et de créer votre application : https://fr.foursquare.com/oauth/

Il suffit de fournir au minimum un nom d’application, une adresse de page d’accueil ou de téléchargement et une adresse de callback :


image

Ensuite Foursquare fournit la description de son implémentation du protocole OAuth.

Celà consiste à interroger l’url suivante : https://foursquare.com/oauth2/authenticate?client_id=YOUR_CLIENT_ID&response_type=token&redirect_uri=YOUR_REDIRECT_URI

Vous remplacer bien évidemment les paramètres client_id et redirect_url avec vos informations et le tour est joué. Si l’utilisateur s’authentifie et autorise l’accès à ses informations, alors vous serez redirigé vers l’url suivante : https://YOUR_REDIRECT_URI/#access_token=ACCESS_TOKEN.

Il ne vous reste plus qu’à garder précieusement ce jeton pour interroger les différents services Foursquare. A chaque requête il vous suffit d’ajouter le paramètre oauth_token avec la valeur du jeton.

Par exemple pour récupérer la liste de vos amis il vous suffit d’appeler l’URL suivante : https://api.foursquare.com/v2/users/self/friends?&oauth_token=ACCESS_TOKEN.

Pour aller plus loin sur les API Foursquare, je vous conseille de consulter la documentation associée.

WebAuthenticationBroker et OAuth

Avec Windows 8 Microsoft a intégré un composant très utile, car plus besoin de se casser la tête pour ce type d’authentification… Ce composant porte le doux nom de WebAuthenticationBroker et se situe dans l’espace de nom Windows.Security.Authentication.Web.

Il s’utilise de manière extrêmement simple, en lui fournissant l’url d’authentification et l’URL de callback, comme l’illustre le code ci-dessous :

  1. string clientId = « YOUR_CLIENT_ID »;
  2. string callbackUri = « benoitlaut.wordpress.com »;
  3. string foursquareUriFormat = « https://foursquare.com/oauth2/authenticate?client_id={0}&response_type=token&redirect_uri={1} »;
  4. Uri oauthFoursquareUri = new Uri(string.Format(foursquareUriFormat, clientId, Uri.EscapeDataString(callbackUri)));
  5. Uri callbackFoursquareUri = new Uri(callbackUri);
  6. var authenticateFoursquareResult = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, oauthFoursquareUri, callbackFoursquareUri);

 

L’appel à la méthode AuthenticateAsync doit se faire dans le ThreadUI (nous y reviendrons dans la partie 2) car il nous affiche une UI. Ici le Windows Runtime fait tout pour nous, car il affiche la page Web d’authentification à l’utilisateur au sein de notre application :


image

Une fois que l’utilisateur se connecte, nous retrouvons le résultat de l’authentification dans l’objet retourné qui est de type WebAuthenticationResult.

Ce type possède une propriété ResponseStatus qui nous permet de vérifier que l’utilisateur s’est authentifier avec succès. Si c’est le cas, la propriété ResponseData contient l’url de callback avec en paramètre le jeton d’authentification OAuth, comme l’illustre le code ci-dessous :

  1. if (authenticateFoursquareResult != null && authenticateFoursquareResult.ResponseStatus == Windows.Security.Authentication.Web.WebAuthenticationStatus.Success)
  2. {
  3.     Uri tokenFoursquareUri = new Uri(authenticateFoursquareResult.ResponseData.ToString());
  4.     WwwFormUrlDecoder decoder = new WwwFormUrlDecoder(tokenFoursquareUri.Fragment);
  5.     string accessToken = decoder.GetFirstValueByName(« #access_token »);
  6.     return accessToken;
  7. }
  8. else
  9.     throw new Exception(« Unable to authenticate user! »);

 

A noter au passage, l’utilisation de la classe WwwFormUrlDecoder pour parser notre URI, en lieu et place de la classe HttpWebUtility que nous utilisions, entre autre, pour ce genre de chose.

Le code final de notre méthode d’authentification auprès des services Foursquare peut s’écrire ainsi :

  1. private async static Task<string> AuthenticateAsync(string clientId,  string callbackUri)
  2. {
  3.     string foursquareUriFormat = « https://foursquare.com/oauth2/authenticate?client_id={0}&response_type=token&redirect_uri={1} »;
  4.     Uri oauthFoursquareUri = new Uri(string.Format(foursquareUriFormat, clientId, Uri.EscapeDataString(callbackUri)));
  5.     Uri callbackFoursquareUri = new Uri(callbackUri);
  6.     var authenticateFoursquareResult = await WebAuthenticationBroker.AuthenticateAsync(WebAuthenticationOptions.None, oauthFoursquareUri, callbackFoursquareUri);
  7.     if (authenticateFoursquareResult != null && authenticateFoursquareResult.ResponseStatus == Windows.Security.Authentication.Web.WebAuthenticationStatus.Success)
  8.     {
  9.         Uri tokenFoursquareUri = new Uri(authenticateFoursquareResult.ResponseData.ToString());
  10.         WwwFormUrlDecoder decoder = new WwwFormUrlDecoder(tokenFoursquareUri.Fragment);
  11.         string accessToken = decoder.GetFirstValueByName(« #access_token »);
  12.         return accessToken;
  13.     }
  14.     else
  15.         throw new Exception(« Unable to authenticate user! »);
  16. }

Pour aller plus loin

Nous avons découvert qu’avec le Windows Runtime il est très facile de s’authentifier auprès de services implémentant le protocole OAuth. Pour aller un peu plus loin vous pouvez commencer par étudier l’exemple que Microsoft met à disposition sur le DevCenter et la page MSDN de la classe WebAuthenticationBroker.

L’étape suivante dans le développement de notre application HeightSquare sera d’encapsuler notre API dans un composant Windows Runtime afin de la rendre accessible quel que soit le langage utilisé.

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