Dati dell'organizzazione: creazione di una registrazione dell'app Microsoft Entra ID

Migliorare la produttività degli utenti integrando i dati dell'organizzazione (messaggi di posta elettronica, file, chat ed eventi del calendario) direttamente nelle applicazioni personalizzate. Usando le API Microsoft Graph e l'ID Microsoft Entra, è possibile recuperare e visualizzare facilmente i dati pertinenti all'interno delle app, riducendo la necessità per gli utenti di cambiare contesto. Che faccia riferimento a un messaggio di posta elettronica inviato a un cliente, riveda un messaggio di Teams o acceda a un file, gli utenti possono trovare rapidamente le informazioni necessarie senza uscire dall'app, semplificando il processo decisionale.

In questo esercizio si eseguiranno le seguenti operazioni:

• Creare una registrazione dell'app Microsoft Entra ID in modo che Microsoft Graph possa accedere ai dati dell'organizzazione e inserirla nell'app.
• Individuare team gli ID e channel da Microsoft Teams necessari per inviare messaggi di chat a un canale specifico.
• Aggiornare il file con estensione env del progetto con i valori della registrazione dell'app Microsoft Entra ID.

Creare una registrazione dell'app Microsoft Entra ID

1. Passare al portale di Azure e selezionare Microsoft Entra ID.

2. Selezionare Gestisci -->Registrazioni app e + Nuova registrazione.

3. Compilare i dettagli del modulo di registrazione dell'app come illustrato di seguito e selezionare Registra:

   • Nome: microsoft-graph-app
   • Tipi di account supportati: account in qualsiasi directory organizzativa (qualsiasi tenant di Microsoft Entra ID - Multi-tenant)
   • URI di reindirizzamento:
     • Selezionare Applicazione a pagina singola (SPA) e immettere http://localhost:4200 nel campo URI di reindirizzamento .
   • Selezionare Registra per creare la registrazione dell'app.

   

1. Selezionare Panoramica nel menu delle risorse e copiare il Application (client) ID valore negli Appunti.

   

Aggiornare il file con estensione env del progetto

1. Aprire il file con estensione env nell'editor e assegnare il Application (client) ID valore a ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Se si vuole abilitare la possibilità di inviare un messaggio dall'app a un canale di Teams, accedere a Microsoft Teams usando l'account del tenant di sviluppo di Microsoft 365 (questo è indicato nelle domande preliminari per l'esercitazione).

3. Dopo aver eseguito l'accesso, espandere un team e trovare un canale a cui inviare messaggi dall'app. Ad esempio, è possibile selezionare il team aziendale e il canale Generale (o qualsiasi team/canale che si vuole usare).

   

4. Nell'intestazione del team fare clic sui tre puntini (...) e selezionare Ottieni collegamento al team.

5. Nel collegamento visualizzato nella finestra popup, l'ID del team è la stringa di lettere e numeri dopo team/. Ad esempio, nel collegamento "https://teams.microsoft.com/l/team/19%3ae9b9.../", l'ID del team è 19%3ae9b9... fino al carattere seguente / .

6. Copiare l'ID team e assegnarlo a TEAM_ID nel file con estensione env .

7. Nell'intestazione del canale fare clic sui tre puntini (...) e selezionare Recupera collegamento al canale.

8. Nel collegamento visualizzato nella finestra popup, l'ID canale è la stringa di lettere e numeri dopo channel/. Ad esempio, nel collegamento "https://teams.microsoft.com/l/channel/19%3aQK02.../", l'ID del canale è 19%3aQK02... fino al carattere seguente / .

9. Copiare l'ID canale e assegnarlo a CHANNEL_ID nel file con estensione env .

10. Salvare il file env prima di continuare.

Avviare/riavviare le applicazioni e i server API

Eseguire uno dei passaggi seguenti in base agli esercizi completati fino a questo punto:

• Se il database, il server API e il server Web sono stati avviati in un esercizio precedente, è necessario arrestare il server API e il server Web e riavviarli per selezionare le modifiche apportate al file con estensione env . È possibile lasciare in esecuzione il database.

  Individuare le finestre del terminale che eseguono il server API e il server Web e premere CTRL+C per arrestarli. Avviarli di nuovo digitando npm start in ogni finestra del terminale e premendo INVIO. Continuare con l'esercizio successivo.

• Se il database, il server API e il server Web non sono ancora stati avviati, completare i passaggi seguenti:

  1. Nei passaggi seguenti verranno create tre finestre del terminale in Visual Studio Code.

     

  2. Fare clic con il pulsante destro del mouse sul file con estensione env nell'elenco dei file di Visual Studio Code e scegliere Apri nel terminale integrato. Assicurarsi che il terminale si trova nella radice del progetto, openai-acs-msgraph , prima di continuare.

  3. Scegliere una delle opzioni seguenti per avviare il database PostgreSQL:

     • Se Docker Desktop è installato e in esecuzione, eseguire docker-compose up nella finestra del terminale e premere INVIO.

     • Se si dispone di Podman con podman-compose installato e in esecuzione, eseguire podman-compose up nella finestra del terminale e premere INVIO.

     • Per eseguire il contenitore PostgreSQL direttamente usando Docker Desktop, Podman, nerdctl o un altro runtime del contenitore installato, eseguire il comando seguente nella finestra del terminale:

       • Mac, Linux o sottosistema Windows per 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 con 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. Dopo l'avvio del contenitore di database, premere l'icona + nella barra degli strumenti del terminale di Visual Studio Code per creare una seconda finestra del terminale.

     

  5. cd nella cartella server/typescript ed eseguire i comandi seguenti per installare le dipendenze e avviare il server API.

     • npm install
     • npm start

  6. Premere di nuovo l'icona + nella barra degli strumenti del terminale di Visual Studio Code per creare una terza finestra del terminale.

  7. cd nella cartella client ed eseguire i comandi seguenti per installare le dipendenze e avviare il server Web.

     • npm install
     • npm start

  8. Verrà avviato un browser e si passerà a http://localhost:4200.

     

Passaggio successivo

Dati dell'organizzazione: accesso a un utente e recupero di un token di accesso