Organisationsdata: Skapa en Appregistrering för Microsoft Entra-ID

Förbättra användarproduktiviteten genom att integrera organisationsdata (e-post, filer, chattar och kalenderhändelser) direkt i dina anpassade program. Genom att använda Microsoft Graph-API:er och Microsoft Entra-ID kan du smidigt hämta och visa relevanta data i dina appar, vilket minskar användarnas behov av att byta kontext. Oavsett om det handlar om att referera till ett e-postmeddelande som skickas till en kund, granska ett Teams-meddelande eller komma åt en fil kan användarna snabbt hitta den information de behöver utan att lämna din app, vilket effektiviserar deras beslutsprocess.

I den här övningen ska du:

• Skapa en Microsoft Entra ID-appregistrering så att Microsoft Graph kan komma åt organisationsdata och föra in dem i appen.
• Leta upp team och channel ID:n från Microsoft Teams som behövs för att skicka chattmeddelanden till en specifik kanal.
• Uppdatera projektets .env-fil med värden från din Microsoft Entra ID-appregistrering.

Skapa en Appregistrering för Microsoft Entra-ID

1. Gå till Azure-portalen och välj Microsoft Entra-ID.

2. Välj Hantera -->Appregistreringar följt av + Ny registrering.

3. Fyll i information om det nya appregistreringsformuläret enligt nedan och välj Registrera:

   • Namn: microsoft-graph-app
   • Kontotyper som stöds: Konton i valfri organisationskatalog (Alla Microsoft Entra-ID-klientorganisationer – multitenant)
   • Omdirigerings-URI:
     • Välj Ensidesprogram (SPA) och ange http://localhost:4200 i fältet Omdirigerings-URI .
   • Välj Registrera för att skapa appregistreringen.

   

1. Välj Översikt på resursmenyn och kopiera Application (client) ID värdet till Urklipp.

   

Uppdatera projektets .env-fil

1. Öppna .env-filen i redigeringsprogrammet och tilldela Application (client) ID värdet till ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Om du vill aktivera möjligheten att skicka ett meddelande från appen till en Teams-kanal loggar du in på Microsoft Teams med ditt Microsoft 365 dev-klientkonto (detta nämns i förhandsreplikerna för självstudien).

3. När du har loggat in expanderar du ett team och hittar en kanal som du vill skicka meddelanden till från appen. Du kan till exempel välja företagsteamet och kanalen Allmänt (eller vilket team/kanal du vill använda).

   

4. I teamrubriken klickar du på de tre punkterna (...) och väljer Hämta länk till teamet.

5. I länken som visas i popup-fönstret är team-ID:t strängen med bokstäver och siffror efter team/. I länken "https://teams.microsoft.com/l/team/19%3ae9b9.../"är till exempel team-ID :t 19%3ae9b9... upp till följande / tecken.

6. Kopiera team-ID:t och tilldela det till TEAM_ID i .env-filen .

7. I kanalrubriken klickar du på de tre punkterna (...) och väljer Hämta länk till kanal.

8. I länken som visas i popup-fönstret är kanal-ID:t strängen med bokstäver och siffror efter channel/. I länken "https://teams.microsoft.com/l/channel/19%3aQK02.../"är kanal-ID :t till exempel 19%3aQK02... upp till följande / tecken.

9. Kopiera kanal-ID:t och tilldela det till CHANNEL_ID i .env-filen .

10. Spara env-filen innan du fortsätter.

Starta/starta om programmet och API-servrarna

Utför något av följande steg baserat på de övningar som du har slutfört fram till den här punkten:

• Om du startade databasen, API-servern och webbservern i en tidigare övning måste du stoppa API-servern och webbservern och starta om dem för att hämta filändringarna i .env . Du kan låta databasen köras.

  Leta upp terminalfönstren som kör API-servern och webbservern och tryck på CTRL + C för att stoppa dem. Starta dem igen genom att npm start skriva i varje terminalfönster och trycka på Retur. Fortsätt till nästa övning.

• Om du inte har startat databasen, API-servern och webbservern ännu utför du följande steg:

  1. I följande steg skapar du tre terminalfönster i Visual Studio Code.

     

  2. Högerklicka på .env-filen i Visual Studio Code-fillistan och välj Öppna i integrerad terminal. Kontrollera att terminalen finns i roten av projektet – openai-acs-msgraph – innan du fortsätter.

  3. Välj något av följande alternativ för att starta PostgreSQL-databasen:

     • Om du har Docker Desktop installerat och körs kör du docker-compose up i terminalfönstret och trycker på Retur.

     • Om du har Podman med podman-compose installerat och körs kör podman-compose up du i terminalfönstret och trycker på Retur.

     • Kör följande kommando i terminalfönstret om du vill köra PostgreSQL-containern direkt med antingen Docker Desktop, Podman, nerdctl eller någon annan containerkörning som du har installerat:

       • Mac, Linux eller Windows-undersystem för 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 med 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. När databascontainern startar trycker du på + ikonen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett andra terminalfönster.

     

  5. cd i mappen server/typescript och kör följande kommandon för att installera beroendena och starta API-servern.

     • npm install
     • npm start

  6. Tryck på + ikonen igen i verktygsfältet i Visual Studio Code-terminalen för att skapa ett tredje terminalfönster.

  7. cdi klientmappen och kör följande kommandon för att installera beroendena och starta webbservern.

     • npm install
     • npm start

  8. En webbläsare startas och du tas till http://localhost:4200.

     

Nästa steg

Organisationsdata: Logga in en användare och hämta en åtkomsttoken