Partager via

Démarrage rapide - Connecter des utilisateurs et appeler une API web dans un exemple d’application web Node.js

S’applique à : cercle vert avec un symbole de coche blanc qui indique que le contenu suivant s’applique aux locataires externes. Locataires externes (en savoir plus)

Dans ce guide de démarrage rapide, vous allez apprendre à connecter des utilisateurs et à appeler une API web à partir d’une application web Node.js dans votre locataire externe. L’exemple d’application appelle une API .NET. L’exemple d’application web utilise la bibliothèque d’authentification Microsoft (MSAL) pour Node pour gérer l’authentification.

Conditions préalables

Configurer des étendues et des rôles d’API

En inscrivant l’API web, vous devez configurer des étendues d’API pour définir les autorisations qu’une application cliente peut demander d’accéder à l’API web. En outre, vous devez configurer des rôles d’application pour spécifier les rôles disponibles pour les utilisateurs ou les applications, et accorder les autorisations d’API nécessaires à l’application web pour l’activer pour appeler l’API web.

Configurer des étendues d’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 les étapes suivantes :

  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é Valeur
    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 ».
    État Activé

  7. Sélectionnez à nouveau Ajouter une étendue, puis entrez les valeurs suivantes qui définissent une portée d'accès en lecture et en écriture à l'API. Sélectionnez Ajouter une étendue pour enregistrer vos changements :

    Propriété Valeur
    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 »
    État Activé

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 propre 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é Valeur
    Nom complet ToDoList.Read.All
    Types de membres autorisés Applications
    Valeur ToDoList.Read.All
    Descriptif Autoriser l'application à lire la liste de tâches de chaque utilisateur à l'aide de 'TodoListApi'
    Voulez-vous activer le rôle de cette application ? Maintenez cette option cochée

  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é Valeur
    Nom complet ToDoList.ReadWrite.All
    Types de membres autorisés Applications
    Valeur ToDoList.ReadWrite.All
    Descriptif Autoriser l’application à lire et écrire la liste ToDo de chaque utilisateur à l’aide de « TodoListApi »
    Voulez-vous activer le rôle de cette application ? Maintenez cette option cochée

Configurer des revendications facultatives

Vous pouvez ajouter la revendication facultative idtyp pour aider l’API web à déterminer si un jeton est un jeton d’application ou une application + jeton utilisateur . Bien que vous puissiez utiliser une combinaison de revendications scp et 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 utilisateur et application. Par exemple, la valeur de cette revendication est app lorsque le jeton est un jeton d'application uniquement.

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

  • Pour le type de jeton , sélectionnez Access.
  • 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 les autorisations d'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. Cependant, étant donné que le locataire est le locataire d'un client, les utilisateurs consommateurs eux-mêmes ne peuvent pas consentir à 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 l’É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 en tant que fichier .zip.

  • Pour cloner l’exemple, ouvrez une invite de commandes et 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-le dans un chemin de fichier où la longueur du nom est inférieure à 260 caractères.

Installer les dépendances de 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 l’inscription de votre application dans l’exemple d’application web cliente :

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

  2. Trouvez l’espace réservé :

    • Enter_the_Application_Id_Here et remplacez-le par l’ID d’application (client) de l’application cliente que vous avez inscrite précédemment. L'application cliente est celle que vous avez enregistrée dans les prérequis.
    • Enter_the_Tenant_Subdomain_Here et remplacez-le par le sous-domaine de l’Annuaire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter 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ée précédemment dans le cadre des prérequis.

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. Trouvez l’espace réservé :

    • Enter_the_Application_Id_Here et remplacez-le par l'ID d'application (client) de l'API web que vous avez copié. L’application API web est une application que vous avez inscrite précédemment dans le cadre des conditions préalables.
    • 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-le par le sous-domaine de l’Annuaire (locataire). Par exemple, si le domaine principal de votre locataire est contoso.onmicrosoft.com, utilisez contoso. Si vous ne disposez pas du nom de votre locataire, découvrez de quelle manière consulter 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 install
npm start

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

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

    Capture d’écran de connexion dans une application web Node.

  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 aucun compte, sélectionnez le lien Vous n’avez pas de compte ? Créez un lien , qui lance le flux d’inscription.

  6. Si vous choisissez l’option d’inscription, après avoir renseigné votre e-mail, votre code secret à usage unique, le nouveau mot de passe et plus de détails de compte, vous avez terminé l’ensemble du flux d’inscription. Vous observez une page similaire à la capture d’écran suivante. Vous observez une page similaire si vous choisissez l’option de connexion.

    Capture d’écran de la connexion dans une application web Node et l’appel d’une API.

Appeler une API

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

    Capture d’écran de la manipulation de la liste des tâches de l’API.

  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/périmètre ToDoList.Read.

Le point de terminaison de l’API web doit vérifier si les autorisations ou les étendues du jeton d’accès, fournies par l’application cliente, 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

  • Last updated on