Ajouter l’authentification utilisateur aux applications TypeScript pour Microsoft Graph

2025-06-12

Dans cet article, vous allez ajouter l’authentification utilisateur à l’application que vous avez créée dans Générer des applications TypeScript avec Microsoft Graph. Vous utilisez ensuite l’API utilisateur Microsoft Graph pour obtenir l’utilisateur authentifié.

Ajouter l’authentification utilisateur

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

Configurer le client Graph pour l’authentification utilisateur

Commencez par utiliser la DeviceCodeCredential classe pour demander un jeton d’accès à l’aide du flux de code de l’appareil.

Ouvrez graphHelper.ts et remplacez son contenu par ce qui suit.

import 'isomorphic-fetch';
import {
  DeviceCodeCredential,
  DeviceCodePromptCallback,
} from '@azure/identity';
import { Client, PageCollection } from '@microsoft/microsoft-graph-client';
import { User, Message } from '@microsoft/microsoft-graph-types';
// prettier-ignore
import { TokenCredentialAuthenticationProvider } from
  '@microsoft/microsoft-graph-client/authProviders/azureTokenCredentials';

import { AppSettings } from './appSettings';

let _settings: AppSettings | undefined = undefined;
let _deviceCodeCredential: DeviceCodeCredential | undefined = undefined;
let _userClient: Client | undefined = undefined;

export function initializeGraphForUserAuth(
  settings: AppSettings,
  deviceCodePrompt: DeviceCodePromptCallback,
) {
  // Ensure settings isn't null
  if (!settings) {
    throw new Error('Settings cannot be undefined');
  }

  _settings = settings;

  _deviceCodeCredential = new DeviceCodeCredential({
    clientId: settings.clientId,
    tenantId: settings.tenantId,
    userPromptCallback: deviceCodePrompt,
  });

  const authProvider = new TokenCredentialAuthenticationProvider(
    _deviceCodeCredential,
    {
      scopes: settings.graphUserScopes,
    },
  );

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

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

function initializeGraph(settings: AppSettings) {
  graphHelper.initializeGraphForUserAuth(settings, (info: DeviceCodeInfo) => {
    // Display the device code message to
    // the user. This tells them
    // where to go to sign in and provides the
    // code to use.
    console.log(info.message);
  });
}

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

Tester deviceCodeCredential

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

Ajoutez la fonction suivante à graphHelper.ts.

export async function getUserTokenAsync(): Promise<string> {
  // Ensure credential isn't undefined
  if (!_deviceCodeCredential) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Ensure scopes isn't undefined
  if (!_settings?.graphUserScopes) {
    throw new Error('Setting "scopes" cannot be undefined');
  }

  // Request token with given scopes
  const response = await _deviceCodeCredential.getToken(
    _settings?.graphUserScopes,
  );
  return response.token;
}

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

async function displayAccessTokenAsync() {
  try {
    const userToken = await graphHelper.getUserTokenAsync();
    console.log(`User token: ${userToken}`);
  } catch (err) {
    console.log(`Error getting user access token: ${err}`);
  }
}

Exécutez la commande suivante dans votre interface CLI à la racine de votre projet.
```
npx ts-node index.ts
```

Entrez 1 lorsque vous êtes invité à entrer une option. L’application affiche une URL et un code d’appareil.

TypeScript Graph Tutorial

[1] Display access token
[2] List my inbox
[3] Send mail
[4] Make a Graph call
[0] Exit

Select an option [1...4 / 0]: 1
To sign in, use a web browser to open the page https://microsoft.com/devicelogin and
enter the code RK987NX32 to authenticate.

Ouvrez un navigateur et accédez à l’URL affichée. Entrez le code fourni et connectez-vous.

Importante

Gardez à l’esprit tous les comptes Microsoft 365 existants qui sont connectés à votre navigateur lorsque vous accédez à https://microsoft.com/devicelogin. Utilisez les fonctionnalités du navigateur telles que les profils, le mode invité ou le mode privé pour vous assurer que vous vous authentifiez en tant que compte que vous envisagez d’utiliser pour les tests.
Une fois terminé, revenez à l’application pour voir le jeton d’accès.

Conseil

À des fins de validation et de débogage uniquement, vous pouvez décoder les jetons d’accès utilisateur (pour les comptes professionnels ou scolaires uniquement) à l’aide de l’analyseur de jetons en ligne de Microsoft à l’adresse https://jwt.ms. L’analyse de votre jeton 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 scp jeton contient les étendues d’autorisation Microsoft Graph attendues.

Obtenir un utilisateur

Maintenant que l’authentification est configurée, vous pouvez effectuer votre premier appel microsoft API Graph. Ajoutez du code pour obtenir le nom et l’adresse e-mail de l’utilisateur authentifié.

Ouvrez graphHelper.ts et ajoutez la fonction suivante.

export async function getUserAsync(): Promise<User> {
  // Ensure client isn't undefined
  if (!_userClient) {
    throw new Error('Graph has not been initialized for user auth');
  }

  // Only request specific properties with .select()
  return _userClient
    .api('/me')
    .select(['displayName', 'mail', 'userPrincipalName'])
    .get();
}

Remplacez la fonction vide greetUserAsync dans index.ts par ce qui suit.

async function greetUserAsync() {
  try {
    const user = await graphHelper.getUserAsync();
    console.log(`Hello, ${user?.displayName}!`);
    // For Work/school accounts, email is in mail property
    // Personal accounts, email is in userPrincipalName
    console.log(`Email: ${user?.mail ?? user?.userPrincipalName ?? ''}`);
  } catch (err) {
    console.log(`Error getting user: ${err}`);
  }
}

Si vous exécutez l’application maintenant, une fois que vous vous êtes connecté, l’application vous accueille par son nom.

Hello, Megan Bowen!
Email: MeganB@contoso.com

Explication du code

Considérez le code dans la getUserAsync fonction . Il ne s’agit que de quelques lignes, mais il y a quelques détails clés à noter.

Accès à « moi »

La fonction passe /me au générateur de _userClient.api requêtes, qui génère une requête à l’API Get user . Cette API est accessible de deux façons :

GET /me
GET /users/{user-id}

Dans ce cas, le code appelle le point de terminaison d’API GET /me . Ce point de terminaison est une méthode de raccourci permettant d’obtenir l’utilisateur authentifié sans connaître son ID d’utilisateur.

Remarque

Étant donné que le GET /me point de terminaison d’API obtient l’utilisateur authentifié, il est disponible uniquement pour les applications qui utilisent l’authentification utilisateur. Les applications d’authentification d’application uniquement ne peuvent pas accéder à ce point de terminaison.

Demande de propriétés spécifiques

La fonction utilise la select méthode sur la requête pour spécifier le jeu de propriétés dont elle a besoin. Cette méthode ajoute le paramètre de requête $select à l’appel d’API.

Type de retour fortement typé

La fonction retourne un User objet désérialisé à partir de la réponse JSON de l’API. Étant donné que le code utilise select, seules les propriétés demandées ont des valeurs dans l’objet retourné User . Toutes les autres propriétés ont des valeurs par défaut.

Étape suivante

Lire et envoyer des e-mails

Partager via

Ajouter l’authentification utilisateur aux applications TypeScript pour Microsoft Graph