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

2025-06-13

Gli utenti devono eseguire l'autenticazione con Microsoft Entra ID per consentire a Microsoft Graph di accedere ai dati aziendali. In questo esercizio si vedrà come usare il componente di mgt-login Microsoft Graph Toolkit per autenticare gli utenti e recuperare un token di accesso. Il token di accesso può quindi essere usato per effettuare chiamate a Microsoft Graph.

Annotazioni

Se non si ha familiarità con Microsoft Graph, è possibile ottenere altre informazioni nel percorso di apprendimento Nozioni fondamentali su Microsoft Graph .

In questo esercizio si eseguiranno le seguenti operazioni:

Informazioni su come associare un'app Microsoft Entra ID a Microsoft Graph Toolkit per autenticare gli utenti e recuperare i dati dell'organizzazione.
Informazioni sull'importanza degli ambiti.
Informazioni su come usare il componente mgt-login di Microsoft Graph Toolkit per autenticare gli utenti e recuperare un token di accesso.

Nell'esercizio precedente è stata creata una registrazione dell'app in Microsoft Entra ID e si è avviato il server applicazioni e il server API. Sono stati aggiornati anche i valori seguenti nel .env file (TEAM_ID e CHANNEL_ID sono facoltativi):
```
ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
TEAM_ID=<TEAMS_TEAM_ID>
CHANNEL_ID=<TEAMS_CHANNEL_ID>
```
Assicurarsi di aver completato l'esercizio precedente prima di continuare.
Tornare al browser (http://localhost:4200), selezionare Accedi nell'intestazione e accedere usando un account utente amministratore dal tenant di Microsoft 365 Developer.

Suggerimento

Accedere con l'account amministratore del tenant per sviluppatori di Microsoft 365. È possibile visualizzare altri utenti nel tenant dello sviluppatore passando all'interfaccia di amministrazione di Microsoft 365.
Se si accede all'applicazione per la prima volta, verrà richiesto di fornire il consenso alle autorizzazioni richieste dall'applicazione. Verranno fornite altre informazioni su queste autorizzazioni (denominate anche "ambiti") nella sezione successiva durante l'esplorazione del codice. Selezionare Accetta per continuare.
Dopo aver eseguito l'accesso, verrà visualizzato il nome dell'utente visualizzato nell'intestazione.

Dopo aver eseguito l'accesso, esaminare il codice usato per accedere all'utente e recuperare un token di accesso e un profilo utente. Verranno fornite informazioni sul componente Web mgt-login che fa parte di Microsoft Graph Toolkit.

Suggerimento

Se si usa Visual Studio Code, è possibile aprire direttamente i file selezionando:

Windows/Linux: CTRL+P
Mac: Cmd + P

Digitare quindi il nome del file che si desidera aprire.

Aprire client/package.json e notare che i @microsoft/mgt pacchetti e @microsoft/mgt-components sono inclusi nelle dipendenze. Il @microsoft/mgt pacchetto contiene funzionalità del provider MSAL (Microsoft Authentication Library) e componenti Web, ad esempio mgt-login e altri che possono essere usati per accedere agli utenti e recuperare e visualizzare i dati dell'organizzazione.
Aprire client/src/main.ts e notare le importazioni seguenti dal @microsoft/mgt-components pacchetto. I simboli importati vengono usati per registrare i componenti di Microsoft Graph Toolkit usati nell'applicazione.
```
import { registerMgtLoginComponent, registerMgtSearchResultsComponent, registerMgtPersonComponent,  } from '@microsoft/mgt-components';
```
Scorrere fino alla fine del file e prendere nota del codice seguente:
```
registerMgtLoginComponent();
registerMgtSearchResultsComponent();
registerMgtPersonComponent();
```
Questo codice registra i mgt-logincomponenti Web , mgt-search-resultse mgt-person e li abilita per l'uso nell'applicazione.
Per usare il componente mgt-login per accedere agli utenti, è necessario fare riferimento e usare l'ID client dell'app Microsoft Entra ID (archiviato nel file con estensione env come ENTRAID_CLIENT_ID).
Aprire graph.service.ts e individuare la init() funzione. Il percorso completo del file è client/src/app/core/graph.service.ts. Verranno visualizzati l'importazione e il codice seguenti:
```
import { Msal2Provider, Providers, ProviderState } from '@microsoft/mgt';

init() {
    if (!this.featureFlags.microsoft365Enabled) return;

    if (!Providers.globalProvider) {
        console.log('Initializing Microsoft Graph global provider...');
        Providers.globalProvider = new Msal2Provider({
            clientId: ENTRAID_CLIENT_ID,
            scopes: ['User.Read', 'Presence.Read', 'Chat.ReadWrite', 'Calendars.Read', 
                    'ChannelMessage.Read.All', 'ChannelMessage.Send', 'Files.Read.All', 'Mail.Read']
        });
    }
    else {
        console.log('Global provider already initialized');
    }
}
```
Questo codice crea un nuovo Msal2Provider oggetto, passando l'ID client Microsoft Entra ID dalla registrazione dell'app e l'oggetto scopes per cui l'app richiederà l'accesso. Vengono scopes usati per richiedere l'accesso alle risorse di Microsoft Graph a cui l'app accederà. Dopo aver creato l'oggetto Msal2Provider , viene assegnato all'oggetto Providers.globalProvider , che viene usato dai componenti di Microsoft Graph Toolkit per recuperare i dati da Microsoft Graph.
Aprire header.component.html nell'editor e individuare il componente mgt-login . Il percorso completo del file è client/src/app/header/header.component.html.
```
@if (this.featureFlags.microsoft365Enabled) {
    <mgt-login class="mgt-dark" (loginCompleted)="loginCompleted()"></mgt-login>
}
```
Il componente mgt-login abilita l'accesso dell'utente e fornisce l'accesso a un token usato con Microsoft Graph. Al termine dell'accesso, viene attivato l'evento loginCompleted , che chiama la loginCompleted() funzione . Anche se mgt-login viene usato all'interno di un componente Angular in questo esempio, è compatibile con qualsiasi applicazione Web.

La visualizzazione del componente mgt-login dipende dal valore impostato su featureFlags.microsoft365Enabledtrue. Questo flag personalizzato verifica la presenza della variabile di ENTRAID_CLIENT_ID ambiente per verificare che l'applicazione sia configurata correttamente e in grado di eseguire l'autenticazione con Microsoft Entra ID. Il flag viene aggiunto per soddisfare i casi in cui gli utenti scelgono di completare solo gli esercizi di intelligenza artificiale o comunicazione all'interno dell'esercitazione, anziché seguire l'intera sequenza di esercizi.
Aprire header.component.ts e individuare la loginCompleted funzione. Questa funzione viene chiamata quando l'evento loginCompleted viene generato e gestisce il recupero del profilo dell'utente connesso tramite Providers.globalProvider.
```
async loginCompleted() {
    const me = await Providers.globalProvider.graph.client.api('me').get();
    this.userLoggedIn.emit(me);
}
```
In questo esempio viene effettuata una chiamata all'API Microsoft Graph me per recuperare il profilo dell'utente (me rappresenta l'utente connesso corrente). L'istruzione this.userLoggedIn.emit(me) di codice genera un evento dal componente per passare i dati del profilo al componente padre. Il componente padre è app.component.ts file in questo caso, ovvero il componente radice per l'applicazione.

Per altre informazioni sul componente mgt-login , visitare la documentazione di Microsoft Graph Toolkit .
Dopo aver eseguito l'accesso all'applicazione, si esaminerà il modo in cui è possibile recuperare i dati dell'organizzazione.

Passaggio successivo

Dati dell'organizzazione: recupero di file, chat e invio di messaggi a Teams

Condividi tramite

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

Uso della funzionalità di accesso

Esplorazione del codice di accesso

Passaggio successivo

Commenti e suggerimenti

Risorse aggiuntive