Intégrer l’API Microsoft Graph pour créer des utilisateurs à partir d’Azure Active Directory

Introduction

Ce guide explique comment intégrer une application Dazzm avec l’API Microsoft Graph pour permettre la recherche et la sélection d’utilisateurs directement depuis votre Azure Active Directory.

Partie 1 — Configurer la connexion API à Azure AD

1. Enregistrer l’application Azure et ajouter les permissions Graph API

Allez sur portal.azure.com et connectez-vous à votre compte Azure

1. Enregistrez une nouvelle application Azure et notez le Tenant ID et l’Application (Client) ID — vous en aurez besoin plus tard.

2. Créez un nouveau Client Secret, nommez-le Graph API et définissez une date d’expiration.

   

3. Une fois créé, notez immédiatement la Value du secret — elle ne sera plus visible après avoir quitté la page.

   

4. Sous API Permissions, ajoutez la permission User.ReadBasic.All et assurez-vous d’accorder le Grant Admin Consent.

   

2. Connexion API externe (niveau Account)

Dans les configurations de l’application de votre compte, ajoutez une nouvelle External API Connection.

À l’aide des informations de l’enregistrement de l’application Azure, configurez la connexion comme suit :

Field

Value

Base URL

https://graph.microsoft.com/beta

Authentication

OAuth

URL

https://login.microsoftonline.com/<tenantId>

Client ID

<clientId>

Client Secret

<clientSecret> (la Value du secret Azure)

Scope

https://graph.microsoft.com/.default

Note : Le champ Client Secret attend la Value générée par Azure lors de la création du secret, et non le Secret ID.

Partie 2 — Configurer l’API de recherche d’utilisateurs

3. Créer une External Application API pour la recherche d’utilisateurs

À l’aide de la connexion créée à l’étape précédente, créez une nouvelle External Application API avec le chemin /users :

Ajoutez les paramètres suivants :

Parameter

Usage

Target

Type

Default Value

ConsistencyLevel

Header

—

Text

eventual

count

Query

$count

Bool

true

filter

Query

$filter

Text

(voir le code ci-dessous)

search

Other

—

Text

const filters = ['accountEnabled eq true'];
const searchCriteria = values.search?.trim();
if (searchCriteria?.length > 0) {
  const encodedSearchTerm = searchCriteria.replace(/'/g, "''");
  filters.push(
    `startswith(givenName, '${encodedSearchTerm}') or startswith(surname, '${encodedSearchTerm}')`
  );
}
return filters.join(' and ');

select

Query

$select

Text

displayName, givenName, surname, mail, jobTitle, manager, company

top

Query

$top

Number

100

À propos du paramètre search : Il n’est pas envoyé directement dans la requête API. Au lieu de cela, sa valeur est utilisée dans la valeur par défaut calculée de filter via values.search, ce qui permet au filtre de construire dynamiquement la chaîne de requête en fonction de ce que l’utilisateur recherche. Cela construit un filtre qui exige toujours que le compte soit activé, et restreint éventuellement les résultats par prénom ou nom de famille lorsqu’un terme de recherche est fourni.

Une fois configuré, vous pouvez utiliser le test API intégré pour vérifier que la connexion fonctionne avant de continuer.

Partie 3 — Utiliser l’API dans la commande de création d’utilisateur

4. Créer un module pour la liste déroulante de recherche d’utilisateurs Azure

Ce module alimente une liste déroulante recherchable qui peut être utilisée dans les dialogues pour rechercher des utilisateurs Azure AD.

Créez un nouveau module JS avec le code suivant :

/* Returns the configuration for the Azure AD user search dropdown */
export default function dropdownAzureSearch(db) {
  const Collection = require('@skyjs/collection');

  return {
    placeholder: 'Search for a user',
    onLoadOptions: async ({ searchTerm }) => {
      let adUsers = new Collection();

      try {
        // Fetch matching users from Azure AD
        const data = await context.executeExternalApi("AzureGraphAPIUserSearchByName", {
          search: searchTerm
        });

        adUsers = Collection.from(data.value)
          // Exclude users with no first or last name
          .reject(u => !u.givenName || !u.surname)
          .take(25)
          .map((adUser) => ({
            email: adUser.mail,
            jobTitle: adUser.jobTitle,
            firstName: adUser.givenName,
            lastName: adUser.surname,
            displayName: `${adUser.givenName} ${adUser.surname} (${adUser.mail})`
          }))
          // Exclude users with no email
          .reject(user => !user.email)
          .map(user => ({ value: user, label: user.displayName }));

      } catch (ex) {
        // If the API call fails, continue gracefully with an empty list
        console.error(ex);
      }

      return Collection.from(adUsers);
    },

    SelectedOptionComponent: ({ data }) => {
      // Displays the selected user's label in the field
      return data.label;
    }
  };
}

5. Ajouter le module au champ Email

Ajoutez le module créé ci-dessus aux props du champ email de la commande (dans le dialogue).

À ce stade, la recherche d’utilisateurs Azure est déjà fonctionnelle dans votre dialogue.

6. Gérer les données de l’utilisateur sélectionné (onChange)

Lorsqu’un utilisateur est sélectionné dans la liste déroulante, nous voulons mapper automatiquement les champs de l’objet retourné (de l’API) aux champs du formulaire. Pour ce faire, ajoutez le code suivant à l’onChange du paramètre email :

Conclusion

L’intégration de l’API Microsoft Graph permet de rechercher et de sélectionner des utilisateurs Azure AD directement depuis une application Dazzm, simplifiant ainsi la création d’utilisateurs à partir de votre annuaire Azure Active Directory.