Ajout de l’authentification à votre application Apache Cordova

Article
06/25/2019

Récapitulatif

Dans ce didacticiel, vous allez ajouter l’authentification au projet de démarrage rapide todolist sur Apache Cordova en faisant appel à un fournisseur d’identité pris en charge. Ce didacticiel est basé sur le didacticiel Prise en main de Mobile Apps , que vous devez effectuer en premier.

Inscription de votre application pour l’authentification et configuration d’App Service

Commencez par inscrire votre application auprès d’un site de fournisseur d’identité, puis définissez les informations d’identification générées par le fournisseur dans le serveur principal Mobile Apps.

Configurez votre fournisseur d’identité en suivant les instructions correspondantes :
Répétez les étapes précédentes pour chaque fournisseur que vous souhaitez prendre en charge dans votre application.

Regarder une vidéo montrant des étapes similaires

Restriction des autorisations pour les utilisateurs authentifiés

Par défaut, les API d’un serveur principal Mobile Apps peuvent être appelées de manière anonyme. Vous devez ensuite restreindre l’accès aux clients authentifiés uniquement.

Serveur principal Node.js (par le biais du Portail Azure) :

Dans vos paramètres de Mobile Apps, cliquez sur tables faciles , puis sélectionnez votre table. Cliquez sur Modifier les autorisations, sélectionnez Accès authentifié uniquement pour toutes les autorisations, puis cliquez sur Enregistrer.
Serveur principal .NET (C#) :

Dans le projet serveur, accédez à contrôleurs>TodoItemController. cs. Ajoutez l’attribut [Authorize] à la classe TodoItemController comme suit : Pour restreindre l’accès à des méthodes spécifiques, vous pouvez également appliquer cet attribut à ces méthodes uniquement au lieu de la classe. Publier à nouveau le projet de serveur
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
Serveur principal Node.js (via le code Node.js) :

Pour demander l’authentification pour l’accès des tables, ajoutez la ligne suivante au script de serveur Node.js :
```
  table.access = 'authenticated';
```
Pour plus d’informations, consultez la section Procédure : exiger une authentification pour l’accès aux tables. Pour savoir comment télécharger le projet de code de démarrage rapide de votre site, consultez Procédure : télécharger le projet de code de démarrage rapide du serveur principal Node.js à l’aide de Git.

À présent, vous pouvez vérifier que l’accès anonyme à votre serveur principal a été désactivé. Dans Visual Studio :

Ouvrez le projet que vous avez créé avec le didacticiel Prise en main de Mobile Apps.
Exécutez votre application dans l’émulateur Android de Google.
Vérifiez qu’un problème inattendu de connexion s’affiche après le démarrage de l’application.

Ensuite, vous mettez à jour l’application pour authentifier les utilisateurs avant de demander des ressources à partir du serveur principal d’applications mobiles.

Ajout de l'authentification à l'application

Ouvrez votre projet dans Visual Studio, puis ouvrez le fichier www/index.html pour modification.

Localisez la balise META Content-Security-Policy dans la section d’en-tête. Ajoutez l’hôte OAuth à la liste des ressources autorisées.

Fournisseur	Nom du fournisseur du Kit de développement logiciel.	Hôte OAuth
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

Voici un exemple Content-Security-Policy (implémenté pour Azure Active Directory) :

 <meta http-equiv="Content-Security-Policy" content="default-src 'self'
     data: gap: https://login.microsoftonline.com https://yourapp.azurewebsites.net; style-src 'self'">

Remplacez https://login.microsoftonline.com par l’hôte OAuth du tableau précédent. Consultez la documentation Content-Security-Policy pour en savoir plus sur la balise meta content-security-policy.

Certains fournisseurs d’authentification ne requièrent aucune modification Content-Security-Policy avec des appareils mobiles appropriés. Par exemple, aucune modification de l’approche Content-Security-Policy n’est nécessaire lorsque vous recourez à l’authentification Google sur un appareil Android.

Ouvrez le www/js/index.js fichier pour le modifier, recherchez la onDeviceReady() méthode et, sous le code de création du client, ajoutez le code suivant :
```
 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);
```
Ce code remplace le code existant qui crée la référence de table et actualise l'interface utilisateur.

La méthode login() lance l'authentification auprès du fournisseur. La méthode login() est une méthode asynchrone qui renvoie une promesse JavaScript. Le reste de l’initialisation est placé au sein de la réponse de promesse, de manière à ce qu’aucune exécution n’intervienne avant la fin de la méthode login().
Dans le code que vous venez d'ajouter, remplacez SDK_Provider_Name par le nom de votre fournisseur de connexion. Par exemple, pour Azure Active Directory, utilisez client.login('aad').
Exécutez votre projet. Une fois que le projet a terminé l’initialisation, votre application affiche la page de connexion OAuth du fournisseur d’authentification choisi.

Étapes suivantes

En savoir plus À propos de l’authentification avec Azure App Service.
Poursuivez le didacticiel en ajoutant les Notifications Push à votre application Apache Cordova.

Découvrez comment utiliser les Kits de développement logiciel.