Créer des applications JavaScript avec Microsoft Graph et l’authentification d’application uniquement

Ce tutoriel vous apprend à créer une application console JavaScript qui utilise l’API Microsoft Graph pour accéder aux données à l’aide de l’authentification d’application uniquement. L’authentification d’application uniquement est un bon choix pour les services en arrière-plan ou les applications qui doivent accéder aux données de tous les utilisateurs d’une organisation.

Remarque

Pour savoir comment utiliser Microsoft Graph pour accéder aux données au nom d’un utilisateur, consultez ce tutoriel sur l’authentification de l’utilisateur (déléguée).

Dans ce didacticiel, vous allez :

Répertorier des utilisateurs

Conseil

Au lieu de suivre ce didacticiel, vous pouvez télécharger ou cloner le dépôt GitHub et suivre les instructions du fichier LISEZ-MOI pour inscrire une application et configurer le projet.

Configuration requise

Avant de commencer ce didacticiel, vous devez avoir installéNode.js sur votre ordinateur de développement.

Vous devez également disposer d’un compte professionnel ou scolaire Microsoft avec le rôle Administrateur général. Si vous n’avez pas de locataire Microsoft 365, vous pouvez être éligible pour un client via le Programme pour les développeurs Microsoft 365 ; Pour plus d’informations, consultez la FAQ. Vous pouvez également vous inscrire à un essai gratuit de 1 mois ou acheter un plan Microsoft 365.

Remarque

Ce tutoriel a été écrit avec Node.js version 16.14.2. Les étapes décrites dans ce guide peuvent fonctionner avec d’autres versions, mais elles n’ont pas été testées.

Inscrire l’application sur le portail

17 minutes restantes

Dans cet exercice, vous allez inscrire une nouvelle application dans Azure Active Directory pour activer l’authentification d’application uniquement. Vous pouvez inscrire une application à l’aide du Centre d’administration Microsoft Entra ou à l’aide du Kit de développement logiciel (SDK) Microsoft Graph PowerShell.

Inscrire l’application pour l’authentification d’application uniquement

Dans cette section, vous allez inscrire une application qui prend en charge l’authentification d’application uniquement à l’aide du flux d’informations d’identification du client.

Centre d'administration Microsoft Entra
PowerShell

Ouvrez un navigateur et accédez au Centre d’administration Microsoft Entra et connectez-vous à l’aide d’un compte d’administrateur général.
Sélectionnez Id Microsoft Entra dans le volet de navigation de gauche, développez Identité, Applications, puis inscriptions d’applications.
Sélectionnez Nouvelle inscription. Entrez un nom pour votre application, par exemple . Graph App-Only Auth Tutorial
Définissez Types de comptes pris en chargesur Comptes dans cet annuaire organisationnel uniquement.
Laissez Redirect URI vide.
Sélectionner Inscription. Dans la page Vue d’ensemble de l’application, copiez la valeur de l’ID d’application (client) et de l’ID d’annuaire (locataire) et enregistrez-les. Vous aurez besoin de ces valeurs à l’étape suivante.
Sélectionnez Autorisations de l’API dans le volet de navigation gauche sous Gérer.
Supprimez l’autorisation User.Read par défaut sous Autorisations configurées en sélectionnant les points de suspension (...) dans sa ligne et en sélectionnant Supprimer l’autorisation.
Sélectionnez Ajouter une autorisation, puis Microsoft Graph.
Sélectionnez Autorisations d’application.
Sélectionnez User.Read.All, puis Ajouter des autorisations.
Sélectionnez Accorder le consentement de l’administrateur pour..., puis sélectionnez Oui pour fournir le consentement de l’administrateur pour l’autorisation sélectionnée.
Sélectionnez Certificats et secrets sous Gérer, puis sélectionnez Nouvelle clé secrète client.
Entrez une description, choisissez une durée, puis sélectionnez Ajouter.
Copiez le secret à partir de la colonne Valeur . Vous en aurez besoin dans les étapes suivantes.

Importante

Ce secret client n’apparaîtra plus jamais, aussi veillez à le copier maintenant.

Pour utiliser PowerShell, vous avez besoin du Kit de développement logiciel (SDK) Microsoft Graph PowerShell. Si vous ne l’avez pas, consultez Installer le Kit de développement logiciel (SDK) Microsoft Graph PowerShell pour obtenir des instructions d’installation.

Créez un fichier nommé RegisterAppForAppOnlyAuth.ps1 et ajoutez le code suivant.

param(
  [Parameter(Mandatory=$true,
  HelpMessage="The friendly name of the app registration")]
  [String]
  $AppName,

  [Parameter(Mandatory=$true,
  HelpMessage="The application permission scopes to configure on the app registration")]
  [String[]]
  $GraphScopes,

  [Parameter(Mandatory=$false)]
  [Switch]
  $StayConnected = $false
)

$graphAppId = "00000003-0000-0000-c000-000000000000"

# Requires an admin
Connect-MgGraph -Scopes "Application.ReadWrite.All AppRoleAssignment.ReadWrite.All User.Read" -UseDeviceAuthentication -ErrorAction Stop

# Get context for access to tenant ID
$context = Get-MgContext -ErrorAction Stop
$authTenant = $context.TenantId

# Create app registration
$appRegistration = New-MgApplication -DisplayName $AppName -SignInAudience "AzureADMyOrg" -ErrorAction Stop
Write-Host -ForegroundColor Cyan "App registration created with app ID" $appRegistration.AppId

# Create corresponding service principal
$appServicePrincipal = New-MgServicePrincipal -AppId $appRegistration.AppId -ErrorAction SilentlyContinue `
  -ErrorVariable SPError
if ($SPError)
{
  Write-Host -ForegroundColor Red "A service principal for the app could not be created."
  Write-Host -ForegroundColor Red $SPError
  Exit
}

Write-Host -ForegroundColor Cyan "Service principal created"

# Lookup available Graph application permissions
$graphServicePrincipal = Get-MgServicePrincipal -Filter ("appId eq '" + $graphAppId + "'") -ErrorAction Stop
$graphAppPermissions = $graphServicePrincipal.AppRoles

$resourceAccess = @()

foreach($scope in $GraphScopes)
{
  $permission = $graphAppPermissions | Where-Object { $_.Value -eq $scope }
  if ($permission)
  {
    $resourceAccess += @{ Id =  $permission.Id; Type = "Role"}
  }
  else
  {
    Write-Host -ForegroundColor Red "Invalid scope:" $scope
    Exit
  }
}

# Add the permissions to required resource access
Update-MgApplication -ApplicationId $appRegistration.Id -RequiredResourceAccess `
 @{ ResourceAppId = $graphAppId; ResourceAccess = $resourceAccess } -ErrorAction Stop
Write-Host -ForegroundColor Cyan "Added application permissions to app registration"

# Add admin consent
foreach ($appRole in $resourceAccess)
{
  New-MgServicePrincipalAppRoleAssignment -ServicePrincipalId $appServicePrincipal.Id `
   -PrincipalId $appServicePrincipal.Id -ResourceId $graphServicePrincipal.Id `
   -AppRoleId $appRole.Id -ErrorAction SilentlyContinue -ErrorVariable SPError | Out-Null
  if ($SPError)
  {
    Write-Host -ForegroundColor Red "Admin consent for one of the requested scopes could not be added."
    Write-Host -ForegroundColor Red $SPError
    Exit
  }
}
Write-Host -ForegroundColor Cyan "Added admin consent"

# Add a client secret
$clientSecret = Add-MgApplicationPassword -ApplicationId $appRegistration.Id -PasswordCredential `
 @{ DisplayName = "Added by PowerShell" } -ErrorAction Stop

Write-Host
Write-Host -ForegroundColor Green "SUCCESS"
Write-Host -ForegroundColor Cyan -NoNewline "Client ID: "
Write-Host -ForegroundColor Yellow $appRegistration.AppId
Write-Host -ForegroundColor Cyan -NoNewline "Tenant ID: "
Write-Host -ForegroundColor Yellow $authTenant
Write-Host -ForegroundColor Cyan -NoNewline "Client secret: "
Write-Host -ForegroundColor Yellow $clientSecret.SecretText
Write-Host -ForegroundColor Cyan -NoNewline "Secret expires: "
Write-Host -ForegroundColor Yellow $clientSecret.EndDateTime

if ($StayConnected -eq $false)
{
  Disconnect-MgGraph | Out-Null
  Write-Host "Disconnected from Microsoft Graph"
}
else
{
  Write-Host
  Write-Host -ForegroundColor Yellow `
   "The connection to Microsoft Graph is still active. To disconnect, use Disconnect-MgGraph"
}

Enregistrez le fichier.
Ouvrez PowerShell et remplacez le répertoire actif par l’emplacement de RegisterAppForAppOnlyAuth.ps1.

Exécutez la commande suivante :

.\RegisterAppForAppOnlyAuth.ps1 -AppName "Graph App-Only Auth Tutorial" -GraphScopes "User.Read.All"

Suivez l’invite pour ouvrir https://microsoft.com/devicelogin dans un navigateur, entrez le code fourni et terminez le processus d’authentification.

Copiez les valeurs ID client, ID de locataire et Clé secrète client à partir de la sortie du script. Vous aurez besoin de ces valeurs à l’étape suivante.

SUCCESS
Client ID: ae2386e6-799e-4f75-b191-855d7e691c75
Tenant ID: 5927c10a-91bd-4408-9c70-c50bce922b71
Client secret: ...
Secret expires: 10/28/2024 5:01:45 PM

Remarque

Notez que, contrairement aux étapes de l’inscription à l’authentification utilisateur, dans cette section, vous avez configuré des autorisations Microsoft Graph sur l’inscription de l’application. Cela est dû au fait que l’authentification d’application uniquement utilise le flux d’informations d’identification du client, ce qui nécessite que les autorisations soient configurées lors de l’inscription de l’application. Pour plus d’informations, consultez l’étendue .default .

Créer une application console JavaScript

14 minutes restantes

Commencez par créer un projet Node.js. Ouvrez votre interface de ligne de commande (CLI) dans un répertoire dans lequel vous souhaitez créer le projet. Exécutez la commande suivante :

npm init

Répondez aux invites en fournissant vos propres valeurs ou en acceptant les valeurs par défaut.

Installer les dépendances

Avant de continuer, ajoutez des dépendances supplémentaires que vous utiliserez ultérieurement.

Bibliothèque de client Azure Identity pour JavaScript afin d’authentifier l’utilisateur et d’acquérir des jetons d’accès.
Bibliothèque de client JavaScript Microsoft Graph pour effectuer des appels à Microsoft Graph.
isomorphe-fetch pour ajouter fetch l’API à Node.js. Il s’agit d’une dépendance pour la bibliothèque de client JavaScript Microsoft Graph.
readline-sync pour inviter l’utilisateur à entrer.

Exécutez les commandes suivantes dans votre interface CLI pour installer les dépendances.

npm install @azure/identity @microsoft/microsoft-graph-client isomorphic-fetch readline-sync

Charger les paramètres de l’application

Dans cette section, vous allez ajouter les détails de l’inscription de votre application au projet.

Créez un fichier à la racine de votre projet nommé appSettings.js et ajoutez le code suivant.

const settings = {
  clientId: 'YOUR_CLIENT_ID_HERE',
  clientSecret: 'YOUR_CLIENT_SECRET_HERE',
  tenantId: 'YOUR_TENANT_ID_HERE',
};

export default settings;

Mettez à jour les valeurs dans en settings fonction du tableau suivant.

Paramètre	Valeur
`clientId`	ID client de l’inscription de votre application
`tenantId`	ID de locataire de votre organisation.
`clientSecret`	Clé secrète client générée à l’étape précédente

Concevoir l’application

Dans cette section, vous allez créer un menu simple basé sur la console.

Créez un fichier à la racine de votre projet nommé graphHelper.js et ajoutez le code d’espace réservé suivant. Vous ajouterez du code supplémentaire à ce fichier dans les étapes ultérieures.
```
module.exports = {};
```

Créez un fichier à la racine de votre projet nommé index.js et ajoutez le code suivant.

import { keyInSelect } from 'readline-sync';

import settings from './appSettings.js';
import {
  initializeGraphForAppOnlyAuth,
  getAppOnlyTokenAsync,
  getUsersAsync,
  makeGraphCallAsync,
} from './graphHelper.js';

async function main() {
  console.log('JavaScript Graph App-Only Tutorial');

  let choice = 0;

  // Initialize Graph
  initializeGraph(settings);

  const choices = ['Display access token', 'List users', 'Make a Graph call'];

  while (choice != -1) {
    choice = keyInSelect(choices, 'Select an option', { cancel: 'Exit' });

    switch (choice) {
      case -1:
        // Exit
        console.log('Goodbye...');
        break;
      case 0:
        // Display access token
        await displayAccessTokenAsync();
        break;
      case 1:
        // List emails from user's inbox
        await listUsersAsync();
        break;
      case 2:
        // Run any Graph code
        await doGraphCallAsync();
        break;
      default:
        console.log('Invalid choice! Please try again.');
    }
  }
}

main();

Ajoutez les méthodes d’espace réservé suivantes à la fin du fichier. Vous les implémenterez dans les étapes ultérieures.

function initializeGraph(settings) {
  // TODO
}

async function displayAccessTokenAsync() {
  // TODO
}

async function listUsersAsync() {
  // TODO
}

async function doGraphCallAsync() {
  // TODO
}

Cela implémente un menu de base et lit le choix de l’utilisateur à partir de la ligne de commande.

Ajouter l’authentification d’application uniquement

10 minutes restantes

Dans cette section, vous allez ajouter l’authentification d’application uniquement à l’application. Cela est nécessaire pour obtenir le jeton d’accès OAuth nécessaire pour appeler Microsoft Graph. Dans cette étape, vous allez intégrer la bibliothèque de client Azure Identity pour JavaScript dans l’application et configurer l’authentification pour la bibliothèque de client JavaScript Microsoft Graph.

La bibliothèque Azure Identity fournit un certain nombre de TokenCredential classes qui implémentent des flux de jetons OAuth2. La bibliothèque de client Microsoft Graph utilise ces classes pour authentifier les appels à Microsoft Graph.

Configurer le client Graph pour l’authentification d’application uniquement

Dans cette section, vous allez utiliser la ClientSecretCredential classe pour demander un jeton d’accès à l’aide du flux d’informations d’identification du client.

Ouvrez graphHelper.js et ajoutez le code suivant.

import 'isomorphic-fetch';
import { ClientSecretCredential } from '@azure/identity';
import { Client } from '@microsoft/microsoft-graph-client';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials/index.js';

let _settings = undefined;
let _clientSecretCredential = undefined;
let _appClient = undefined;

export function initializeGraphForAppOnlyAuth(settings) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  // Ensure settings isn't null
  if (!_settings) {
    throw new Error('Settings cannot be undefined');
  }

  if (!_clientSecretCredential) {
    _clientSecretCredential = new ClientSecretCredential(
      _settings.tenantId,
      _settings.clientId,
      _settings.clientSecret,
    );
  }

  if (!_appClient) {
    const authProvider = new TokenCredentialAuthenticationProvider(
      _clientSecretCredential,
      {
        scopes: ['https://graph.microsoft.com/.default'],
      },
    );

    _appClient = Client.initWithMiddleware({
      authProvider: authProvider,
    });
  }
}

Remplacez la fonction vide initializeGraph dans index.js par ce qui suit.

function initializeGraph(settings) {
  initializeGraphForAppOnlyAuth(settings);
}

Ce code déclare deux propriétés privées, un ClientSecretCredential objet et un Client objet . La InitializeGraphForAppOnlyAuth fonction crée une instance de ClientSecretCredential, puis utilise cette instance pour créer une nouvelle instance de Client. Chaque fois qu’un appel d’API est effectué à Microsoft Graph via , _appClientil utilise les informations d’identification fournies pour obtenir un jeton d’accès.

Tester clientSecretCredential

Ensuite, ajoutez du code pour obtenir un jeton d’accès à partir de .ClientSecretCredential

Ajoutez la fonction suivante à graphHelper.js.

export async function getAppOnlyTokenAsync() {
  // Ensure credential isn't undefined
  if (!_clientSecretCredential) {
    throw new Error('Graph has not been initialized for app-only auth');
  }

  // Request token with given scopes
  const response = await _clientSecretCredential.getToken([
    'https://graph.microsoft.com/.default',
  ]);
  return response.token;
}

Remplacez la fonction vide displayAccessTokenAsync dans index.js par ce qui suit.

async function displayAccessTokenAsync() {
  try {
    const appOnlyToken = await getAppOnlyTokenAsync();
    console.log(`App-only token: ${appOnlyToken}`);
  } catch (err) {
    console.log(`Error getting app-only access token: ${err}`);
  }
}

Exécutez la commande suivante dans votre interface CLI à la racine de votre projet.
```
node index.js
```
Entrez 1 lorsque vous êtes invité à entrer une option. L’application affiche un jeton d’accès.
```
JavaScript Graph App-Only Tutorial

[1] Display access token
[2] List users
[3] Make a Graph call
[0] Exit

Select an option [1...3 / 0]: 1
App-only token: eyJ0eXAiOiJKV1QiLCJub25jZSI6IlVDTzRYOWtKYlNLVjVkRzJGenJqd2xvVUcwWS...
```
Conseil

À des fins de validation et de débogage uniquement, vous pouvez décoder les jetons d’accès d’application uniquement à l’aide de l’analyseur de jetons en ligne de Microsoft à l’adresse https://jwt.ms. Cela peut être utile si vous rencontrez des erreurs de jeton lors de l’appel de Microsoft Graph. Par exemple, vérifier que la revendication dans le role jeton contient les étendues d’autorisation Microsoft Graph attendues.

Répertorier des utilisateurs

7 minutes restantes

Dans cette section, vous allez ajouter la possibilité de répertorier tous les utilisateurs de votre instance Azure Active Directory à l’aide de l’authentification d’application uniquement.

Ouvrez graphHelper.js et ajoutez la fonction suivante.

export async function getUsersAsync() {
  // Ensure client isn't undefined
  if (!_appClient) {
    throw new Error('Graph has not been initialized for app-only auth');
  }

  return _appClient
    ?.api('/users')
    .select(['displayName', 'id', 'mail'])
    .top(25)
    .orderby('displayName')
    .get();
}

Remplacez la fonction vide listUsersAsync dans index.js par ce qui suit.

async function listUsersAsync() {
  try {
    const userPage = await getUsersAsync();
    const users = userPage.value;

    // Output each user's details
    for (const user of users) {
      console.log(`User: ${user.displayName ?? 'NO NAME'}`);
      console.log(`  ID: ${user.id}`);
      console.log(`  Email: ${user.mail ?? 'NO EMAIL'}`);
    }

    // If @odata.nextLink is not undefined, there are more users
    // available on the server
    const moreAvailable = userPage['@odata.nextLink'] != undefined;
    console.log(`\nMore users available? ${moreAvailable}`);
  } catch (err) {
    console.log(`Error getting users: ${err}`);
  }
}

Exécutez l’application et choisissez l’option 2 pour répertorier les utilisateurs.

[1] Display access token
[2] List users
[3] Make a Graph call
[0] Exit

Select an option [1...3 / 0]: 2
User: Adele Vance
  ID: 05fb57bf-2653-4396-846d-2f210a91d9cf
  Email: AdeleV@contoso.com
User: Alex Wilber
  ID: a36fe267-a437-4d24-b39e-7344774d606c
  Email: AlexW@contoso.com
User: Allan Deyoung
  ID: 54cebbaa-2c56-47ec-b878-c8ff309746b0
  Email: AllanD@contoso.com
User: Bianca Pisani
  ID: 9a7dcbd0-72f0-48a9-a9fa-03cd46641d49
  Email: NO EMAIL
User: Brian Johnson (TAILSPIN)
  ID: a8989e40-be57-4c2e-bf0b-7cdc471e9cc4
  Email: BrianJ@contoso.com

...

More users available? true

Explication du code

Considérez le code dans la getUsersAsync fonction .

Il obtient une collection d’utilisateurs
Il utilise select pour demander des propriétés spécifiques
Il utilise top pour limiter le nombre d’utilisateurs retournés
Il utilise orderBy pour trier la réponse

Facultatif : ajouter votre propre code

5 minutes restantes

Dans cette section, vous allez ajouter vos propres fonctionnalités Microsoft Graph à l’application. Il peut s’agir d’un extrait de code de la documentation Microsoft Graph ou de l’Explorateur Graph, ou du code que vous avez créé. Cette section est facultative.

Mettre à jour l’application

Ouvrez graphHelper.js et ajoutez la fonction suivante.

// This function serves as a playground for testing Graph snippets
// or other code
export async function makeGraphCallAsync() {
  // INSERT YOUR CODE HERE
}

Remplacez la fonction vide makeGraphCallAsync dans index.js par ce qui suit.

async function doGraphCallAsync() {
  try {
    await makeGraphCallAsync();
  } catch (err) {
    console.log(`Error making Graph call: ${err}`);
  }
}

Choisir une API

Recherchez une API dans Microsoft Graph que vous souhaitez essayer. Par exemple, l’API Créer un événement . Vous pouvez utiliser l’un des exemples de la documentation de l’API, ou vous pouvez personnaliser une demande d’API dans l’Explorateur Graph et utiliser l’extrait de code généré.

Configuration des autorisations

Consultez la section Autorisations de la documentation de référence de l’API choisie pour voir quelles méthodes d’authentification sont prises en charge. Certaines API ne prennent pas en charge les comptes Microsoft personnels ou d’application uniquement, par exemple.

Pour appeler une API avec l’authentification utilisateur (si l’API prend en charge l’authentification utilisateur (déléguée), consultez le tutoriel sur l’authentification utilisateur (déléguée).
Pour appeler une API avec l’authentification d’application uniquement (si l’API la prend en charge), ajoutez l’étendue d’autorisation requise dans le Centre d’administration Azure AD.

Ajouter votre code

Copiez votre code dans la makeGraphCallAsync fonction dans graphHelper.js. Si vous copiez un extrait de code à partir de la documentation ou de l’Explorateur Graph, veillez à renommer en client_appClient.

Félicitations !

Tout est terminé !

Vous avez terminé le tutoriel Microsoft Graph JavaScript. Maintenant que vous disposez d’une application opérationnelle qui appelle Microsoft Graph, vous pouvez expérimenter et ajouter de nouvelles fonctionnalités.

Découvrez comment utiliser l’authentification utilisateur (déléguée) avec le Kit de développement logiciel (SDK) JavaScript Microsoft Graph.
Consultez la vue d’ensemble de Microsoft Graph pour voir toutes les données accessibles avec Microsoft Graph.

Kit de ressources Microsoft Graph

Si vous créez des applications JavaScript avec l’interface utilisateur, le Kit de ressources Microsoft Graph offre une collection de composants qui peuvent simplifier le développement.

Partager via

Configuration requise

Inscrire l’application sur le portail

Inscrire l’application pour l’authentification d’application uniquement

Créer une application console JavaScript

Installer les dépendances

Charger les paramètres de l’application

Concevoir l’application

Ajouter l’authentification d’application uniquement

Configurer le client Graph pour l’authentification d’application uniquement

Tester clientSecretCredential

Répertorier des utilisateurs

Explication du code

Facultatif : ajouter votre propre code

Mettre à jour l’application

Choisir une API

Configuration des autorisations

Ajouter votre code

Félicitations !

Kit de ressources Microsoft Graph

Exemples TypeScript/JavaScript