Données organisationnelles : enregistrement d'application Microsoft Entra ID

Améliorez la productivité des utilisateurs en intégrant des données organisationnelles (e-mails, fichiers, conversations et événements de calendrier) directement dans vos applications personnalisées. À l’aide des API Microsoft Graph et de l’ID Microsoft Entra, vous pouvez récupérer et afficher en toute transparence les données pertinentes dans vos applications, ce qui réduit la nécessité pour les utilisateurs de changer de contexte. Qu’il référence un e-mail envoyé à un client, examine un message Teams ou accède à un fichier, les utilisateurs peuvent rapidement trouver les informations dont ils ont besoin sans quitter votre application, en rationalisant leur processus décisionnel.

Dans cet exercice, vous allez :

• Créez une inscription d’application Microsoft Entra ID afin que Microsoft Graph puisse accéder aux données organisationnelles et les intégrer à l’application.
• Recherchez team et channel ID de Microsoft Teams nécessaires pour envoyer des messages de conversation à un canal spécifique.
• Mettez à jour le fichier .env du projet avec les valeurs de votre inscription d’application Microsoft Entra ID.

Créer une inscription d’application d’ID Microsoft Entra

1. Accédez au portail Azure et sélectionnez Microsoft Entra ID.

2. Sélectionnez Gérer les> --App suivies de + Nouvelle inscription.

3. Renseignez les détails du nouveau formulaire d’inscription d’application, comme indiqué ci-dessous, puis sélectionnez Inscrire :

   • Nom : microsoft-graph-app
   • Types de comptes pris en charge : Comptes dans n’importe quel annuaire organisationnel (n’importe quel locataire Microsoft Entra ID - Multilocataire)
   • URI de redirection :
     • Sélectionnez application monopage (SPA) et entrez http://localhost:4200 le champ URI de redirection .
   • Sélectionnez Inscrire pour créer l’inscription de l’application.

   

1. Sélectionnez Vue d’ensemble dans le menu de ressources et copiez la Application (client) ID valeur dans votre Presse-papiers.

   

Mettre à jour le fichier .env du projet

1. Ouvrez le fichier .env dans votre éditeur et affectez la Application (client) ID valeur à ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Si vous souhaitez activer la possibilité d’envoyer un message de l’application dans un canal Teams, connectez-vous à Microsoft Teams à l’aide de votre compte de locataire de développement Microsoft 365 (cela est mentionné dans les questions préalables pour le didacticiel).

3. Une fois connecté, développez une équipe et recherchez un canal vers lequel vous souhaitez envoyer des messages à partir de l’application. Par exemple, vous pouvez sélectionner l’équipe d’entreprise et le canal Général (ou toute équipe/canal que vous souhaitez utiliser).

   

4. Dans l’en-tête de l’équipe, cliquez sur les trois points (...) et sélectionnez Obtenir le lien vers l’équipe.

5. Dans le lien qui apparaît dans la fenêtre contextuelle, l’ID d’équipe est la chaîne de lettres et de chiffres après team/. Par exemple, dans le lien «https://teams.microsoft.com/l/team/19%3ae9b9.../" ;, l’ID d’équipe est 19%3ae9b9... jusqu’au caractère suivant / .

6. Copiez l’ID d’équipe et affectez-le TEAM_ID dans le fichier .env .

7. Dans l’en-tête du canal, cliquez sur les trois points (...) et sélectionnez Obtenir le lien vers le canal.

8. Dans le lien qui apparaît dans la fenêtre contextuelle, l’ID de canal est la chaîne de lettres et de chiffres après channel/. Par exemple, dans le lien «https://teams.microsoft.com/l/channel/19%3aQK02.../" ;, l’ID de canal est 19%3aQK02... jusqu’au caractère suivant / .

9. Copiez l’ID de canal et affectez-le CHANNEL_ID dans le fichier .env .

10. Enregistrez le fichier env avant de continuer.

Démarrer/redémarrer les serveurs d’applications et d’API

Effectuez l’une des étapes suivantes en fonction des exercices que vous avez effectués jusqu’à ce stade :

• Si vous avez démarré la base de données, le serveur API et le serveur web dans un exercice précédent, vous devez arrêter le serveur d’API et le serveur web et les redémarrer pour récupérer les modifications apportées au fichier .env . Vous pouvez laisser la base de données en cours d’exécution.

  Recherchez les fenêtres de terminal exécutant le serveur d’API et le serveur web, puis appuyez sur Ctrl + C pour les arrêter. Recommencez-les en tapant npm start dans chaque fenêtre de terminal et en appuyant sur Entrée. Passez à l’exercice suivant.

• Si vous n’avez pas encore démarré la base de données, le serveur d’API et le serveur web, procédez comme suit :

  1. Dans les étapes suivantes, vous allez créer trois fenêtres de terminal dans Visual Studio Code.

     

  2. Cliquez avec le bouton droit sur le fichier .env dans la liste des fichiers Visual Studio Code, puis sélectionnez Ouvrir dans le terminal intégré. Assurez-vous que votre terminal est à la racine du projet - openai-acs-msgraph - avant de continuer.

  3. Choisissez l’une des options suivantes pour démarrer la base de données PostgreSQL :

     • Si Docker Desktop est installé et en cours d’exécution, exécutez docker-compose up la fenêtre du terminal, puis appuyez sur Entrée.

     • Si Podman avec podman-compose est installé et en cours d’exécution, exécutez podman-compose up dans la fenêtre de terminal, puis appuyez sur Entrée.

     • Pour exécuter le conteneur PostgreSQL directement à l’aide de Docker Desktop, Podman, nerdctl ou un autre runtime de conteneur que vous avez installé, exécutez la commande suivante dans la fenêtre de terminal :

       • Mac, Linux ou Sous-système Windows pour Linux (WSL) :

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows avec PowerShell :

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Une fois le conteneur de base de données démarré, appuyez sur l’icône + dans la barre d’outils du terminal Visual Studio Code pour créer une deuxième fenêtre de terminal.

     

  5. cd dans le dossier serveur/typescript et exécutez les commandes suivantes pour installer les dépendances et démarrer le serveur d’API.

     • npm install
     • npm start

  6. Appuyez de nouveau sur l’icône + dans la barre d’outils du terminal Visual Studio Code pour créer une troisième fenêtre de terminal.

  7. cd dans le dossier client et exécutez les commandes suivantes pour installer les dépendances et démarrer le serveur web.

     • npm install
     • npm start

  8. Un navigateur s’ouvre et vous serez redirigé vers http://localhost:4200.

     

Étape suivante

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