Esercizio - Usare Microsoft Graph nella propria applicazione web per recuperare la foto del profilo di un utente

10 minuti

Sono stati illustrati tutti i concetti necessari per accedere al profilo di un utente usando Microsoft Graph. Ora è il momento di creare un'applicazione del cliente in grado di recuperare e visualizzare la foto di un venditore connesso.

Per completare correttamente questa unità, è necessario un account utente (ad esempio, dal tenant per sviluppatori Microsoft 365) con un'immagine del profilo disponibile per l'uso nell'applicazione.

Configurare l'app

In questo esercizio si accederà a un repository GitHub, si aggiungeranno ID Microsoft Entra nell'app e si aggiungerà codice per accedere a una foto usando Microsoft Graph. Se non è ancora stata creata una registrazione dell'app Microsoft Entra, completare il modulo dei prerequisiti prima di continuare.

Per ottenere il codice iniziale dell'app usato in questo esercizio, scegliere una delle opzioni seguenti:

Se si usa Git, clonare il progetto usando il comando Git Clone:
```
git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
```
Se non si usa Git, passare a https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart nel Web browser. Selezionare il pulsante Code (Codice) e quindi scegliere Download ZIP (Scarica ZIP). Estrarre il file con estensione zip nel computer.
Aprire la cartella nell'editor di codice.
L'applicazione contiene i file seguenti:
- index.html: definisce l'interfaccia visualizzata a un utente quando accede al sito Web. Carica lo script Microsoft Authentication Library (MSAL) e gli script dell'applicazione personalizzati, consente a un utente di accedere e visualizza il nome dell'utente dopo l'accesso.
- auth.js: definisce la configurazione MSAL per associare l'applicazione all'ID Microsoft Entra, accede a un utente all'applicazione e gestisce il recupero di un token di accesso utilizzabile da Microsoft Graph.
- graph.js: chiama Microsoft 365 per accedere al profilo di /me connesso. Si basa su auth.js per recuperare il token di accesso usato per la chiamata API di Microsoft Graph.
- ui.js: gestisce gli elementi dell'interfaccia utente definiti in index.html.
Aprire il file auth.js e trovare la costante msalConfig:
```
const msalConfig = {
  auth: { .. }
}
```
Sostituire il valore della clientId proprietà con il valore dell'ID applicazione (client) copiato dall'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).
Nello stesso fileauth.js trovare la msalConfig.auth.authority proprietà . Sostituire il <your directory ID here> valore con il valore ID directory (tenant) dell'applicazione Microsoft Entra (spa-aad-app) registrata in precedenza. È possibile ottenere questo valore dalla pagina di panoramica dell'applicazione Microsoft Entra (spa-aad-app).

La msalConfig costante dovrebbe essere simile al codice seguente, con gli ID univoci del tenant di Microsoft Entra e dell'applicazione registrata:
```
const msalConfig = {
  auth: {
    clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
    authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
    redirectUri: 'http://localhost:8080'
  }
};
```

Aprire il file index.html. Individuare la riga <h4>Welcome <span id="userName"></span></h4> e aggiungere il codice seguente subito dopo:

<div>
  <button id="showProfilePhoto" style="display:none" onclick="displayProfilePhoto();">Show profile picture</button>
</div>
<img id="userPhoto" class="user" alt="User photo" style="display: none;" />

Nello stesso file index.html, trovare il tag <head>. Aggiungere il codice seguente per applicare uno stile all'elemento immagine aggiunto nel passaggio precedente:
```
<style>
.user {
  border-radius: 50%;
  border-style: solid;
  border-width: 5px;
  height: 150px;
  width: 150px;
}
</style>
```
Salvare il file index.html.
Aprire il file graph.js. Aggiungere una nuova funzione denominata getUserPhoto() nel file, come illustrato nel codice seguente. Con questa funzione si ottiene la foto dell'utente connesso usando l'endpoint dell'API /me/photo/$value di Microsoft Graph.
```
async function getUserPhoto() {
   ensureScope('user.read');
    return await graphClient
        .api('/me/photo/$value')
        .get();
}
```
Salvare il file graph.js.

Aprire il file ui.js e aggiungere una nuova funzione denominata displayProfilePhoto() nel file, come illustrato nel codice seguente. Questa funzione visualizzerà la risposta dell'immagine ricevuta da Microsoft Graph nell'elemento immagine creato in precedenza.

async function displayProfilePhoto() {
  const userPhoto = await getUserPhoto();
  if (!userPhoto) {
      return;
  }

  //convert blob to a local URL
  const urlObject = URL.createObjectURL(userPhoto);
  // show user photo
  const userPhotoElement = document.getElementById('userPhoto');
  userPhotoElement.src = urlObject;
  var showPhotoButton= document.getElementById('showProfilePhoto');
  showPhotoButton.style = "display: none";
  var imgPhoto= document.getElementById('userPhoto');
  imgPhoto.style = "display: block";
}

Aprire il file ui.js e aggiungere il codice seguente alla fine della funzione displayUI() esistente. Questo codice mostrerà un pulsante che un utente connesso può selezionare per visualizzare la foto del profilo. Il pulsante rimarrà nascosto se l'utente non è connesso.
```
var showPhotoButton= document.getElementById('showProfilePhoto');
showPhotoButton.style = "display: block";
```

Ora che sono state aggiunte le funzioni supplementari e i frammenti di codice per ottenere la foto di un utente connesso, il passaggio successivo consiste nell'eseguire l'app.

Eseguire l'app

L'app è stata estesa per visualizzare alcuni dei file dell'utente con Microsoft Graph. Verificare che siano presenti alcuni file nella cartella radice dell'istanza di OneDrive dell'utente e quindi eseguire l'app in locale.

Visualizzare in anteprima l'app Web eseguendo il comando seguente nel terminale:
```
npm start
```
Il browser deve puntare a http://localhost:8080.
Selezionare il pulsante Accedi con Microsoft per accedere con l'account Microsoft 365. Assicurarsi che l'account con cui si accede abbia una foto del profilo.
Accedere usando un account nello stesso tenant per sviluppatori di Microsoft 365 in cui è stata registrata l'applicazione Microsoft Entra.
Dopo aver eseguito l'accesso, verificare che vengano visualizzati un messaggio di benvenuto e un pulsante per mostrare una foto del profilo.
Selezionare il pulsante Mostra immagine del profilo. Viene visualizzata l'immagine del profilo dell'utente connesso. Se al profilo non è associata una foto, non verrà visualizzata alcuna foto.

Esercizio - Usare Microsoft Graph nella propria applicazione web per recuperare la foto del profilo di un utente

Configurare l'app

Eseguire l'app

Commenti e suggerimenti