Übung – Melden Sie sich bei Ihrer App mittels der Anmeldekomponente des Microsoft Graph-Toolkit an

12 Minuten

In dieser Einheit erstellen Sie eine Webanwendung und untersuchen ein Startprojekt. Anschließend verwenden Sie die Anmelde-Komponente des Toolkits, um sich bei Ihrer Anwendung anzumelden und auf Microsoft Graph-Funktionalität zuzugreifen.

Installieren des Dev Proxys

Um diese Übung abzuschließen, müssen Sie die neueste Version von Dev Proxy installieren. Der Dev Proxy ist ein Tool, das API-Antworten simuliert. Damit können Sie Ihre Anwendung erstellen und testen, ohne einen Microsoft 365-Mandanten zu benötigen. Befolgen Sie die Anweisungen für die ersten Schritte, und überprüfen Sie, ob der Dev Proxy ausgeführt wird, bevor Sie fortfahren.

Hinweis

Wenn Sie diese Übung mithilfe des Dev Proxys durchführen, verwendet Ihre App statische, simulierte Daten. Der von Ihnen geschriebene Code funktioniert sowohl mit simulierten als auch mit Livedatenkonfigurationen. Um Livedaten von einem Microsoft 365-Mandanten zu verwenden, müssen Sie nur eine Microsoft Entra-App-Registrierung erstellen und den Client-ID-Verweis in Ihrer App aktualisieren.

Dev Proxy-Voreinstellung herunterladen

Um diese Übung abzuschließen, müssen Sie die Dev Proxy-Voreinstellung für dieses Modul herunterladen. Die Voreinstellung enthält die simulierten Daten und Antworten, die Sie zum Erstellen Ihrer Anwendung verwenden. Führen Sie den folgenden Befehl in Ihrem Terminal aus, um die Voreinstellung herunterzuladen:

devproxy preset get learn-msgraph-toolkit-intro

Einrichten der App-Struktur für Ihre Web App

Erstellen Sie einen neuen Ordner für das Projekt.

Öffnen Sie Visual Studio Code. Wählen Sie im Befehlsmenü Datei>Ordner öffnen aus.
Wenn Sie einen Ordner öffnen, stellt das Betriebssystem eine Schaltfläche für das Erstellen eines Neuen Ordners bereit.
Gehen Sie zu dem Speicherort, an dem Sie den neuen Ordner erstellen möchten, und wählen Sie Neuer Ordner. Benennen Sie den Ordner mgt-app.
Öffnen Sie den Ordner mgt-appin Visual Studio Code.

Erstellen von Dateien und Ordnern unter dem Projektordner

Ihre Webanwendung wird eine HTML-Datei und einen Ordner für Live Server-Einstellungen haben. Live Server ist eine Erweiterung von Visual Studio Code. Wir wollen nun die Projektstruktur erstellen.

Wählen Sie Datei>Neue Datei aus.
Benennen Sie die Datei index.html, und speichern Sie die Datei mit STRG+S (Windows) oder BEFEHL+S (macOS).
Fügen Sie den folgenden HTML-Code zu index.html hinzu, und speichern Sie die Datei.
```
<!DOCTYPE html>
<html>
  <head>
  </head>
  <body>
  </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
}
```

Diese Einstellungen stellen ein reibungsloses lokales Testen der Anwendung sicher, wenn Sie Live Server verwenden.

Bevor Sie mit dem Hinzufügen von Code zur Verwendung des Toolkits in Ihrer Webanwendung beginnen, müssen Sie eine Microsoft Entra-Anwendung einrichten.

Sie verwenden die Details der Microsoft Entra-Anwendung, um Ihre Anwendung mithilfe des Microsoft Authentication Library (MSAL) v2-Anbieters zu authentifizieren.

Einrichten einer Microsoft Entra-Anwendung

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.

Nachdem Sie nun die Anwendung erfolgreich eingerichtet haben, wollen wir einigen Code hinzufügen!

Hinzufügen des Microsoft Graph-Toolkits zu Ihrem Projekt

Früher haben Sie erfahren, dass Sie direkt aus dem Content Delivery Network auf das Toolkit verweisen können. Fügen Sie hierzu den folgenden Codeausschnitt direkt vor dem </head>-Tag in Ihrer index.html-Datei ein.

<script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>

Initialisieren des MSAL v2-Anbieters

Zum Authentifizieren der Anwendung initialisieren Sie den MSAL v2-Anbieter mithilfe der Anwendungs(Client)-ID, die Sie im vorherigen Abschnitt gespeichert haben.

Fügen Sie den folgenden Codeausschnitt in den <body> Ihrer index.html-Datei ein.

<mgt-msal2-provider client-id="YOUR-CLIENT-ID"></mgt-msal2-provider>

Ersetzen Sie YOUR-CLIENT-ID mit der Anwendungs-ID (Client-ID), die Sie im vorherigen Abschnitt gespeichert haben.

Um Ihre Anwendung zu authentifizieren, initialisieren Sie den MSAL v2-Anbieter mithilfe von f601c4cb-6902-4675-8415-7db28a4a332d als Anwendungs-ID. Der Dev Proxy simuliert den Authentifizierungsprozess für diese Pseudo-App-Registrierung.

Fügen Sie den folgenden Codeausschnitt in den <body> Ihrer index.html-Datei ein.

<mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>

Um die Anmelde-Komponente hinzuzufügen, fügen Sie das folgende Element zum Textkörper der Datei index.html hinzu.

<mgt-login></mgt-login>

Nach all den Änderungen sollte ihre Datei index.html wie folgt aussehen:

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

<!DOCTYPE html>
<head>
    <script src="https://unpkg.com/@microsoft/mgt@3/dist/bundle/mgt-loader.js"></script>
</head>
<body>
    <mgt-msal2-provider client-id="f601c4cb-6902-4675-8415-7db28a4a332d"></mgt-msal2-provider>
    <mgt-login></mgt-login>
</body>
</html>

Speichern Sie die Datei, und lassen Sie uns die Ergebnisse testen!

Testen Ihrer App in einem Browser

Dev Proxy starten

Beginnen Sie, indem Sie den Dev Proxy starten. Führen Sie in einem Terminal den folgenden Befehl aus:

devproxy --config-file "~appFolder/presets/learn-msgraph-toolkit-intro/devproxyrc.json"

Lassen Sie das Terminal geöffnet, und führen Sie den Dev Proxy aus, während Sie Ihre Anwendung testen.

Starten der Anwendung

Um Ihre Anwendung im Browser testen zu können, müssen Sie Visual Studio Code Live Server installiert haben.

Zum Ausführen der Anwendung in Live Server drücken Sie die folgende Tastenkombination in Visual Studio Code, und suchen Sie nach Live Server:

Windows: STRG+UMSCHALTTASTE+P
macOS: BEFEHL+UMSCHALT+P

Öffnen Sie mit Live Server, wählen Sie die Option aus, und drücken Sie EINGABE.

Nachdem der Live Server gestartet wurde, öffnet er möglicherweise die Seite http://localhost:3000/index.html. Öffnen Sie http://localhost:3000 im Browser.

Wählen Sie Anmelden aus. Der Dev Proxy simuliert den Authentifizierungsprozess, und die Anwendung zeigt die simulierten Anmeldeinformationen an.

Wählen Sie Anmelden aus, und geben Sie Ihr Microsoft 365-Entwicklermandanten-Konto ein. Sie werden aufgefordert, den erforderlichen Berechtigungen beim ersten Mal zuzustimmen. Nachdem Sie ihre Zustimmung gegeben haben, zeigt die Anwendung Ihre Anmeldeinformationen an.

Screenshot, der die endgültigen Ergebnisse Ihrer Anwendung nach der Benutzeranmeldung zeigt.

Sie haben jetzt erfolgreich einen Authentifizierungsmechanismus für den Zugriff auf Microsoft 365-Daten implementiert.