Ajout de l’authentification à votre application Apache Cordova

Article
11/08/2023

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 tutoriel, vérifiez que vous avez créé le projet et activé la synchronisation hors connexion.

Configurer votre back-end pour l’authentification

Pour configurer votre back-end pour l’authentification, vous devez :

Créer une inscription d’application.
Configurer l’authentification et l’autorisation dans Azure App Service.
Ajouter votre application aux URL de redirection externes autorisées.

Au cours de ce tutoriel, nous allons configurer votre application afin qu’elle utilise 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 Inscriptions Nouvelles inscriptions> d’application d’ID>Microsoft Entra.
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 comptes Microsoft personnels (par exemple, Skype, Xbox).
Sous URI de redirection, sélectionnez Web, puis entrez <backend-url>/.auth/login/aad/callback. Par exemple, si l’URL de votre back-end 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 de l’application (client).
Dans le volet gauche, sélectionnez Certificats et secrets>Nouvelle clé secrète client.
Entrez une description appropriée, sélectionnez une durée de validité, puis sélectionnez Ajouter.
Copiez le secret dans la page Certificats et secrets. La valeur n’est plus affichée.
Sélectionnez Authentification.
Sous octroi implicite et flux hybrides, activez les jetons d’ID.
Appuyez sur Enregistrer en haut de la page.

Important

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

Configurer l’authentification et l’autorisation dans Azure App Service

Dans le portail Azure, sélectionnez Toutes les ressources, puis votre instance App Service.
Sélectionnez Paramètres>Authentification.
Appuyez sur Ajouter un fournisseur d’identité.
Sélectionnez Microsoft en tant que fournisseur d'identité.
- Pour le type d’inscription d’application, sélectionnez Fournir les détails d’une inscription d’application existante.
- Collez les valeurs que vous avez copiées précédemment dans les zones d’ID d’application (client) et de secret client.
- Pour l’URL de l’émetteur, entrez https://login.microsoftonline.com/9188040d-6c67-4c5b-b112-36a304b66dad/v2.0. Cette URL est l’« URL de locataire magique » pour les connexions Microsoft.
- Pour Restreindre l’accès, sélectionnez Exiger l’authentification.
- Pour la requête non authentifiée, sélectionnez HTTP 401 Non autorisé.
Cliquez 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 impose 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.

LE SAVIEZ-VOUS ? Vous pouvez également autoriser les utilisateurs avec des comptes d’organisation dans Microsoft Entra ID, Facebook, Google, Twitter ou n’importe quel fournisseur openID Connecter compatible. Suivez les instructions fournies dans la documentation d’Azure App Service.

Vérifier que l’authentification est demandée

Exécutez 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 générée après le démarrage de l'application.

Ajouter l'authentification à l'application

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

Ajouter le fournisseur d’authentification à la liste des bonnes sources connues.
Appeler 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.	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`
Twitter	Twitter	`https://api.twitter.com`

Modifier www/index.html; ajoutez l’hôte OAuth pour Microsoft Entra ID 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 sur plusieurs lignes pour une meilleure 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
    });
}

Test de l'application

Exécutez la commande suivante :

cordova run android

Une fois le démarrage initial terminé, vous serez invité à vous connecter avec vos informations d’identification Microsoft. Une fois l’opération terminée, vous pouvez ajouter et supprimer des éléments dans la liste.

Conseil

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

Suppression des ressources

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

Étapes suivantes

Jetez un coup d’œil aux sections pratiques :

Vous pouvez également effectuer un démarrage rapide pour une autre plateforme en utilisant le même service :