Esercitazione: dati cache caricati dai componenti

  • 8 minuti

In questo esercizio si vedrà come i componenti di Microsoft Graph Toolkit memorizzano i dati nella cache. Si controlla anche la configurazione della cache e si vedrà in che modo influisce sul caricamento dei dati da Microsoft Graph.

Prima di iniziare

Completare i seguenti 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: 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

È possibile creare questa applicazione seguendo questa 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. Sul desktop creare una cartella denominata mgt-performance.

  2. In Visual Studio Code aprire la cartella mgt-performance.

  3. Nella cartella mgt-performance creare un file denominato index.html.

  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>
  </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
}

Esplorare i dati memorizzati nella cache dai componenti del toolkit

Per prima cosa, esaminiamo come i componenti di Microsoft Graph Toolkit memorizzano i dati nella cache per impostazione predefinita.

  1. In Visual Studio Code aprire il file index.html.

  2. Prima del tag del corpo di chiusura, aggiungere il componente mgt-people, come indicato di seguito:

    <!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-people></mgt-people>
  </body>
</html>

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

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

  5. Selezionare il pulsante Accedi ed esegui l'accesso con l'account sviluppatore Microsoft 365. Fornire il consenso alle autorizzazioni necessarie e selezionare Accetta. Dovrebbe essere visualizzato un elenco di persone.

    Screenshot del componente Persone, che mostra le informazioni sulle persone.

  6. Nel Web browser aprire gli strumenti di sviluppo e passare alla scheda Applicazione. Nella sezione Archiviazione espandere il gruppo IndexedDB. Notare i tre database creati da Microsoft Graph Toolkit.

    Screenshot della sezione IndexedDB con i dati evidenziati negli strumenti di sviluppo del browser.

  7. Espandere il database mgt-people e selezionare peopleQuery. Nel riquadro dei dettagli espandere i dati archiviati nella cache:

    Screenshot della sezione IndexedDB con i dati memorizzati nella cache evidenziati negli strumenti di sviluppo del browser.

  8. Negli strumenti di sviluppo passare alla scheda Rete. Scegliere di visualizzare solo le richieste XHR e aggiornare la pagina. Si noti che mentre l'app visualizza i dati, non ha eseguito una singola richiesta a Microsoft Graph. Tutti i dati vengono caricati dalla cache.

    Screenshot che mostra la scheda Rete senza alcuna richiesta aperta negli strumenti di sviluppo del browser.

Controllo delle impostazioni della cache per i componenti del toolkit

Innanzitutto, è stato esaminato in che modo i componenti di Microsoft Graph Toolkit memorizzano nella cache e caricano dalla cache i dati per impostazione predefinita. A questo punto, disabilitare la cache e vedere in che modo influisce sul comportamento dell'app.

  1. Nel Web browser aprire gli strumenti di sviluppo e selezionare la scheda Console.

  2. Cancellare la cache di Microsoft Graph Toolkit eseguendo l'istruzione seguente nella console:

    var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)

  3. Per verificare che la cache sia stata cancellata, passare alla scheda Applicazione. Non sono più presenti database in IndexedDB.

    Screenshot della sezione IndexedDB senza alcun dato evidenziato negli strumenti di sviluppo del browser.

  4. Successivamente, disabilitare la cache per tutti i componenti del toolkit. In Visual Studio Code aprire il file index.html. Prima del tag head di chiusura, aggiungere il frammento di codice seguente:

    <script>
  mgt.CacheService.config.isEnabled = false;
</script>

  5. Nel Web browser aggiornare la pagina. Negli strumenti di sviluppo passare alla scheda Rete. Notare le diverse richieste a Microsoft Graph.

    Screenshot della scheda Rete che mostra le richieste aperte negli strumenti di sviluppo del browser.

  6. Aggiornare di nuovo la pagina e notare che sono state eseguite le stesse richieste. Poiché la cache è stata disabilitata, tutti i dati devono essere recuperati da Microsoft Graph.