[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 :
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 : 244