Données organisationnelles : connexion à un utilisateur et obtention d’un jeton d’accès

2025-06-13

Les utilisateurs doivent s’authentifier avec l’ID Microsoft Entra afin que Microsoft Graph accède aux données organisationnelles. Dans cet exercice, vous verrez comment le composant du Kit de mgt-login ressources Microsoft Graph peut être utilisé pour authentifier les utilisateurs et récupérer un jeton d’accès. Le jeton d’accès peut ensuite être utilisé pour effectuer des appels à Microsoft Graph.

Remarque

Si vous débutez avec Microsoft Graph, vous pouvez en savoir plus sur celui-ci dans le parcours d’apprentissage De base de Microsoft Graph .

Dans cet exercice, vous allez :

Découvrez comment associer une application Microsoft Entra ID au Kit de ressources Microsoft Graph pour authentifier les utilisateurs et récupérer des données organisationnelles.
Découvrez l’importance des étendues.
Découvrez comment le composant mgt-login de Microsoft Graph Toolkit peut être utilisé pour authentifier les utilisateurs et récupérer un jeton d’accès.

Dans l’exercice précédent, vous avez créé une inscription d’application dans Microsoft Entra ID et démarré le serveur d’applications et le serveur d’API. Vous avez également mis à jour les valeurs suivantes dans le .env fichier (TEAM_ID et CHANNEL_ID sont facultatives) :
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Vérifiez que vous avez terminé l’exercice précédent avant de continuer.
Revenez au navigateur (http://localhost:4200), sélectionnez Se connecter dans l’en-tête et connectez-vous à l’aide d’un compte d’utilisateur administrateur à partir de votre locataire Microsoft 365 Developer.

Conseil / Astuce

Connectez-vous avec votre compte d’administrateur du locataire du développeur Microsoft 365. Vous pouvez afficher d’autres utilisateurs dans votre locataire développeur en accédant au Centre d’administration Microsoft 365.
Si vous vous connectez à l’application pour la première fois, vous serez invité à donner son consentement aux autorisations demandées par l’application. Vous en apprendrez davantage sur ces autorisations (également appelées « étendues ») dans la section suivante lorsque vous explorez le code. Sélectionnez Accepter pour continuer.
Une fois connecté, vous devez voir le nom de l’utilisateur affiché dans l’en-tête.

Maintenant que vous vous êtes connecté, examinons le code utilisé pour connecter l’utilisateur et récupérer un jeton d’accès et un profil utilisateur. Vous découvrirez le composant web mgt-login qui fait partie du Kit de ressources Microsoft Graph.

Conseil / Astuce

Si vous utilisez Visual Studio Code, vous pouvez ouvrir des fichiers directement en sélectionnant :

Windows/Linux : Ctrl + P
Mac : Cmd + P

Tapez ensuite le nom du fichier que vous souhaitez ouvrir.

Ouvrez le client/package.json et notez que les packages et @microsoft/mgt les @microsoft/mgt-components packages sont inclus dans les dépendances. Le @microsoft/mgt package contient des fonctionnalités du fournisseur MSAL (Bibliothèque d’authentification Microsoft) et des composants web tels que mgt-login et d’autres qui peuvent être utilisés pour connecter des utilisateurs et récupérer et afficher des données organisationnelles.
Ouvrez client/src/main.ts et notez les importations suivantes à partir du @microsoft/mgt-components package. Les symboles importés sont utilisés pour inscrire les composants du Kit de ressources Microsoft Graph utilisés dans l’application.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Faites défiler jusqu’au bas du fichier et notez le code suivant :
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Ce code inscrit les mgt-logincomposants , mgt-search-resultset mgt-person web et les active pour une utilisation dans l’application.
Pour utiliser le composant mgt-login pour connecter des utilisateurs, l’ID client de l’application Microsoft Entra (stocké dans le fichier .env as ENTRAID_CLIENT_ID) doit être référencé et utilisé.
Ouvrez graph.service.ts et recherchez la init() fonction. Le chemin complet du fichier est client/src/app/core/graph.service.ts. Vous verrez l’importation et le code suivants :
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Ce code crée un Msal2Provider objet, en transmettant l’ID client Microsoft Entra à partir de l’inscription de votre application et pour scopes lequel l’application demande l’accès. Elles scopes sont utilisées pour demander l’accès aux ressources Microsoft Graph auxquelles l’application accède. Une fois l’objet Msal2Provider créé, il est affecté à l’objet Providers.globalProvider , qui est utilisé par les composants du Kit de ressources Microsoft Graph pour récupérer des données à partir de Microsoft Graph.
Ouvrez header.component.html dans votre éditeur et recherchez le composant mgt-login . Le chemin complet du fichier est client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Le composant mgt-login permet à l’utilisateur de se connecter et fournit l’accès à un jeton utilisé avec Microsoft Graph. Une fois la connexion réussie, l’événement loginCompleted est déclenché, ce qui appelle la loginCompleted() fonction. Bien que mgt-login soit utilisé dans un composant Angular dans cet exemple, il est compatible avec n’importe quelle application web.

L’affichage du composant mgt-login dépend de la featureFlags.microsoft365Enabled valeur définie truesur . Cet indicateur personnalisé vérifie la présence de la ENTRAID_CLIENT_ID variable d’environnement pour vérifier que l’application est correctement configurée et en mesure de s’authentifier auprès de l’ID Microsoft Entra. L’indicateur est ajouté pour prendre en charge les cas où les utilisateurs choisissent de terminer uniquement les exercices IA ou Communication dans le didacticiel, plutôt que de suivre l’ensemble de la séquence d’exercices.
Ouvrez header.component.ts et recherchez la loginCompleted fonction. Cette fonction est appelée lorsque l’événement loginCompleted est émis et gère la récupération du profil de l’utilisateur connecté à l’aide Providers.globalProviderde .
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
Dans cet exemple, un appel est effectué à l’API Microsoft Graph me pour récupérer le profil de l’utilisateur (me représente l’utilisateur connecté actuel). L’instruction this.userLoggedIn.emit(me) de code émet un événement du composant pour transmettre les données de profil au composant parent. Le composant parent est app.component.ts fichier dans ce cas, qui est le composant racine de l’application.

Pour en savoir plus sur le composant mgt-login , consultez la documentation du Kit de ressources Microsoft Graph .
Maintenant que vous vous êtes connecté à l’application, examinons comment les données organisationnelles peuvent être récupérées.

Étape suivante

Données organisationnelles : récupération de fichiers, conversations et envoi de messages à Teams

Partager via

Données organisationnelles : connexion à un utilisateur et obtention d’un jeton d’accès

Utilisation de la fonctionnalité de connexion

Exploration du code de connexion

Étape suivante

Commentaires

Ressources supplémentaires