Partager via


Authentifier des applications JavaScript auprès des services Azure pendant le développement local à l’aide de principaux de service

Lorsque vous créez des applications cloud, les développeurs doivent déboguer et tester des applications sur leur station de travail locale. Lorsqu’une application est exécutée sur la station de travail d’un développeur pendant le développement local, elle doit toujours s’authentifier auprès des services Azure utilisés par l’application. Cet article explique comment configurer des objets de principal de service d’application dédiés à utiliser pendant le développement local.

Diagramme montrant comment une application JavaScript pendant le développement local utilise les informations d’identification du développeur pour se connecter à Azure en obtenant ces informations d’identification installées localement.

Les principaux de service d’application dédiés pour le développement local vous permettent de suivre le principe des privilèges minimum pendant le développement de l’application. Étant donné que les autorisations sont limitées exactement à ce qui est nécessaire pour l’application pendant le développement, le code de l’application ne peut pas accéder accidentellement à une ressource Azure destinée à une autre application. Cette méthode empêche également les bogues de se produire lorsque l’application est déplacée en production, car l’application a été sur-privilégiée dans l’environnement de développement.

Un principal de service d’application est configuré pour l’application lorsque l’application est inscrite dans Azure. Lors de l’inscription d’applications pour le développement local, il est recommandé de :

  • Créez des inscriptions d’application distinctes pour chaque développeur travaillant sur l’application. Cette méthode crée des principaux de service d’application distincts pour chaque développeur à utiliser pendant le développement local et évite la nécessité pour les développeurs de partager des informations d’identification pour un seul principal de service d’application.
  • Créez des inscriptions d’applications distinctes par application. Cela limite les autorisations de l’application à ce qui est nécessaire à l’application.

Pendant le développement local, les variables d’environnement sont définies avec l’identité du principal du service d’application. Le Kit de développement logiciel (SDK) Azure pour JavaScript lit ces variables d’environnement et utilise ces informations pour authentifier l’application auprès des ressources Azure dont elle a besoin.

1. Enregistrement de l'application dans Azure AD

Les objets de principal du service d’application sont créés avec une inscription d’application dans Azure. Vous pouvez créer des principaux de service à l’aide des Portail Azure ou d’Azure CLI.

Connectez-vous au portail Azure et suivez les étapes ci-dessous.

Instructions Capture d'écran
Dans le portail Azure :
  1. Entrez inscriptions d’applications dans la barre de recherche en haut du Portail Azure.
  2. Sélectionnez l’élément étiqueté Inscriptions d’applications sous le titre Services dans le menu qui apparaît sous la barre de recherche.
Capture d’écran montrant comment utiliser la barre de recherche supérieure dans le Portail Azure pour rechercher et accéder à la page Inscriptions d’applications.
Dans la page Inscriptions d’applications, sélectionnez + Nouvelle inscription. Capture d’écran montrant l’emplacement du bouton Nouvelle inscription dans la page inscriptions d'applications.
Dans la page Inscription d’une application, remplissez le formulaire comme suit :
  1. Nom → Entrez un nom pour l’inscription de l’application dans Azure. Il est recommandé que ce nom inclue le nom de l’application, l’utilisateur pour lequel l’inscription de l’application est destinée et un identificateur tel que « dev » pour indiquer que cette inscription d’application est destinée à être utilisée dans le développement local.
  2. Types de comptes pris en chargeComptes dans cet annuaire organisationnel uniquement.
Sélectionnez Inscrire pour inscrire votre application et créer le principal du service d’application.
Capture d’écran montrant comment remplir la page Inscrire une application en lui donnant un nom et en spécifiant les types de comptes pris en charge en tant que comptes dans cet annuaire organisationnel uniquement.
Dans la page Inscription de l’application pour votre application :
  1. ID d’application (client) → Il s’agit de l’ID d’application que l’application utilisera pour accéder à Azure pendant le développement local. Copiez cette valeur dans un emplacement temporaire dans un éditeur de texte, car vous en aurez besoin dans une prochaine étape.
  2. ID de répertoire (locataire) → Cette valeur sera également nécessaire à votre application lorsqu’elle s’authentifie auprès d’Azure. Copiez cette valeur dans un emplacement temporaire dans un éditeur de texte, car elle sera nécessaire à une étape ultérieure.
  3. Informations d’identification client → Vous devez définir les informations d’identification du client pour l’application avant que votre application puisse s’authentifier auprès d’Azure et utiliser les services Azure. Sélectionnez Ajouter un certificat ou un secret pour ajouter des informations d’identification pour votre application.
Capture d’écran après la fin de l’inscription de l’application avec l’emplacement de l’ID d’application, ID de locataire.
Dans la page Certificats et secrets, sélectionnez + Nouvelle clé secrète client. Capture d’écran montrant l’emplacement du lien à utiliser pour créer une clé secrète client sur la page certificats et secrets.
La boîte de dialogue Ajouter une clé secrète client s’affiche à droite de la page. Dans cette boîte de dialogue :
  1. Description → Entrez la valeur Current.
  2. Expire → Sélectionnez une valeur de 24 mois.
Sélectionnez Ajouter pour ajouter le secret.
Capture d’écran montrant la page où une nouvelle clé secrète client est ajoutée pour le principal du service d’application créé par le processus d’inscription de l’application.
Dans la page Certificats et secrets , vous verrez la valeur de la clé secrète client.

Copiez cette valeur dans un emplacement temporaire dans un éditeur de texte, car vous en aurez besoin dans une prochaine étape.

IMPORTANT : Il s’agit de la seule fois où vous verrez cette valeur. Une fois que vous quittez ou actualisez cette page, vous ne pourrez plus voir cette valeur. Vous pouvez ajouter d’autres secrets client sans invalider ce secret client, mais vous ne verrez pas cette valeur à nouveau.
Capture d’écran montrant la page avec la clé secrète client générée.

2 - Créer un groupe de sécurité Microsoft Entra pour le développement local

Étant donné qu’il existe généralement plusieurs développeurs qui travaillent sur une application, il est recommandé de créer un groupe Microsoft Entra pour encapsuler les rôles (autorisations) dont l’application a besoin dans le développement local plutôt que d’attribuer les rôles à des objets de principal de service individuels. Cela offre les avantages suivants.

  • Chaque développeur est assuré d’avoir les mêmes rôles attribués, car les rôles sont attribués au niveau du groupe.
  • Si un nouveau rôle est nécessaire pour l’application, il doit uniquement être ajouté au groupe Microsoft Entra pour l’application.
  • Si un nouveau développeur rejoint l’équipe, un nouveau principal de service d’application est créé pour le développeur et ajouté au groupe, ce qui garantit que le développeur dispose des autorisations appropriées pour travailler sur l’application.
Instructions Capture d'écran
Accédez à la page MICROSOFT Entra ID dans le Portail Azure en tapant Microsoft Entra ID dans la zone de recherche en haut de la page, puis en sélectionnant Microsoft Entra ID dans les services. Capture d’écran montrant comment utiliser la barre de recherche supérieure dans le Portail Azure pour rechercher et accéder à la page Microsoft Entra ID.
Dans la page MICROSOFT Entra ID , sélectionnez Groupes dans le menu de gauche. Capture d’écran montrant l’emplacement de l’élément de menu Groupes dans le menu de gauche de la page Répertoire par défaut microsoft Entra ID.
Dans la page Tous les groupes, sélectionnez Nouveau groupe. Capture d’écran montrant l’emplacement du bouton Nouveau groupe dans la page Tous les groupes.
Dans la page Nouveau groupe :
  1. Type de groupeSécurité
  2. Nom du groupe → Nom du groupe de sécurité, généralement créé à partir du nom de l’application. Il est également utile d’inclure une chaîne comme local-dev dans le nom du groupe pour indiquer l’objectif du groupe.
  3. Description du groupe → Description de l’objectif du groupe.
  4. Sélectionnez le lien Aucun membre sélectionné sous Membres pour ajouter des membres au groupe.
Capture d’écran montrant comment créer un groupe Microsoft Entra pour l’application.
Dans la boîte de dialogue Ajouter des membres :
  1. Utilisez la zone de recherche pour filtrer la liste des noms principaux dans la liste.
  2. Sélectionnez les principaux de service d’application pour le développement local pour cette application. À mesure que les objets sont sélectionnés, ils sont grisés et déplacés vers la liste Éléments sélectionnés en bas de la boîte de dialogue.
  3. Lorsque vous avez terminé, sélectionnez le bouton Sélectionner .
Capture d’écran de la boîte de dialogue Ajouter des membres montrant comment sélectionner les principaux de service d’application à inclure dans le groupe.
Sur la page Nouveau groupe, sélectionnez Créer pour créer le groupe.

Le groupe sera créé et vous serez redirigé vers la page Tous les groupes. L’affichage du groupe peut prendre jusqu’à 30 secondes et vous devrez peut-être actualiser la page en raison de la mise en cache dans le Portail Azure.
Capture d’écran de la page Nouveau groupe montrant comment terminer le processus en sélectionnant le bouton Créer.

3 - Attribuer des rôles à l’application

Ensuite, vous devez déterminer les rôles (autorisations) dont votre application a besoin sur les ressources et affecter ces rôles à votre application. Dans cet exemple, les rôles sont affectés au groupe Microsoft Entra créé à l’étape 2. Les rôles peuvent se voir attribuer un rôle au niveau d’une ressource, d’un groupe de ressources ou d’une étendue d’abonnement. Cet exemple montre comment attribuer des rôles à l’étendue du groupe de ressources, car la plupart des applications regroupent toutes leurs ressources Azure dans un seul groupe de ressources.

Instructions Capture d'écran
Recherchez le groupe de ressources pour votre application en recherchant le nom du groupe de ressources à l’aide de la zone de recherche en haut du portail Azure.

Accédez à votre groupe de ressources en sélectionnant le nom du groupe de ressources sous le titre Groupes de ressources dans la boîte de dialogue.
Capture d’écran montrant comment utiliser la zone de recherche supérieure dans le portail Azure pour localiser et accéder au groupe de ressources auquel vous souhaitez attribuer des rôles (autorisations).
Dans la page du groupe de ressources, sélectionnez Contrôle d’accès (IAM) dans le menu de gauche. Capture d’écran de la page du groupe de ressources montrant l’emplacement de l’élément de menu Contrôle d’accès (IAM).
Dans la page Contrôle d’accès (IAM) :
  1. Sélectionnez l’onglet Attributions de rôles.
  2. Sélectionnez + Ajouter dans le menu supérieur, puis Ajouter une attribution de rôle dans le menu déroulant résultant.
Capture d’écran montrant comment accéder à l’onglet Attributions de rôles et à l’emplacement du bouton utilisé pour ajouter des attributions de rôles à un groupe de ressources.
La page Ajouter une attribution de rôle répertorie tous les rôles qui peuvent être attribués pour le groupe de ressources.
  1. Utilisez la zone de recherche pour filtrer la liste afin de la rendre plus facile à gérer. Cet exemple montre comment filtrer les rôles d’objets blob de stockage.
  2. Sélectionnez le rôle que vous voulez attribuer.
    Sélectionnez Suivant pour accéder à l’écran suivant.
Capture d’écran montrant comment filtrer et sélectionner des attributions de rôles à ajouter au groupe de ressources.
La page de rôle suivante Ajouter une attribution vous permet de spécifier l’utilisateur auquel attribuer le rôle.
  1. Sélectionnez Utilisateur, groupe ou principal de service sous Attribuer l’accès à.
  2. Sélectionnez + Sélectionner des membres sous Membres
Une boîte de dialogue s’ouvre sur le côté droit de la Portail Azure.
Capture d’écran montrant la case d’option permettant d’attribuer un rôle à un groupe Microsoft Entra et le lien utilisé pour sélectionner le groupe auquel attribuer le rôle.
Dans la boîte de dialogue Sélectionner des membres :
  1. La zone de texte Sélectionner peut être utilisée pour filtrer la liste des utilisateurs et des groupes de votre abonnement. Si nécessaire, tapez les premiers caractères du groupe Microsoft Entra de développement local que vous avez créé pour l’application.
  2. Sélectionnez le groupe Microsoft Entra de développement local associé à votre application.
Sélectionnez Sélectionner en bas de la boîte de dialogue pour continuer.
Capture d’écran montrant comment filtrer et sélectionner le groupe Microsoft Entra pour l’application dans la boîte de dialogue Sélectionner des membres.
Le groupe Microsoft Entra s’affiche comme sélectionné dans l’écran Ajouter une attribution de rôle.

Sélectionnez Vérifier + affecter pour accéder à la page finale, puis Vérifier + attribuer à nouveau pour terminer le processus.
Capture d’écran montrant la page Ajouter une attribution de rôle terminée et l’emplacement du bouton Vérifier + affecter utilisé pour terminer le processus.

4 - Définir des variables d’environnement de développement local

L’objet DefaultAzureCredential recherche les informations du principal de service dans un ensemble de variables d’environnement au moment de l’exécution. Étant donné que la plupart des développeurs travaillent sur plusieurs applications, il est recommandé d’utiliser un package comme dotenv pour accéder à l’environnement à partir d’un .env fichier stocké dans le répertoire de l’application pendant le développement. Cela limite les variables d’environnement utilisées pour authentifier l’application auprès d’Azure afin qu’elles ne puissent être utilisées que par cette application.

Le .env fichier n’est jamais case activée dans le contrôle de code source, car il contient la clé secrète d’application pour Azure. Le fichier .gitignore standard pour JavaScript exclut automatiquement le .env fichier de case activée-in.

Pour utiliser le package, installez d’abord dotenv le package dans votre application.

npm install dotenv

Ensuite, créez un .env fichier dans le répertoire racine de votre application. Définissez les valeurs de variable d’environnement avec les valeurs obtenues à partir du processus d’inscription d’application comme suit :

  • AZURE_CLIENT_ID → Valeur de l’ID d’application.
  • AZURE_TENANT_ID → Valeur de l’ID de locataire.
  • AZURE_CLIENT_SECRET → Mot de passe/informations d’identification générés pour l’application.
AZURE_CLIENT_ID=00000000-0000-0000-0000-000000000000
AZURE_TENANT_ID=11111111-1111-1111-1111-111111111111
AZURE_CLIENT_SECRET=abcdefghijklmnopqrstuvwxyz

Enfin, dans le code de démarrage de votre application, utilisez la dotenv bibliothèque pour lire les variables d’environnement à partir du .env fichier au démarrage.

import 'dotenv/config'

5 - Implémenter DefaultAzureCredential dans votre application

Pour authentifier les objets clients du Kit de développement logiciel (SDK) Azure sur Azure, votre application doit utiliser la DefaultAzureCredential classe à partir du @azure/identity package. Dans ce scénario, DefaultAzureCredential détecte les variables AZURE_CLIENT_IDd’environnement, AZURE_TENANT_IDet sont définies et AZURE_CLIENT_SECRET lisent ces variables pour obtenir les informations du principal du service d’application avec lesquelles se connecter à Azure.

Commencez par ajouter le package @azure/identity à votre application.

npm install @azure/identity

Ensuite, pour tout code JavaScript qui crée un objet client azure SDK dans votre application, vous devez :

  1. Importez la DefaultAzureCredential classe à partir du @azure/identity module.
  2. Créez un objet DefaultAzureCredential.
  3. Transmettez l’objet DefaultAzureCredential au constructeur d’objet client du Kit de développement logiciel (SDK) Azure.

Un exemple de cela est illustré dans le segment de code suivant.

// Azure authentication dependency
import { DefaultAzureCredential } from '@azure/identity';

// Azure resource management dependency
import { SubscriptionClient } from "@azure/arm-subscriptions";

// Acquire credential
const tokenCredential = new DefaultAzureCredential();

async function listSubscriptions() {
  try {

    // use credential to authenticate with Azure SDKs
    const client = new SubscriptionClient(tokenCredential);

    // get details of each subscription
    for await (const item of client.subscriptions.list()) {
      const subscriptionDetails = await client.subscriptions.get(
        item.subscriptionId
      );
      /* 
        Each item looks like:
      
        {
          id: '/subscriptions/123456',
          subscriptionId: '123456',
          displayName: 'YOUR-SUBSCRIPTION-NAME',
          state: 'Enabled',
          subscriptionPolicies: {
            locationPlacementId: 'Internal_2014-09-01',
            quotaId: 'Internal_2014-09-01',
            spendingLimit: 'Off'
          },
          authorizationSource: 'RoleBased'
        },
    */
      console.log(subscriptionDetails);
    }
  } catch (err) {
    console.error(JSON.stringify(err));
  }
}

listSubscriptions()
  .then(() => {
    console.log("done");
  })
  .catch((ex) => {
    console.log(ex);
  });

DefaultAzureCredential détecte automatiquement le mécanisme d’authentification configuré pour l’application et obtient les jetons nécessaires pour authentifier l’application auprès d’Azure. Si une application utilise plusieurs clients sdk, le même objet d’informations d’identification peut être utilisé avec chaque objet client sdk.