Übung – Abrufen eines Zugriffstokens mithilfe von MSAL

Abgeschlossen

Jetzt ist es an der Zeit, etwas mit allen Konzepten zu erstellen, die Sie bis zu diesem Punkt gelernt haben.

In dieser Übung werden Sie Ihre eigene Anwendung einrichten. Die Anwendung wird Microsoft Graph aufrufen, um die Profilinformationen eines angemeldeten Benutzers zu erhalten.

Einrichten der App

In dieser Übung beginnen Sie mit der Ausführung einer Anwendung, die einen Benutzer bei Microsoft Entra ID anmeldet und microsoft Graph aufruft. Sie greifen auf ein GitHub-Repository zu und konfigurieren dann die Anwendung so, dass sie lokal auf Ihrem Computer ausgeführt wird.

1. Öffnen Sie eine Konsole auf Ihrem Computer, und wechseln Sie zu dem Ordner, in dem Sie die App speichern wollen.

2. Um den Quellcode zu erhalten, besuchen Sie das GitHub-Repository und wählen Sie eine der folgenden Optionen aus:

   • Wenn Sie Git verwenden, klonen Sie das Projekt mit dem Befehl "git clone":

     git clone https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart.git
     

   • Wenn Sie Git nicht verwenden, wählen Sie die Schaltfläche Code gefolgt von ZIP-Datei herunterladen. Extrahieren Sie die Datei *.zip auf Ihren Computer.

3. Öffnen Sie den Stammordner des heruntergeladenen oder geklonten Projektsmslearn-retrieve-m365-data-with-msgraph-quickstart in Ihrem bevorzugten Editor.

   Die Anwendung beinhaltet folgende Dateien:

   • index.html: Definiert die Benutzeroberfläche, die Benutzern angezeigt wird, wenn sie auf die Website zugreifen. Es lädt das MSAL-Skript (Microsoft Authentication Library) und benutzerdefinierte Anwendungsskripts, bietet eine Möglichkeit für einen Benutzer zur Anmeldung und zeigt den Namen des Benutzers nach der Anmeldung an.
   • auth.js: Definiert die MSAL-Konfiguration, um die Anwendung der Microsoft Entra-ID zuzuordnen, meldet einen Benutzer bei der Anwendung an und verarbeitet das Abrufen eines Zugriffstokens, das Microsoft Graph verwenden kann.
   • graph.js: Ruft Microsoft 365 auf, um auf das angemeldete /me-Profil zuzugreifen. Es basiert auf auth.js, um das Zugriffstoken abzurufen, das für das Aufrufen der Microsoft Graph-API verwendet wird.
   • ui.js: Behandelt Elemente der Benutzeroberfläche, die in index.html definiert sind.

4. Öffnen Sie die auth.js-Datei , und suchen Sie die Konstante msalConfig:

   const msalConfig = {
       auth: { .. }
   }
   

5. Ersetzen Sie den Wert der clientId Eigenschaft durch den kopierten Wert der Anwendungs-ID (Client) aus der Microsoft Entra-Anwendung (spa-aad-app), die Sie zuvor registriert haben. Sie können diesen Wert auf der Übersichtsseite der Microsoft Entra-Anwendung (spa-aad-app) abrufen.

6. Suchen Sie in derselben auth.js-Datei nach der msalConfig.auth.authority -Eigenschaft. Ersetzen Sie den <your directory ID here> Wert durch den Wert directory (tenant) ID der Microsoft Entra-Anwendung (spa-aad-app), die Sie zuvor registriert haben. Sie können diesen Wert auf der Übersichtsseite der Microsoft Entra-Anwendung (spa-aad-app) abrufen.

   Die msalConfig Konstante sollte in etwa wie der folgende Code mit den eindeutigen IDs ihres Microsoft Entra-Mandanten und der registrierten Anwendung aussehen:

   const msalConfig = {
     auth: {
       clientId: 'b1a37248-53b5-430c-b946-ef83521af70c',
       authority: 'https://login.microsoftonline.com/b930540b-a147-45bb-8f24-bfbed091aa25',
       redirectUri: 'http://localhost:8080'
     }
   };
   

7. Nachdem Sie nun die entsprechenden Microsoft Entra-IDs zu auth.jshinzugefügt haben, nehmen Sie sich einen Moment Zeit, um den Code in der Datei zu untersuchen. Sie enthält die folgenden Funktionen:

   • signIn(): Meldet den Benutzer an.
   • getToken(): Übernimmt das Abrufen eines Zugriffstokens, das Microsoft Graph verwenden kann.

8. Öffnen Sie die graph.js-Datei, und beachten Sie, dass sie ein Zugriffstoken auswählt, die /me-API von Microsoft Graph aufruft und die ID- und displayName-Werte des Benutzers auswählt. Beachten Sie, wie das Zugriffstoken abgerufen und dem Autorisierungsheader hinzugefügt wird, der mit der Anforderung an /me gesendet wird.

9. Öffnen Sie abschließend ui.js und nehmen Sie sich einen Moment Zeit, um die displayUI()-Funktion zu erkunden. Sie ist für das Ein- und Ausblenden von Elementen in index.html und das Anzeigen des Benutzernamens nach dem Anmelden verantwortlich.

Ausführen der App

Stellen Sie für diesen Vorgang sicher, dass "Node.js" auf Ihrem Computer installiert ist.

Es ist an der Zeit, die Anwendung lokal auszuführen.

1. Wechseln Sie in der Konsole zu dem Projektordner, in dem sich der Quellcode befindet.

2. Führen Sie an der Eingabeaufforderung das folgende Skript aus. Das Skript startet Ihre App lokal und öffnet http://localhost:8080 im Browser.

   npm start
   

3. Wenn die App ordnungsgemäß konfiguriert ist, wird eine Anmeldeschaltfläche angezeigt.

   

4. Melden Sie sich mit einem Konto im selben Microsoft 365-Entwicklermandanten an, den Sie bei der Registrierung der Microsoft Entra-Anwendung in einer vorherigen Lerneinheit verwendet haben.

5. Nach dem erfolgreichen Anmelden werden Sie aufgefordert, Ihre Zustimmung zu geben.

   

6. Wählen Sie Annehmen aus, um der Anwendung die Zustimmung zu geben, Vorgänge im Namen des Benutzers auszuführen.

7. Nachdem Sie ihre Zustimmung gegeben haben, versucht die Anwendung, anhand der überprüften Kontoinformationen ein Zugriffstoken abzurufen. Die MSAL-Bibliothek übernimmt dies für Sie.

8. Nachdem das Token in der Anwendung zurückerlangt ist, wird eine GET-Anforderung an den Microsoft Graph /me-Endpunkt gesendet, und das Zugriffstoken wird im Autorisierungsheader übergeben. Das Aufrufen von /me ruft dann die Daten sicher vom Dienst ab.

9. Nachdem Sie die Antwort von Microsoft Graph erhalten haben, wird der Name des angemeldeten Benutzers im Browser angezeigt.

   

Sie haben erfolgreich eine Anwendung erstellt, die Microsoft Graph zum Abrufen von Microsoft 365-Daten verwendet!

Weiter