[Tutoriel] Utiliser SkyDrive dans vos applications Windows 8 C# / XAML

Le Live SDK offre un ensemble de contrôles et d’API qui permettent aux applications d’intégrer l’authentification unique (SSO) aux comptes Windows et d’accéder à des informations provenant de SkyDrive, Hotmail et Windows Live Messenger sur Windows Phone et Windows 8.

Les développeurs ont maintenant à leur disposition une nouvelle version du SDK, le Live SDK 5.0.  Cette nouvelle version comprend quelques changements facilitant son intégration et son utilisation dans vos applications Windows 8. Nous allons ainsi voir dans cet article comment le configurer et l’utiliser en prenant l’exemple d’une utilisation avec  SkyDrive.

Plan

Pour commencer

Comment configurer le SDK Live

Comment authentifier l’utilisateur dans l’application

Comment utiliser l’API SkyDrive

Conclusion

Pour commencer…

Tout d’abord, il faut installer le Live SDK, accessible ici :  http://msdn.microsoft.com/fr-fr/live/ff621310/

Dans cet article nous allons nous concentrer sur l’API Skydrive afin d’utiliser celle-ci dans notre application.

Lancez Visual Studio 2012 et créez un nouveau projet and select  Visual C#  ->  Windows Store –>  Grid App (XAML)

Ensuite ajoutez la référence au Live SDK :

Comment configurer le SDK Live

Nous allons voir ici quelles sont les différentes étapes nécessaire à la configuration du SDK Live afin d’utiliser celui-ci dans votre application et éviter les erreurs de ce type :

« The app is not configured correctly to use Live Connect services. To configure your app, please follow the instructions on  http://go.microsoft.com/fwlink/?LinkId=220871 .”

Configuration des services via le Store

Cette première méthode de configuration, implique d’avoir un compte développeur, c’est la méthode indiquée par le lien ci-dessus dans le message d’erreur.

Afin de configurer les services, sur votre tableau de bord, créez ou sélectionnez l’application concernée, puis dans les différentes étapes du processus de soumission sélectionnez  “Fonctionnalités avancées” :

Dans les fonctionnalités avancées, cliquez sur le lien “Information sur les notifications Push et services Live Connect”. Puis suivez les instructions pour configurer votre application…

[Conseillé] Configuration des services via Visual Studio

Un autre moyen plus facile pour configurer votre application à utiliser les services Microsoft Live et d’associer directement votre application au store depuis Visual Studio. Pour cela, clic droit sur votre application puis Store -> Associate App with the Store…

Vous aurez ainsi l’écran suivant qui s’affiche :

Connectez-vous avec votre compte développeur puis sélectionnez le nom de l’application à associer, votre application est maintenant configurée pour utiliser les services Live !

Configuration des services via le portail provisoire

Si vous n’avez pas encore de compte développeur, vous pouvez quand même configurer les services Live. Pour cela, suivez les instructions sur cette page afin d’enregistrer votre application :  https://manage.dev.live.com/build?wa=wsignin1.0

Managez vos applications

Sur cette page, retrouvez toutes vos applications qui sont associées aux services Live Connect :  https://manage.dev.live.com/Applications/Index

Pour chaque application utilisant les services Live, vous pourrez accéder aux statistiques d’utilisation, ce qui peut s’avérer bien utile :

Comment authentifier l’utilisateur  dans l’application

Méthodes d’authentification

Sachez qu’il existe deux manières différentes de se loguer sur Windows 8 :

1ère méthode

Utilisation d’un compte local  : toutes les données utilisateurs sont sauvegardées sur la machine.

  • Si l’utilisateur utilise cette méthode, il lui sera demandé de se connecter avec ses identifiants Live pour accéder au service proposé par votre application.

2ème méthode

[Nouveauté Windows 8] Utilisation d’un compte live ID : les informations personnelles sont sauvegardées sur le compte Live ID permettant des fonctionnalités telles que le roaming et la facilité de connexion aux Services Live Microsoft.

  • Si l’utilisateur utilise cette méthode, seul son accord lui sera demandé par l’application. L’avantage ici, c’est que l’utilisateur est automatiquement connecté s’il donne son autorisation à l’application.

Dans la suite de cet article, les exemples seront ainsi faits avec la deuxième méthode, en utilisant un compte Live ID.

Note : les changements dans le SDK

Pour ceux qui avaient déjà utilisé le SDK auparavant avec la version de Windows 8 Consumer Preview ou bien la Release Preview, il était nécessaire d’utiliser un bouton “sign-in” pour authentifier l’utilisateur :

    <live:SignInButton Name=btnLogIn Scopes= wl.signin wl.basic wl.contacts_create />;
    

Ce bouton pas très “user friendly” devait s’afficher sur l’interface afin que l’utilisateur clique dessus, il n’était pas facile à insérer sans que celui-ci dénature notre interface métro. Vous pouvez tout de même continuer à l’utiliser mais sachez qu’il n’est plus obligatoire pour lancer l’authentification.

Authentification

Voici comment faire dans votre code C# afin de lancer l’authentification :

    private LiveAuthClient authClient;
    private LiveConnectClient client;
/// <summary>
 /// Méthode utilisée pour authentifier l'utilisateur sur le Live SDK
 /// </summary>
 /// <returns></returns>
 public async Task<bool> Authentification()
 {
 bool result = false;
 if (authClient == null)
 {
 authClient = new LiveAuthClient();
 LiveLoginResult authResult = await authClient.LoginAsync(new List<string>() { "wl.signin", "wl.basic", "wl.skydrive", "wl.skydrive_update" });
 if (authResult.Status == LiveConnectSessionStatus.Connected)
 {
 client = new LiveConnectClient(authResult.Session);

//Récupération du prénom de l'utilisateur afin d'afficher un message de confirmation d'authentification
 LiveOperationResult meResult = await client.GetAsync("me");
 string title = string.Format("Welcome {0}!", meResult.Result["first_name"]);
 var dialog = new MessageDialog("You are now logged in application", title);
 dialog.Commands.Add(new UICommand("OK"));
 await dialog.ShowAsync();
 }
 }
 return result;
 }
    

Lorsque vous appellerez la méthode Authentification(), une fenêtre d’autorisation s’affichera afin que l’utilisateur donne son accord pour utiliser les services Live :

Si l’utilisateur accepte, une fenêtre de confirmation apparaît comme ci-dessous :

Liste des étendues utilisées

Pour avoir les droits nécessaires afin de réaliser les fonctionnalités prévues dans notre application (login, accès aux informations de base de l’utilisateur, création / édition de dossier et fichiers), nous utilisons les étendues suivantes, précisées dans la méthode  LoginAsync() :

Étendue Permet
wl.basic Accès en lecture aux informations de base sur le profil d’un utilisateur. Permet également un accès en lecture à la liste des contacts d’un utilisateur.
wl.signin Comportement de connexion unique : à l’aide de la  connexion unique, les utilisateurs connectés à Live Connect le sont également à votre site Web.
wl.skydrive L’accès en lecture aux fichiers d’un utilisateur stockés sur SkyDrive.
wl.skydrive_update L’accès en lecture et en écriture aux fichiers d’un utilisateur stockés sur SkyDrive.

Maintenant que votre utilisateur est connecté, vous pouvez utiliser l’API SkyDrive.  Voici un lien utile vers la documentation de l’API : http://msdn.microsoft.com/fr-fr/library/live/hh826521

N’oubliez pas de laisser la possibilité à l’utilisateur de se déconnecter via les préférences de votre application.

Comment utiliser l’API SkyDrive

Nous allons voir dans cette partie comment créer un dossier d’application dans lequel nous allons créer / modifier des fichiers XML afin de sauvegarder les données de notre application. Nous verrons également les méthodes de récupération des informations de l’utilisateur afin d’ajouter dans les paramètres de l’application une section permettant à l’utilisateur de se déconnecter des services.

Plus de restrictions sur le type de fichier

Depuis début septembre, les développeurs n’ont plus de restrictions quant aux types de fichiers pouvant être sauvegardés sur le compte SkyDrive de l’utilisateur.

Afin de ne pas encombrer le SkyDrive de l’utilisateur, il est conseillé de stocker vos données d’applications en utilisant la hiérarchie de dossiers suivante :

[SkyDrive root] '- ApplicationData '- [Application Name] ([Publisher Name or Company Name]) e.g. SmartShopping (NathalieBelval)

De plus, il est conseillé de rajouter dans le nom du dossier de votre application, le nom de l’éditeur (dans le cas ou deux applications auraient le même nom).

Créer un dossier d’application

Afin de créer notre dossier d’application, on vérifie tout d’abord s’il n’existe pas. Si c’est le cas, alors on le créé en utilisant la méthode suivante :

    private string appFolder = MonApplicationSkydrive;
 /// <summary>
 /// Initialisation des données, création du dossier de l'application au premier lancement
 /// </summary>
 public async Task<bool> InitData()
 {
 bool resultvalue = false;
 if (client != null)
 {
 try
 {
 LiveOperationResult filesResult = await client.GetAsync("me/skydrive/files");
 dynamic files = filesResult.Result;
 List<object> data = (List<object>)files.data;
 if (data.Where(item => (item as IDictionary<string, object>)["type"].ToString() == "folder"
 && (item as IDictionary<string, object>)["name"].ToString() == appFolder).FirstOrDefault() == null)
 {
 //Si le dossier n'existe pas, on le créé sur Skydrive
 await CreateFolder(appFolder);
 }
 resultvalue = true;
 }
 catch (LiveConnectException exception)
 {
 //infoTextBlock.Text = "Error getting folder info: " + exception.Message;
 }
 }
 return resultvalue;
 }
    

Méthode GetAsync

La méthode GetAsync(), utilisée de la manière ci-dessous, renvoie des informations sur tous les dossiers enfants, albums enfants et fichiers du dossier de niveau supérieur de l’utilisateur uniquement.

GetAsync("me/skydrive/files")

Ces informations sont représentées de cette manière, d’un point de vue conceptuel (exemple donné pour un dossier) :

    {

    : [

    {

    : folder.f1e48491bc5b426c.F1E48491BC5B426C!4485 ,

    from : {

    name : Nathalie BELVAL ,

    id : f1e48491bc5b426c

    },

    name : SmartShopping;,

    description : ,

    parent_id : folder.f1e48491bc5b426c,

    upload_location : https://apis.live.net/v5.0/folder.f1e48491bc5b426c.F1E48491BC5B426C!4485/files/,

    is_embeddable : true,

    count : 2,

    link : https://skydrive.live.com/redir.aspx?cid\u003df1e48491bc5b426c\u0026page\u003dview\u0026resid\u003dF1E48491BC5B426C!4485\u0026parid\u003dF1E48491BC5B426C!196,

    type : folder ,

    shared_with : {

    access : Just me ;

    },

    created_time : 2012-09-24T14:56:27+0000,

    updated_time : 2012-09-24T14:56:53+0000;

    }}
    

La méthode GetAsync() peut également être utilisée avec les urls suivantes en paramètre de la méthode :

Url Action
me informations sur l’utilisateur
me/picture image de l’utilisateur
me/skydrive/files représente tous les documents de l’utilisateur
me/skydrive/shared représente tous les documents partagés
me/skydrive/camera_roll représente le dossier Pellicule SkyDrive
me/skydrive/my_documents représente le dossier Documents
me/skydrive/my_photos représente le dossier Images
me/skydrive/public_documents représente le dossier Public
me/skydrive/recent_docs la liste de tous les documents SkyDrive que l’utilisateur a récemment ouvert
/me/skydrive/quota informations sur l’espace de stockage inutilisé et disponible dans SkyDrive

Méthode PostAsync

Afin de créer un dossier, nous utiliserons la méthode PostAsync() de la manière suivante :

/// <summary>
 /// Création d'un dossier
 /// </summary>
 /// <param name="folderName"></param>
 /// <returns></returns>
 public async Task<LiveOperationResult> CreateFolder(string folderName)
 {
 if (client != null)
 {
 try
 {
 var folderdata = new Dictionary<string, object>();
 folderdata.Add("name", folderName);
 folderdata.Add("type", "folder");
 return await client.PostAsync("me/skydrive", folderdata);
 }
 catch (LiveConnectException exception)
 {
 //this.infotextblock.text = "error creating folder: " + exception.message;
 }
 }

return null;
 }
    

Ajouter / Modifier un fichier

Pour ajouter ou modifier un fichier, nous utilisons la méthode BackgroundUploadAsync() de la manière suivante :

    public async Task<string> GetFolderId(string folderName)
    {
    if (client != null)
    {
    LiveOperationResult result = await client.GetAsync("me/skydrive/files?filter=folders");

    dynamic appResult = result.Result;

    List<object> folderData = appResult.data;

    foreach (dynamic folder in folderData)
    {
    string name = folder.name;

    if (name == folderName)
    return folder.id;
    }
    }
    return null;
    }

    public async Task<LiveOperationResult> UpdateFile(string folderName, StorageFile file)
    {
    if (client != null)
    {
    return await client.BackgroundUploadAsync(await GetFolderId(folderName), file.Name, file, OverwriteOption.Overwrite);
    }

    return null;
    }
    

En utilisant cette méthode, si votre fichier n’existe pas, il sera alors créé et si celui-ci existe il sera alors remplacé.

Le type de fichier accepté par la méthode peut être un  StorageFile ou bien un  IInputStream.

Supprimer un fichier

Pour supprimer un fichier, il existe une méthode DeleteAsync() qui prend en paramètre l’id du dossier à supprimer, ou bien le chemin de votre fichier. Voici un exemple d’utilisation pour supprimer un dossier :

 /// <summary>
 /// Suppression d'un dossier
 /// </summary>
 /// <param name="folderName"></param>
 /// <returns></returns>
 public async Task<LiveOperationResult> DeleteFolder(string folderName)
 {
 if (client != null)
 {
 return await client.DeleteAsync(await GetFolderId(folderName));
 }

return null;
 }

Informations sur l’utilisateur

Si dans votre application vous souhaitez afficher ou bien utiliser les nom, prénom et icône de l’utilisateur, vous pouvez le faire via la méthode GetAsync() de cette manière :

    /// <summary>
    /// Récupération du prénom l'utilisateur connecté
    /// </summary>
    public async Task<string> GetUserName()
    {
    string userName = string.Empty;

    if (client != null)
    {
    try
    {
    //Récupération de l'utilisateur connecté
    LiveOperationResult liveOpResult = await client.GetAsync("me");
    dynamic dynResult = liveOpResult.Result;
    userName = dynResult.first_name;
    }
    catch (LiveConnectException ex)
    {
    //TODO: Message d'erreur
    }
    }
    return userName;
    }

    /// <summary>
    /// Récupération de l'image l'utilisateur connecté
    /// </summary>
    public async Task<string> GetUserPicture()
    {
    string userImage = string.Empty;

    if (client != null)
    {
    try
    {
    //Récupération de l'utilisateur connecté
    LiveOperationResult liveOpResult = await client.GetAsync("me/picture");
    dynamic dynResult = liveOpResult.Result;
    dynResult = liveOpResult.Result;
    userImage = dynResult.location;
    }
    catch (LiveConnectException ex)
    {
    //TODO: Message d'erreur
    }
    }
    return userImage;
    }
    

Conclusion

Avec ces différentes méthodes, vous êtes maintenant capable de créer, modifier et supprimez vos fichiers applicatifs sur le SkyDrive de votre utilisateur.

Vous pouvez télécharger le fichier SkydriveHelper.cs ici comprenant toutes les méthodes vues dans cet article :

SkyDrive Helper

Veillez à respecter les recommandations et en faire bon usage ! Grâce à SkyDrive, vous pouvez imaginer un scénario multi-écrans pour vos applications sans avoir recours à un serveur pour héberger votre application.

Un scénario vraiment très intéressant, à mettre à profit pour fidéliser vos utilisateurs !

Nombre de vue : 145