Übung – Ändern der Darstellung von Daten mithilfe von Vorlagen

  • 2 Minuten

In dieser Übung erfahren Sie, wie Sie die Anmeldekomponentesvorlage so anpassen, dass die E-Mail-Adresse eines angemeldeten Benutzers angezeigt wird.

Vorbereitende Schritte

Führen Sie diese 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

Führen Sie zur Erstellung dieser App die folgenden Schritte aus:

  1. Wechseln Sie im Browser zum Microsoft Entra Admin Center, melden Sie sich an, und wechseln Sie zu Microsoft Entra ID.

  2. Wählen Sie App-Registrierungen im linken Bereich und dann Neue Registrierung aus.

    Screenshot mit der Auswahl von

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

    Screenshot: Registrieren Ihrer Anwendung in Microsoft Entra ID

2: Einrichten der Umgebung

  1. Erstellen Sie einen Ordner auf Ihrem Desktop mit dem Namen customize-mgt.

  2. Öffnen Sie den Ordner customize-mgt in Visual Studio Code.

  3. Erstellen Sie in Visual Studio Code im Ordner customize-mgteine Datei namens index.html.

  4. 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>
      <mgt-agenda></mgt-agenda>
    </body>
</html>

  5. Fügen Sie einen Ordner namens .vscode in das Stammverzeichnis Ihres Projektordners ein.

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

Verwenden von Vorlagen in der Komponente „Anmeldung“

Angenommen, Sie möchten die E-Mail-Adresse eines Benutzers als Inhalt einer Angemeldet-Schaltfläche in der Komponente „Anmeldung“ anzeigen. Sie können das template-Tag in <mgt-login> verwenden und signed-in-button-content als data-type-Wert hinzufügen. Innerhalb der Vorlage verwenden Sie {{personDetails.mail}}, um auf die E-Mail-Adresse des Benutzers zuzugreifen und sie anzuzeigen. Die Komponente „Anmeldung“ sieht dann wie in diesem Beispiel aus:

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

Tipp

Wenn Sie das Microsoft Graph-Toolkit mit einer JavaScript-Bibliothek verwenden, die bereits selbst {{ }} verwendet, können Sie das Microsoft Graph-Toolkit so konfigurieren, dass andere Zeichen, z. B. [[ ]], verwendet werden, um Vorlagen zu bezeichnen und Konflikte mit Ihrem JavaScript-Framework zu vermeiden.

Die endgültige Version Ihrer index.html-Datei wird wie dieses Beispiel aussehen:

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

Testen der App im Browser

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

  2. Ö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.

  3. Melden Sie sich mit Ihrem Microsoft 365-Entwicklerkonto an. Stimmen Sie den erforderlichen Berechtigungen zu, und klicken Sie auf Annehmen.

  4. Jetzt zeigt der Inhalt der Schaltfläche "Angemeldet" die E-Mail-Adresse des Benutzers nach der Anmeldung an.

Screenshot des Ergebnisses der Übung.