Partager via

Tester une application web côté client JavaScript qui appelle Microsoft Graph

Dans ce tutoriel, vous allez apprendre à utiliser le proxy de développement pour tester un exemple d’application web côté client JavaScript qui appelle Microsoft Graph.

Conditions préalables

Cette partie du didacticiel suppose que vous avez installé et configuré le proxy de développement sur votre ordinateur. Si ce n’est pas encore fait, prenez le temps de le faire maintenant.

Pour suivre ce tutoriel, vous avez besoin des éléments suivants :

  • Abonné Microsoft 365.
  • Compte disposant des autorisations nécessaires pour créer des inscriptions d’applications Microsoft Entra.
  • Git (consultez le guide de configuration de Git de GitHub ).
  • nodejs LTS.

Conseil

Nous vous recommandons d’utiliser un locataire Microsoft 365 Developer avec des packs de contenu installés. Obtenez votre abonné gratuit en vous inscrivant au programme développeur Microsoft 365.

Cloner et configurer l’exemple d’application

  • Téléchargez l’exemple d’application
  • Suivez les instructions pour configurer l’application.

Démarrer le proxy de développement

Le proxy de développement est fourni avec une configuration prédéfinie pour tester les applications qui envoient des demandes aux API Microsoft Graph et SharePoint Online.

  • Ouvrez une invite de commandes, entrez devproxy --config-file "~appFolder/config/m365.json", puis appuyez sur . Appuyez sur pour démarrer le proxy de développement avec la configuration de Microsoft 365.

Lancer l’exemple d’application

  • Ouvrez une invite de commandes et accédez au répertoire samples.
  • Entrez npx lite-server et appuyez sur Entrée pour démarrer l’exemple de serveur web d’application.

Capture d’écran de l’exemple d’application en cours d’exécution dans le navigateur Microsoft Edge sur macOS. L’application affiche un grand logo Microsoft avec deux boutons en dessous. Bouton principal avec le texte « With SDK » et un bouton secondaire avec le texte « Without SDK ».

Tester l’exemple d’application

  1. Dans l’application en cours d’exécution, sélectionnez le bouton Without SDK.

Attention

Si vous avez une page vide après avoir cliqué sur le bouton Without SDK, vérifiez que vous avez configuré pour l'enregistrement de l'application Azure AD. Le problème se produit lorsque le fichier .env contenant la Client ID de l’inscription de votre application est manquant.

  1. Sélectionnez le bouton Login et terminez le processus de connexion.

Capture d’écran de l’exemple d’application en cours d’exécution dans le navigateur Microsoft Edge sur Windows 11. L’application affiche un grand logo Microsoft avec deux boutons en dessous. Bouton principal avec le texte « Connexion » et un bouton secondaire avec le texte « Précédent ».

Le proxy de développement introduit des erreurs dans votre application en interceptant les demandes adressées à Microsoft Graph. Il utilise une probabilité de 50 % pour les requêtes ayant échoué avec un code de statut d’erreur HTTP pris en charge aléatoire.

Affichez la sortie du proxy et prenez un moment pour actualiser l’exemple d’application. Découvrez comment l’exemple d’application gère (ou non, dans ce cas) les échecs introduits par le proxy.

Capture d’écran de l’exemple d’application en cours d’exécution dans Microsoft Edge. Les avatars utilisateur ne sont pas affichés dans l’application. Les outils de développement Microsoft Edge sont ouverts sur le côté avec des erreurs affichées dans le journal de la console.

  1. Appuyez sur Ctrl + C pour arrêter le proxy de développement.

Étape suivante

Explorer les guides pratiques

  • Last updated on