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.
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 :
|
|
| Dans la page Inscriptions d’applications, sélectionnez + Nouvelle inscription. | 
|
Dans la page Inscription d’une application, remplissez le formulaire comme suit :
|
|
Dans la page Inscription de l’application pour votre application :
|
|
| Dans la page Certificats et secrets, sélectionnez + Nouvelle clé secrète client. | 
|
La boîte de dialogue Ajouter une clé secrète client s’affiche à droite de la page. Dans cette boîte de dialogue :
|
|
| Dans la page Certificats et secrets, la valeur de la clé secrète client vous est présentée. Copiez cette valeur dans un emplacement temporaire dans un éditeur de texte car vous en aurez besoin dans une étape ultérieure. IMPORTANT : c’est la seule fois que vous verrez cette valeur. Une fois que vous aurez quitté ou actualisé cette page, vous ne pourrez plus voir cette valeur. Vous pouvez ajouter d'autres secrets clients sans invalider ce secret client, mais vous ne verrez plus cette valeur. |
|
2 - Créez 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 suffit de l'ajouter 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 |
|---|---|
| Naviguez jusqu'à 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 la rubrique services. | 
|
| Dans la page Microsoft Entra ID, sélectionnez Groupes dans le menu de gauche. | 
|
| Dans la page Tous les groupes, sélectionnez Nouveau groupe. | 
|
Dans la page Nouveau groupe :
|
|
Dans la boîte de dialogue Ajouter des membres :
|
|
| 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. |
|
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 attribué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 au niveau 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. |
|
| Dans la page du groupe de ressources, sélectionnez Contrôle d’accès (IAM) dans le menu de gauche. | 
|
Dans la page Contrôle d’accès (IAM) :
|
|
La page Ajouter une attribution de rôle répertorie tous les rôles qui peuvent être attribués pour le groupe de ressources.
|
|
La page de rôle suivante Ajouter une attribution vous permet de spécifier l’utilisateur auquel attribuer le rôle.
|
|
Dans la boîte de dialogue Sélectionner des membres :
|
|
| Le groupe Microsoft Entra apparaît désormais 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. |
|
4 - Définir les 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. Cette étape permet de définir les variables d'environnement utilisées pour authentifier l'application auprès d'Azure, de sorte qu'elles ne puissent être utilisées que par cette application.
Le fichier .env n'est jamais vérifié dans le contrôle de source car il contient la clé secrète de l'application pour Azure. Le fichier .gitignore standard pour JavaScript exclut automatiquement le .env fichier de l’archivage.
Pour utiliser le package, installez d’abord dotenv le package dans votre application.
npm install dotenv
Ensuite, créez un fichier .env dans le répertoire racine de votre application. Définissez les valeurs des variables d'environnement avec les valeurs obtenues lors du processus d'enregistrement de l'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=00001111-aaaa-2222-bbbb-3333cccc4444
AZURE_TENANT_ID=ffffaaaa-5555-bbbb-6666-cccc7777dddd
AZURE_CLIENT_SECRET=Aa1Bb~2Cc3.-Dd4Ee5Ff6Gg7Hh8Ii9_Jj0Kk1Ll2
Enfin, dans le code de démarrage de votre application, utilisez la bibliothèque dotenv pour lire les variables d'environnement du fichier .env au démarrage.
import 'dotenv/config'
5 - Implémenter DefaultAzureCredential dans votre application
Pour authentifier les objets clients du SDK Azure auprès d'Azure, votre application doit utiliser la classe DefaultAzureCredential du package @azure/identity. 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 devrez :
- Importez la classe
DefaultAzureCredentialdu module@azure/identity. - Créez un objet
DefaultAzureCredential. - Transmettez l'objet
DefaultAzureCredentialau constructeur de l'objet client du 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/aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e',
subscriptionId: 'aaaa0a0a-bb1b-cc2c-dd3d-eeeeee4e4e4e',
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.