Connecter des utilisateurs et appeler une API web dans un exemple d’application web Node.js

Ce guide utilise un exemple de code pour vous montrer comment ajouter l’authentification et l’autorisation dans une application web Node.js. L’exemple d’application connecte les utilisateurs à une application web Node.js, qui appelle ensuite une API .NET. Vous activez l’authentification et l’autorisation en utilisant les informations de votre locataire externe. L’exemple d’application web utilise la bibliothèque d’authentification Microsoft (MSAL) pour Node pour gérer l’authentification.

Dans cet article, vous allez effectuer les tâches suivantes :

• Inscrire et configurer une API web dans le Centre d’administration Microsoft Entra.

• Mettre à jour un exemple d’application web Node et l’API web ASP.NET pour utiliser les informations de votre locataire externe.

• Exécuter et tester l’exemple d’application web et l’API.

Prérequis

• Effectuez toutes les étapes de l’article Connecter des utilisateurs et appeler une API dans un exemple d’application web Node.js. Cet article vous montre comment connecter des utilisateurs à l’aide d’un exemple d’application web Node.js.
• Visual Studio Code ou un autre éditeur de code.
• Node.js.
• .NET 7.0 ou version ultérieure.
• Un client externe. Pour en créer un, choisissez l’une des méthodes suivantes :
  • (Recommandé) Utilisez l’extension ID externe Microsoft Entra pour configurer un locataire externe directement dans Visual Studio Code.
  • Créez un locataire externe dans le centre d’administration Microsoft Entra.

Inscrire une API web

Dans cette étape, vous allez créer les inscriptions d’application de l’application web et de l’API web, puis spécifier les étendues de votre API web.

Inscrire une application d’API web

1. Connectez-vous au centre d’administration de Microsoft Entra au minimum en tant que Développeur d’application.

2. Si vous avez accès à plusieurs tenants, utilisez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant externe depuis le menu Répertoires + abonnements.

3. Accédez à Identité>Applications>Inscriptions d’applications.

4. Sélectionnez + Nouvelle inscription.

5. Dans la page Inscrire une application qui s’affiche, entrez les informations relatives à l’inscription de votre application :

   1. Dans la section Nom, entrez un nom d’application significatif qui s’affiche pour les utilisateurs de l’application, par exemple, ciam-ToDoList-api.

   2. Sous Types de comptes pris en charge, sélectionnez Comptes dans cet annuaire organisationnel uniquement.

6. Sélectionnez Inscrire pour créer l’application.

7. Le Vue d’ensemble de l’application s’affiche une fois l’inscription terminée. Enregistrez l’ID du répertoire (locataire) et l’ID d’application (client) à utiliser dans le code source de votre application.

Configurer des étendues d’API

Cette API doit exposer les autorisations qu’un client doit acquérir pour appeler l’API :

Une API doit publier au moins une étendue, également appelée Autorisation déléguée, pour que les applications clientes obtiennent avec succès un jeton d’accès pour un utilisateur. Pour publier une étendue, effectuez ces étapes :

1. Dans la page Inscriptions des applications, sélectionnez l’application API que vous avez créée (ciam-ToDoList-api) pour ouvrir sa page Vue d’ensemble.

2. Sous Gérer, sélectionnez Exposer une API.

3. En haut de la page, en regard de URI d’ID d’application, sélectionnez le lien Ajouter pour générer un URI unique pour cette application.

4. Acceptez l’URI d’ID d’application proposé, tel que api://{clientId}, puis sélectionnez Enregistrer. Lorsque votre application web demande un jeton d’accès pour l’API web, elle ajoute l’URI comme préfixe pour chaque étendue que vous définissez pour l’API.

5. Sous Étendues définies par cette API, sélectionnez Ajouter une étendue.

6. Entrez les valeurs suivantes qui définit l’accès en lecture à l’API, puis sélectionnez Ajouter une étendue pour sauvegarder vos modifications :

   Propriété	active
   Nom de l’étendue	ToDoList.Read
   Qui peut donner son consentement	Administrateurs uniquement
   Nom d’affichage du consentement administrateur	Lire la liste des tâches de l’utilisateur à l’aide de « ToDoListApi »
   Description du consentement de l'administrateur	Autoriser l’application à lire la liste de tâches de l’utilisateur à l’aide de « TodoListApi ».
   State	Activé

7. Sélectionnez à nouveau Ajouter une étendue, puis entrez les valeurs suivantes qui définit l’étendue en lecture et en écriture sur l’API. Sélectionnez Ajouter une étendue pour enregistrer vos changements :

   Propriété	active
   Nom de l’étendue	ToDoList.ReadWrite
   Qui peut donner son consentement	Administrateurs uniquement
   Nom d’affichage du consentement administrateur	Lire et écrire la liste ToDo de l’utilisateur à l’aide de « ToDoListApi »
   Description du consentement de l'administrateur	Permet à l’application de lire et écrire la liste ToDo de l’utilisateur à l’aide de « ToDoListApi »
   State	Activé

8. Sous Gérer, sélectionnez Manifeste pour ouvrir l’éditeur de manifeste d’API.

9. Définissez la propriété accessTokenAcceptedVersion sur 2.

10. Sélectionnez Enregistrer.

Découvrez-en plus sur le principe du privilège minimum lors de la publication d’autorisations pour une API web.

Configurer les rôles d’application

Une API doit publier au moins un rôle d’application pour les applications, également appelé Autorisation d’application, pour que les applications clientes obtiennent un jeton d’accès en leur nom. Les autorisations d’application sont le type d’autorisations que les API doivent publier lorsqu’elles souhaitent permettre aux applications clientes de s’authentifier correctement en tant qu’elles-mêmes et qu’elles n’ont pas besoin de connecter des utilisateurs. Pour publier une autorisation d'application, procédez comme suit :

1. Dans la page Inscriptions d’applications, sélectionnez l’application que vous avez créée (par exemple, ciam-ToDoList-api) pour ouvrir sa page Vue d’ensemble.

2. Sous Gérer, sélectionnez Rôles d’applications.

3. Sélectionnez Créer un rôle d'application, puis saisissez les valeurs suivantes, puis sélectionnez Appliquer pour enregistrer vos modifications :

   Propriété	Value
   Nom complet	ToDoList.Read.All
   Types de membres autorisés	Applications
   Valeur	ToDoList.Read.All
   Description	Autoriser l'application à lire la liste de tâches de chaque utilisateur à l'aide de 'TodoListApi'

4. Sélectionnez à nouveau Créer un rôle d'application, puis saisissez les valeurs suivantes pour le deuxième rôle d'application, puis sélectionnez Appliquer pour enregistrer vos modifications :

   Propriété	Value
   Nom complet	ToDoList.ReadWrite.All
   Types de membres autorisés	Applications
   Valeur	ToDoList.ReadWrite.All
   Description	Autoriser l’application à lire et écrire la liste ToDo de chaque utilisateur à l’aide de « TodoListApi »

Configurer des revendications facultatives

Vous pouvez utiliser la revendication facultative idtyp pour aider l’API web à déterminer si un jeton est un jeton d’application ou un jeton application + utilisateur. Même si vous pouvez utiliser une combinaison de revendications scp et de rôles dans le même but, l’utilisation de la revendication idtyp est le moyen le plus simple de distinguer un jeton d’application d’un jeton application + utilisateur. Par exemple, la valeur de cette revendication est app lorsque le jeton est un jeton d'application uniquement.

Suivez les étapes de l’article Configurer les revendications facultatives pour ajouter une revendication idtyp au jeton d’accès :

• Pour le Type de jeton, sélectionnez Accès.
• Dans la liste facultative des revendications, sélectionnez idtyp.

Accorder des autorisations d’API à l’application web

Pour accorder des autorisations d’API à votre application cliente (ciam-client-app), effectuez ces étapes :

1. Dans la page Inscriptions d’applications, sélectionnez l’application que vous avez créée (par exemple, ciam-client-app) pour ouvrir sa page Vue d’ensemble.

2. Sous Gérer, sélectionnez Autorisations de l’API.

3. Sous Autorisations configurées, sélectionnez Ajouter une autorisation.

4. Sélectionnez l’onglet API utilisées par mon organisation.

5. Dans la liste des API, sélectionnez l’API, par exemple ciam-ToDoList-api.

6. Sélectionnez l’option Autorisations déléguées.

7. Dans la liste des autorisations, sélectionnez ToDoList.Read, ToDoList.ReadWrite (utilisez la zone de recherche si nécessaire).

8. Sélectionnez le bouton Ajouter des autorisations. À ce stade, vous avez attribué les autorisations correctement. Toutefois, comme le locataire est celui d’un client, les utilisateurs consommateurs eux-mêmes ne peuvent pas donner leur consentement à ces autorisations. Pour résoudre ce problème, en tant qu’administrateur, vous devez consentir à ces autorisations au nom de tous les utilisateurs du locataire :

   1. Sélectionnez Accorder le consentement administrateur pour <nom de votre locataire>, puis sélectionnez Oui.

   2. Sélectionnez Actualiser, puis vérifiez que Accordé pour <nom de votre locataire> s’affiche sous État pour les deux étendues.

9. Dans la liste Autorisations configurées, sélectionnez les autorisations ToDoList.Read et ToDoList.ReadWrite, une par une, puis copiez l’URI complet de l’autorisation pour l’utiliser ultérieurement. L’URI d’autorisation complet ressemble à api://{clientId}/{ToDoList.Read} ou api://{clientId}/{ToDoList.ReadWrite}.

Cloner ou télécharger un exemple d’application web et d’API web

Pour obtenir l’exemple d’application, vous pouvez le cloner à partir de GitHub ou le télécharger sous la forme d’un fichier .zip.

• Pour cloner l’exemple, ouvrez une invite de commandes, accédez à l’emplacement où vous souhaitez créer le projet, puis entrez la commande suivante :

  git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git
  

• Téléchargez le fichier .zip. Extrayez-la dans un chemin d’accès de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances du projet

1. Ouvrez une fenêtre de console et accédez au répertoire qui contient l’exemple d’application Node.js/Express :

   cd 2-Authorization\4-call-api-express\App
   

2. Exécutez les commandes suivantes pour installer les dépendances d’applications web :

   npm install && npm update
   

Configurer l’exemple d’application web et d’API

Pour utiliser votre inscription d’application dans l’exemple d’application web cliente :

1. Dans votre éditeur de code, ouvrez le fichier App\authConfig.js.

2. Recherchez l’espace réservé :

   • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application inscrite précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez par le sous-domaine du répertoire (locataire). Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas le nom de votre locataire, découvrez comment lire les détails de votre locataire.
   • Enter_the_Client_Secret_Here et remplacez-le par la valeur de secret d’application que vous avez copiée précédemment.
   • Enter_the_Web_Api_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’API web que vous avez copié précédemment.

Pour utiliser l’inscription de votre application dans l’exemple d’API web :

1. Dans votre éditeur de code, ouvrez le fichier API\ToDoListAPI\appsettings.json.

2. Recherchez l’espace réservé :

   • Enter_the_Application_Id_Here avec l’ID d’application (client) de l’application API web, copiée précédemment.
   • Enter_the_Tenant_Id_Here et remplacez-le par l’ID de répertoire (locataire) que vous avez copié précédemment.
   • Enter_the_Tenant_Subdomain_Here et remplacez par le sous-domaine du répertoire (locataire). Par exemple, si votre domaine principal du locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous n’avez pas le nom de votre locataire, découvrez comment lire les détails de votre locataire.

Exécuter et tester l’exemple d’application web et l’API

1. Ouvrez une fenêtre de console, puis exécutez l’API web à l’aide des commandes suivantes :

   cd 2-Authorization\4-call-api-express\API\ToDoListAPI
   dotnet run
   

2. Exécutez le client d’application web à l’aide des commandes suivantes :

   cd 2-Authorization\4-call-api-express\App
   npm start
   

3. Ouvrez votre navigateur et accédez à http://localhost:3000.

4. Sélectionnez le bouton Se connecter. Vous êtes invité à vous connecter.

   

5. Dans la page de connexion, tapez votre Adresse e-mail, sélectionnez Suivant, tapez votre Mot de passe, puis sélectionnez Se connecter. Si vous n’avez pas de compte, sélectionnez le lien Pas de compte ? En créer un, qui démarre le flux d’inscription.

6. Si vous choisissez l’option d’inscription, effectuez l’ensemble du processus d’inscription en renseignant votre e-mail, code secret à usage unique, nouveau mot de passe et autres détails de compte. Vous observez une page similaire à la capture d’écran suivante. Vous voyez une page similaire si vous choisissez l’option de connexion.

   

Appeler une API

1. Pour appeler l’API, sélectionnez le lien Afficher votre liste de tâches. Vous voyez une page similaire à la capture d’écran suivante.

   

2. Manipulez la liste des tâches en créant et en supprimant des éléments.

Fonctionnement

Vous déclenchez un appel d’API chaque fois que vous affichez, ajoutez ou supprimez une tâche. Chaque fois que vous déclenchez un appel d’API, l’application web cliente acquiert un jeton d’accès avec les autorisations (étendues) nécessaires pour appeler un point de terminaison d’API. Par exemple, pour lire une tâche, l’application web cliente doit acquérir un jeton d’accès avec l’autorisation/étendue ToDoList.Read.

Le point de terminaison d’API web doit vérifier si les autorisations ou étendues du jeton d’accès fournies par l’application client sont valides. Si le jeton d’accès est valide, le point de terminaison répond à la requête HTTP ; sinon, il répond avec une erreur HTTP 401 Unauthorized.

Contenu connexe

• Connecter des utilisateurs et appeler une API dans votre propre application web Node.js.
• Activez la réinitialisation du mot de passe.
• Personnaliser l'image de marque par défaut.
• Configurer la connexion avec Google.