Esercizio - Accedere all'app utilizzando il componente di accesso di Microsoft Graph Toolkit

12 minuti

In questa unità verrà creata un’applicazione web e si esaminerà un progetto iniziale. Quindi, verrà usato il componente Login del toolkit per accedere all'applicazione e alle funzionalità di Microsoft Graph.

Installare Dev Proxy

Per completare questo esercizio, è necessario installare la versione più recente di Dev Proxy. Dev Proxy è uno strumento che simula le risposte api. Consente di compilare e testare l'applicazione senza bisogno di un tenant di Microsoft 365. Seguire le istruzioni introduttive e verificare che Dev Proxy sia in esecuzione prima di procedere.

Nota

Quando si usa Dev Proxy per completare questo esercizio, l'app usa dati statici simulati. Il codice scritto funziona con configurazioni di dati simulati e live. Per usare i dati in tempo reale da un tenant di Microsoft 365, è sufficiente creare una registrazione dell'app Microsoft Entra e aggiornare il riferimento all'ID client nell'app.

Scaricare il set di impostazioni di Dev Proxy

Per completare questo esercizio, è necessario scaricare il set di impostazioni di Dev Proxy per questo modulo. Il set di impostazioni contiene i dati fittizi e le risposte usate per compilare l'applicazione. Per scaricare il set di impostazioni, eseguire il comando seguente nel terminale:

devproxy preset get learn-msgraph-toolkit-intro

Configurare la struttura dell'app per l'app Web

Creare una nuova cartella per il progetto

Aprire Visual Studio Code. Selezionare File>Apri cartella dal menu dei comandi.
Quando si apre una cartella, nel sistema operativo c’è un pulsante per creare una Nuova cartella.
Passare alla posizione in cui si vuole creare la nuova cartella e fare clic su Nuova cartella. Denominare la cartella mgt-app.
Aprire la cartella mgt-app in Visual Studio Code.

Creare file e cartelle nella cartella del progetto

L'applicazione Web avrà un file HTML e una cartella per le impostazioni di Live Server. Live Server è un’estensione di Visual Studio Code. Verrà ora creata la struttura del progetto.

Selezionare File>Nuovo file.
Assegnare al file il nome index.htmle salvare il file usando CTRL+S (Windows) o COMANDO+S (macOS).

Aggiungere il seguente codice HTML in index.html e salvare il file.

<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </body>
</html>

Aggiungere una cartella denominata .vscode nella radice della cartella del progetto.
Aggiungere un file denominato settings.json nella cartella .vscode. Copiare e incollare il codice seguente in settings.json e salvare il file.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Queste impostazioni garantiscono l'esecuzione di test regolari dell'applicazione in locale, quando si usa Live Server.

Prima di iniziare ad aggiungere codice per usare il toolkit nell'applicazione Web, è necessario configurare un'applicazione Microsoft Entra.

Si useranno i dettagli dell'applicazione Microsoft Entra per autenticare l'applicazione usando il provider Microsoft Authentication Library (MSAL) v2.

Configurare un'applicazione Microsoft Entra

Nel browser passare all'interfaccia di amministrazione di Microsoft Entra, accedere e passare a Microsoft Entra ID.
Selezionare Registrazioni app nel riquadro a sinistra e selezionare Nuova registrazione.
Nella schermata Registra un'applicazione, immetti i valori seguenti:
- In Nome: immetti un nome per l'applicazione.
- Tipi di account supportati: selezionare Account in qualsiasi directory organizzativa (Qualsiasi directory di Microsoft Entra - Multitenant) e account Microsoft personali (ad esempio Skype, Xbox).
- URI di reindirizzamento (facoltativo): seleziona Applicazione a pagina singola (SPA) e premi http://localhost:3000.
- Selezionare Registra.

Ora che l'applicazione è stata configurata correttamente, è il momento di aggiungere qualche codice!

Aggiungere Microsoft Graph Toolkit al progetto

Come visto in precedenza, è possibile fare riferimento al toolkit direttamente dalla rete per la distribuzione di contenuti. A tale scopo, aggiungere il frammento di codice seguente poco prima del </head> tag nel tuo file index.html.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Inizializzare il provider MSAL v2

Per autenticare l'applicazione, inizializzare il provider MSAL v2 usando l'ID applicazione (client) salvato nella sezione precedente.

Aggiungere il frammento di codice seguente nel <body> del file index.html.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Sostituire YOUR-CLIENT-ID con l'ID applicazione (client) salvato nella sezione precedente.

Per autenticare l'applicazione, inizializzare il provider MSAL v2 usando f601c4cb-6902-4675-8415-7db28a4a332d come ID applicazione. Dev Proxy simula il processo di autenticazione per questa registrazione fittizia dell'app.

Aggiungere il frammento di codice seguente nel <body> del file index.html.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Per aggiungere il componente di accesso, inserire l'elemento seguente nel corpo del file index.html.

<mgt-login></mgt-login>

Dopo tutte le modifiche, il file index.html dovrebbe essere simile al seguente:

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Ora basta salvare il file e testare i risultati!

Test dell'app nel browser

Avviare Dev Proxy

Iniziare avviando Dev Proxy. In un terminale eseguire il comando seguente:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Mantenere aperto il terminale ed eseguire Dev Proxy durante il test dell'applicazione.

Avviare l'applicazione

Per testare l'applicazione in un browser, è necessario aver installato Visual Studio Code Live Server.

Per eseguire l'applicazione in Live Server, premere la combinazione di tasti seguente in Visual Studio Code e cercare Live Server:

Windows: CTRL+MAIUSC+P
macOS: COMANDO+MAIUSC+P

Aprire con Live Server, selezionare l'opzione e premere INVIO.

Quando Live Server è in esecuzione potrebbe aprire la paginahttp://localhost:3000/index.html. Aprirehttp://localhost:3000 nel browser.

Selezionare Accedi, Dev Proxy simula il processo di autenticazione e l'applicazione visualizzerà le informazioni di accesso fittizio.

Selezionare Accedi e inserire l’account del tenant per sviluppatori di Microsoft 365. La prima volta verrà chiesto di fornire il consenso per le autorizzazioni necessarie. Dopo aver dato il consenso, l'applicazione visualizza le informazioni di accesso.

Screenshot che mostra i risultati finali dell'applicazione dopo l'accesso dell'utente.

Ora è stato realizzato un meccanismo di autenticazione per accedere ai dati di Microsoft 365.