Übung – Daten zwischenspeichern, die von Komponenten geladen wurden

8 Minuten

In dieser Übung erfahren Sie, wie die Komponenten des Microsoft Graph-Toolkits ihre Daten zwischenspeichern. Außerdem steuern Sie die Cachekonfiguration und sehen, wie sich dies auf das Laden von Daten aus Microsoft Graph auswirkt.

Vorbereitende Schritte

Führen Sie die folgenden Schritte als Voraussetzung für diese Übung durch.

1. Konfigurieren einer Microsoft Entra-App

Für dieses Modul benötigen Sie eine Anwendung mit den folgenden Einstellungen:

Name: Meine App
Plattform: Einzelseiten-Anwendung (Single Page Application, SPA)
Unterstützte Kontotypen: Konten in einem beliebigen Organisationsverzeichnis (Beliebiges Microsoft Entra-Verzeichnis – mehrinstanzenfähig) und persönliche Microsoft-Konten (z. B. Skype, Xbox)
Umleitungs-URIs:http://localhost:3000

Sie können diese Anwendung erstellen, indem Sie die folgenden Schritte ausführen:

Wechseln Sie im Browser zum Microsoft Entra Admin Center, melden Sie sich an, und wechseln Sie zu Microsoft Entra ID.
Wählen Sie App-Registrierungen im linken Bereich und dann Neue Registrierung aus.
Geben Sie auf dem Bildschirm Anwendung registrieren folgende Werte ein:
- Name: Geben Sie den Namen für Ihre Anwendung ein.
- Unterstützte Kontotypen: Wählen Sie Konten in einem beliebigen Organisationsverzeichnis (beliebiges Microsoft Entra-Verzeichnis – mehrinstanzenfähig) und persönliche Microsoft-Konten (z. B. Skype, Xbox) aus.
- Umleitungs-URI (optional): Wählen Sie Single-Page-Webanwendung (SPA) aus, und geben Sie http://localhost:3000 ein.
- Wählen Sie Registrieren aus.

Schritt 2: Einrichten der Umgebung

Erstellen Sie auf dem Desktop einen Ordner mit dem Namen mgt-performance.
Öffnen Sie in Visual Studio Code den Ordner mgt-performance.
Erstellen Sie im Ordnermgt-performance eine Datei namens index.html.

Kopieren Sie den folgenden Code in index.html, und ersetzen Sie durch YOUR-CLIENT-ID Ihre kopierte Anwendungs-ID (Client-ID) aus Ihrer Microsoft Entra-App, die zuvor erstellt wurde.

<!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>

Fügen Sie einen Ordner namens .vscode in das Stammverzeichnis Ihres Projektordners ein.
Fügen Sie eine Datei mit dem Namen settings.json in den Ordner .vscode ein. Kopieren Sie den folgenden Code, fügen Sie ihn in settings.json ein, und speichern Sie die Datei.
```
{
  "liveServer.settings.host": "localhost",
  "liveServer.settings.port": 3000
}
```

Untersuchen des Datencaches durch die Komponenten des Toolkits

Sehen wir uns zunächst an, wie Microsoft Graph-Toolkit-Komponenten Daten standardmäßig zwischenspeichern.

Öffnen Sie in Visual Studio Code die Datei index.html.

Fügen Sie vor dem abschließenden Body-Tag die Komponente mgt-people wie folgt ein:

<!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>

Drücken Sie die folgende Tastenkombination in Visual Studio Code, und suchen Sie nach Live Server:
- Windows: STRG+UMSCHALTTASTE+P
- macOS: BEFEHL+UMSCHALTTASTE+P
Führen Sie Live Server aus, um Ihre App zu testen.
Öffnen Sie Ihren Browser, und navigieren Sie zu http://localhost:3000. Wenn die Datei geöffnet index.html, wenn Sie den Live Server starten, öffnet http://localhost:3000/Index.htmlder Browser . Stellen Sie sicher, dass Sie die URL in http://localhost:3000ändern, bevor Sie sich mit Ihrem Microsoft 365-Entwicklerkonto anmelden. Wenn Sie die URL nicht aktualisieren, erhalten Sie die folgende Fehlermeldung.

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.
Wählen Sie die Schaltfläche zum Anmelden aus, und melden Sie sich mit Ihrem Microsoft 365-Entwicklerkonto an. Stimmen Sie den erforderlichen Berechtigungen zu, und klicken Sie auf Annehmen. Daraufhin sollte eine Liste von Personen angezeigt werden.
Öffnen Sie im Webbrowser die Entwicklertools, und wechseln Sie zur Registerkarte Anwendungen. Erweitern Sie im Abschnitt Speicher die Gruppe IndexedDB. Beachten Sie die drei Datenbanken, die von Microsoft Graph Toolkit erstellt wurden.
Erweitern Sie die mgt-people-Datenbank, und wählen Sie peopleQuery aus. Erweitern Sie im Detailbereich die im Cache gespeicherten Daten:
Wechseln Sie in den Entwicklertools zur Registerkarte Netzwerk. Legen Sie fest, dass nur XHR-Anforderungen angezeigt werden sollen, und aktualisieren Sie die Seite. Beachten Sie, dass Ihre App zwar Daten anzeigt, aber keine einzige Anforderung an Microsoft Graph ausgeführt hat. Alle Daten werden aus dem Cache geladen.

Steuern der Cacheeinstellungen für Komponenten des Toolkits

Sie haben gesehen, wie Microsoft Graph Toolkit-Komponenten Daten standardmäßig zwischenspeichern und aus dem Cache laden. Nun deaktivieren wir den Cache und sehen uns an, wie er sich auf das Verhalten Ihrer App auswirkt.

Öffnen Sie im Webbrowser die Entwicklertools, und wählen Sie die Registerkarte Konsole aus.
Leeren Sie den Microsoft Graph Toolkit-Cache, indem Sie in der Konsole die folgende Anweisung ausführen:
```
var cacheId = await mgt.Providers.getCacheId();
mgt.CacheService.clearCacheById(cacheId)
```
Um zu überprüfen, ob der Cache geleert wurde, wechseln Sie zur Registerkarte Anwendung. Hier werden unter IndexedDB keine Datenbanken mehr angezeigt.
Deaktivieren Sie als Nächstes den Cache für alle Komponenten des Toolkits. Öffnen Sie in Visual Studio Code die Datei index.html. Fügen Sie vor dem schließenden Head-Tag den folgenden Codeausschnitt hinzu:
```
<script>
  mgt.CacheService.config.isEnabled = false;
</script>
```
Aktualisieren Sie die Seite im Webbrowser. Wechseln Sie in den Entwicklertools zur Registerkarte Netzwerk. Beachten Sie die verschiedenen Anforderungen an Microsoft Graph.
Aktualisieren Sie die Seite erneut, und beachten Sie, wie dieselben Anforderungen ausgeführt wurden. Da Sie den Cache deaktiviert haben, müssen alle Daten aus Microsoft Graph abgerufen werden.