Esercizio: Modificare la presentazione dei dati con i modelli

  • 2 minuti

In questo esercizio si apprenderà come personalizzare il modello del componente Account di accesso per visualizzare l'indirizzo di posta elettronica di un utente connesso.

Prima di iniziare

Completare questi passaggi come prerequisiti per questo esercizio.

1. Configurare un'app Microsoft Entra

Per questo modulo è necessaria un'applicazione con le impostazioni seguenti:

  • Nome: My app
  • Piattaforma: SPA (Single Page Application)
  • Tipi di account supportati: account in qualsiasi directory organizzativa (qualsiasi directory Microsoft Entra - Multi-tenant) e account Microsoft personali (ad esempio, Skype, Xbox)
  • URI di reindirizzamento: http://localhost:3000

A tale scopo, attenersi alla seguente procedura:

  1. Nel browser passare alla Interfaccia di amministrazione di Microsoft Entra, accedere e passare a Microsoft Entra ID.

  2. Selezionare Registrazioni app nel riquadro a sinistra e selezionare Nuova registrazione.

    Screenshot che mostra la selezione di Nuova registrazione per creare una nuova registrazione dell'app.

  3. 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 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.

    Screenshot che mostra la registrazione dell'applicazione in Microsoft Entra ID.

2. Impostare l'ambiente

  1. Creare una cartella sul desktop denominata customize-mgt.

  2. Aprire la cartella customize-mgt in Visual Studio Code.

  3. In Visual Studio Code, creare un file denominato index.html nella cartella customize-mgt.

  4. Copiare il codice seguente in index.htmle sostituire YOUR-CLIENT-ID con l'ID applicazione (client) copiato dall'app Microsoft Entra creata in precedenza.

    <!DOCTYPE html>
<html lang="en">
    <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>
      <mgt-agenda></mgt-agenda>
    </body>
</html>

  5. Aggiungere una cartella denominata .vscode nella radice della cartella del progetto.

  6. 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
}

Usare i modelli nel componente di accesso

Si supponga di voler visualizzare l'indirizzo di posta elettronica di un utente come contenuto di un pulsante di accesso nel componente di accesso. È possibile usare il tag template in <mgt-login> e aggiungere signed-in-button-content come valore data-type. All'interno del modello, usare {{personDetails.mail}} per accedere e visualizzare l'indirizzo di posta elettronica dell'utente. Il messaggio avrà un aspetto analogo a quello riportato nell'esempio:

<mgt-login>
  <template data-type="signed-in-button-content">
    <div>{{personDetails.mail}}</div>
  </template>
</mgt-login>

Consiglio

Se si usa Microsoft Graph Toolkit con una libreria JavaScript che usa già {{ }}, è possibile configurare Microsoft Graph Toolkit per usare altri caratteri come [[ ]] per indicare i modelli ed evitare conflitti con il framework JavaScript.

La versione finale di index.html sarà simile all'esempio seguente:

<!DOCTYPE html>
<html lang="en">
  <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>
      <template data-type="signed-in-button-content">
        <div>{{personDetails.mail}}</div>
      </template>
    </mgt-login>

    <mgt-agenda
        date="June 28, 2023"
        days="3"
        group-by-day>
    </mgt-agenda>
  </body>
</html>

Test dell'app nel browser

  1. In Visual Studio Code premere la seguente combinazione di tasti e cercare Live Server:

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

    Eseguire Live Server per testare l'applicazione.

  2. Aprire il browser e andare a http://localhost:3000. Se il file index.html aperto all'avvio di Live Server, verrà aperto http://localhost:3000/Index.htmlil browser . Assicurarsi di modificare l'URL http://localhost:3000in , prima di accedere con l'account per sviluppatori di Microsoft 365. Se non si aggiorna l'URL, verrà visualizzato l'errore seguente.

    The redirect URI 'http://localhost:3000/Index.html' specified in the request does not match the redirect URIs configured for the application <Your client ID>. Make sure the redirect URI sent in the request matches one added to your application in the Azure portal. Navigate to https://aka.ms/redirectUriMismatchError to learn more about how to fix this.

  3. Accedere con il proprio account Microsoft 365 Developer. Fornire il consenso alle autorizzazioni necessarie e selezionare Accetta.

  4. Infine, il contenuto del pulsante di accesso mostra l'indirizzo di posta elettronica dell'utente dopo l'accesso.

Screenshot che mostra il risultato dell'esercizio.