Ajouter l’authentification à votre application Apache Cordova

Article
05/05/2021

Note

Ce produit est mis hors service. Pour un remplacement des projets utilisant .NET 8 ou version ultérieure, consultez la bibliothèque Datasync Community Toolkit.

Dans ce tutoriel, vous ajoutez l’authentification Microsoft au projet de démarrage rapide à l’aide de l’ID Microsoft Entra. Avant de suivre ce didacticiel, vérifiez que vous avez créé le projet et activé la synchronisation hors connexion.

Configurer votre serveur principal pour l’authentification

Pour configurer votre serveur principal pour l’authentification, vous devez :

Créez une inscription d’application.
Configurez l’authentification et l’autorisation Azure App Service.
Ajoutez votre application aux URL de redirection externe autorisées.

Au cours de ce tutoriel, nous allons configurer votre application pour utiliser l’authentification Microsoft. Un locataire Microsoft Entra a été configuré automatiquement dans votre abonnement Azure. Vous pouvez utiliser l’ID Microsoft Entra pour configurer l’authentification Microsoft.

Vous avez besoin de l’URL principale du service Azure Mobile Apps fourni lors de l’approvisionnement du service.

Créer une inscription d’application

Connectez-vous au portail Azure .
Sélectionnez 'ID Microsoft Entra>Les inscriptions d’applications>nouvelle inscription.
Dans la page Inscrire une application, entrez zumoquickstart dans le champ Nom.
Sous types de comptes pris en charge, sélectionnez Comptes dans n’importe quel annuaire organisationnel (n’importe quel répertoire Microsoft Entra - multilocataire) et les comptes Microsoft personnels (par exemple, Skype, Xbox).
Dans URI de redirection, sélectionnez web et tapez <backend-url>/.auth/login/aad/callback. Par exemple, si votre URL principale est https://zumo-abcd1234.azurewebsites.net, vous devez entrer https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback.
Appuyez sur le bouton Inscrire en bas du formulaire.
Copiez l’ID d’application (client).
Dans le volet gauche, sélectionnez Certificats & secrets>nouveau secret client.
Entrez une description appropriée, sélectionnez une durée de validité, puis sélectionnez Ajouter.
Copiez le secret dans la page certificats & certificats . La valeur n’est plus affichée.
Sélectionnez d’authentification.
Sous flux implicites et hybrides, activez les jetons d’ID .
Appuyez sur Enregistrer en haut de la page.

Important

La valeur de clé secrète client (mot de passe) est une information d’identification de sécurité importante. Ne partagez pas le mot de passe avec n’importe qui ou ne le distribuez pas dans une application cliente.

Configurer l’authentification et l’autorisation Azure App Service

Dans le portail Azure, sélectionnez Toutes les ressources, puis votre App Service.
Sélectionnez Paramètres>d’authentification.
Appuyez sur Ajouter un fournisseur d’identité.
Sélectionnez Microsoft en tant que fournisseur d’identité.
- Pour type d’inscription d’application, sélectionnez Fournissez les détails d’uned’inscription d’application existante.
- Collez les valeurs que vous avez copiées précédemment dans l’ID d’application (client) et les zones clé secrète client.
- Pour URL de l’émetteur, entrez https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Cette URL est l'« URL du locataire magic » pour les connexions Microsoft.
- Pour Restreindre l’accès, sélectionnez Exiger l’authentification.
- Pour requête non authentifiée, sélectionnez HTTP 401non autorisé.
Appuyez sur Ajouter.
Une fois l’écran d’authentification retourné, appuyez sur Modifier en regard des paramètres d’authentification.
Dans la zone URL de redirection externe autorisées, entrez zumoquickstart://easyauth.callback.
Appuyez sur Enregistrer.

L’étape 10 nécessite que tous les utilisateurs soient authentifiés avant d’accéder à votre back-end. Vous pouvez fournir des contrôles affinés en ajoutant du code à votre back-end.

AVEZ-VOUS SU ? Vous pouvez également autoriser les utilisateurs avec des comptes d’organisation dans Microsoft Entra ID, Facebook, Google, Twitter ou n’importe quel fournisseur compatible OpenID Connect. Suivez les instructions de la documentation Azure App Service.

Tester que l’authentification est demandée

Exécuter l’application à l’aide de cordova run android
Vérifiez qu’une exception non gérée avec un code d’état 401 (non autorisé) est déclenchée après le démarrage de l’application.

Ajouter l’authentification à l’application

Pour ajouter l’authentification via le fournisseur intégré, vous devez :

Ajoutez le fournisseur d’authentification à la liste des sources connues.
Appelez le fournisseur d’authentification avant d’accéder aux données.

Mettre à jour la stratégie de sécurité du contenu

Chaque application Apache Cordova déclare ses bonnes sources connues via un en-tête Content-Security-Policy. Chaque fournisseur pris en charge a un hôte OAuth qui doit être ajouté :

Fournisseur	Nom du fournisseur du Kit de développement logiciel (SDK)	Hôte OAuth
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	google	`https://accounts.google.com`
Gazouiller	gazouiller	`https://api.twitter.com`

Modifier www/index.html; ajoutez l’hôte OAuth pour l’ID Microsoft Entra comme suit :

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

Le contenu est plusieurs lignes pour la lisibilité. Placez tout le code sur la même ligne.

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

Vous avez déjà remplacé ZUMOAPPNAME par le nom de votre application.

Appeler le fournisseur d’authentification

Modifier www/js/index.js. Remplacez la méthode setup() par le code suivant :

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

Tester l’application

Exécutez la commande suivante :

cordova run android

Une fois le démarrage initial terminé, vous êtes invité à vous connecter avec vos informations d’identification Microsoft. Une fois terminé, vous pouvez ajouter et supprimer des éléments de la liste.

Pourboire

Si l’émulateur ne démarre pas automatiquement, ouvrez Android Studio, puis sélectionnez Configurer>gestionnaire AVD. Cela vous permettra de démarrer l’appareil manuellement. Si vous exécutez adb devices -l, vous devez voir votre appareil émulé sélectionné.

suppression des ressources

Maintenant que vous avez terminé le didacticiel de démarrage rapide, vous pouvez supprimer les ressources avec az group delete -n zumo-quickstart. Vous pouvez également supprimer l’inscription globale de l’application utilisée pour l’authentification via le portail.

Étapes suivantes

Jetez un coup d’œil aux sections HOW TO :

Serveur (Node.js)
Serveur (ASP.NET Framework)
client Apache Cordova

Vous pouvez également effectuer un démarrage rapide pour une autre plateforme à l’aide du même service :

windows (UWP)
Windows (WPF)
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

Partager via