Windows Azure Mobile Services – HTML - Démarrez avec l’authentification dans Mobile Services

Ce billet est une traduction du tutoriel de la documentation sur le site Windows Azure. Vous pouvez le retrouver en version originale à http://www.windowsazure.com/en-us/develop/mobile/tutorials/get-started-with-users-html/?fb=fr-fr.

Ce sujet vous montre comment authentifier des utilisateurs dans Windows Azure Mobile Services à partir de votre application HTML. Dans ce tuto, vous rajoutez l’authentification au projet quickstart en utilisant un fournisseur d’identité supporté par Mobile Services. Après vous être authentifié avec succès, et une fois que Mobile Services vous autorise l’accès, la valeur de l’ID utilisateur est affichée.

Ce tuto présente les étapes de base qui permettront l’authentification de votre appli :

  1. Déclarez votre appli pour l’authentification et configurez Mobile Services
  2. Restreignez aux utilisateurs authentifiés les droits d’accès aux tables
  3. Ajoutez l’authentification à l’appli

Ce tuto est basé sur Mobile Services quickstart. Vous devez d’abord avoir regardé le tutoriel Get Started with Mobile Services.

Déclarez votre appli pour l’authentification et configurez Mobile Services

Pour pouvoir authentifier des utilisateurs, vous devez configurer votre appli chez un fournisseur d’identité. Vous devez ensuite recopier dans Mobile Services le secret client généré par le fournisseur d’identité.

  1. Connectez-vous sur le portail de gestion Windows Azure, cliquez sur Mobile Services et cliquez ensuite sur votre mobile service.

 

 2. Cliquez sur l’onglet Dashboard et notez la valeur de l’URL du Site.

 

Il se peut que vous deviez donner cette valeur au fournisseur d’identité quand vous configurez votre appli.

3. Choisissez un fournisseur d’identité de la liste ci-dessous et suivez les étapes pour configurer votre appli avec ce fournisseur :

Rappelez-vous de noter l’identité client et les valeurs secrètes générées par le fournisseur.

Note de sécurité : Le secret généré par le fournisseur est une crédentité importante pour la sécurité. Ne partagez ce secret avec personne et ne le mettez pas dans votre application.

4. De retour dans le portail de gestion, cliquez sur l’onglet IDENTITY, entrez l’identifiant de l’appli et les valeurs secrètes partagées obtenues auprès de votre fournisseur d’identité, et cliquez sur SAVE.

 

 Votre mobile service et votre application sont maintenant tout deux configurés pour fonctionner avec le fournisseur d’authentification choisi.

 Restreignez les droits d’accès aux utilisateurs authentifiés 

  1. Dans le Portail de gestion, cliquez sur l’onglet Data, puis sur TodoItem.

 

2. Cliquez sur l’onglet Permissions, positionnez toutes les authentifications à Only authenticated users, et cliquez ensuite sur Enregistrer. Cela garantira que toutes les opérations sur la table TodoItem requerront un utilisateur authentifié. Cela simplifie également les scripts dans le prochain tutoriel car ils n’auront pas à autoriser la possibilité d’avoir des utilisateurs anonymes qui accèdent à la table. 

3. Dans le directory app, lancez un des fichiers de commandes suivants du sous-fichier server.

  • launch-windows (ordinateurs Windows)
  • launch-mac.command (ordinateurs Mac OS X)
  • launch-linux.sh (ordinateurs Linux)

Note : Sur un ordinateur Windows, tapez « R » quand PowerShell vous demande de confirmer que vous voulez bien démarrer le script. Votre navigateur web pourra peut-être vous prévenir de ne pas le démarrer car il a été téléchargé à partir d’internet. Quand cela arrive, vous devez demander au navigateur de procéder au chargement du script.

Cela génère un serveur web sur votre ordinateur local pour héberger la nouvelle application.

4. Ouvrez l’URL http://localhost:8000/ dans un serveur web pour démarrer l’application.

Les données ne chargent pas ? Cela arrive car l’appli tente d’accéder à Mobile Serivces en tant qu’utilisateur non authentifié, mais la table TodoItem requiert maintenant cette authentification.

5. (Optionnel) Ouvrez le script debugger pour votre serveur web et rechargez la page. Vérifiez qu’un « access denied » apparaît.

Ensuite, vous allez mettre à jour l’application pour qu’elle authentifie les utilisateurs avant de demander des ressources au mobile service.

Ajoutez l’authentification à l’application

Note : Vous devriez faire appel à la méthode login en cliquant sur le bouton car le login a lieu dans une popup. Sinon, beaucoup de navigateurs supprimeront la fenêtre login.

  1. Ouvrez le fichier index.html, localisez l’élément H1 et ajoutez en-dessous le code suivant:

 

Cela vous permet de vous connecter à Mobile Services à partir de la page.

2. Dans le fichier app.js, localisez la ligne de code tout en bas du fichier qui demande à rafraîchir la fonction TodoItems, et remplacez-là par le code suivant :

 

Cela crée un ensemble de fonctions pour gérer le processus d’authentification. L’utilisateur est authentifié en utilisant un login Facebook.

Note : Si vous utilisez un fournisseur d’identité autre que Facebook, changez la valeur entrée dans la méthode login avec la valeur d’un des fournisseurs suivants : microsoftaccount, Facebook, Twitter, ou Google.

3. Retournez dans le navigateur où votre appli tourne et rafraichissez la page.

Une fois connecté, l’app doit fonctionner sans erreur, et vous devez pouvoir requêter le Mobile Service et mettre à jour les données.

Note : Quand vous utilisez Internet Explorer, vous pouvez peut-être recevoir une erreur après votre connexion : Cannot reach window opener. It may be on a different Internet Explorer zone.

Cela arrive quand la popup tourne dans une zone de sécurité différente (internet) à partir de localhost (intranet). Cela affecte uniquement les applis durant le développement utilisant localhost. Ouvrez le tableau Security des options Internet, cliquez sur Intranet Local, cliquez Sites, et désactivez Automatically detect intranet network. Rappelez-vous de changer ce paramètre quand vous avez fini de tester l’application. 

 Etapes suivantes

Dans le tutoriel suivant, Authorize users with scripts, vous allez prendre la valeur du user ID fournie par Mobile Services basée sur un utilisateur authentifié et l’utiliser pour filtrer les données renvoyées par Mobile Services.

Pour voir comment ajouter l'authentification sur votre application en utlisant une autre plateforme, cliquez ici.

Vous êtes développeur d’apps ? Nous vous invitons à rejoindre le Windows Apps Club. News, ressources, accès prioritaire aux événements Microsoft, lots spécifiques en cas de participation à nos opérations et jeux-concours : n’attendez plus et inscrivez-vous 

 Et pour mettre ce tutoriel en pratique, essayez la version d'évaluation gratuite Windows Azure 90 jours!