Übung – Verbinden Sie eine JavaScript-App mit Microsoft 365

• 3 Minuten

In dieser Übung werden Sie eine JavaScript-App erstellen, die mit Microsoft 365 verbunden ist. Mithilfe der JavaScript-Bibliothek der Microsoft Authentication Library können sich Benutzer mit ihrem Microsoft 365-Konto bei Ihrer App anmelden und ihren Namen mithilfe des Microsoft Graph JavaScript SDK anzeigen können.

Ausführen Ihrer App

1. Um den anfänglichen App-Code abzurufen, den Sie in dieser Übung verwenden, wählen Sie aus einer der folgenden Optionen aus:

   Wenn Sie Git verwenden, klonen Sie das Projekt mithilfe des git clone-Befehls:

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

   Wenn Sie Git nicht verwenden, wechseln Sie im Webbrowser zu https://github.com/MicrosoftDocs/mslearn-retrieve-m365-data-with-msgraph-quickstart. Wählen Sie die Schaltfläche Code gefolgt von ZIP-Datei herunterladen. Extrahieren Sie die ZIP-Datei auf Ihrem Computer.

2. Öffnen Sie den Ordner in Ihrem Code-Editor.

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

   const msalConfig = {
     auth: { .. }
   }
   

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

5. 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'
     }
   };
   

6. Führen Sie eine Vorschau der Web-App aus, indem Sie den folgenden Befehl im Terminal ausführen:

   npm start
   

7. Ihr Standardbrowser sollte sich öffnen und auf http://localhost:8080 zeigen.

8. Wählen Sie die Schaltfläche Bei Microsoft anmelden aus, um sich mit Ihrem Microsoft 365-Konto anzumelden.

9. Nachdem Sie sich mit Ihrem Konto angemeldet und der App zugestimmt haben, sollte in der App Ihr ​​Benutzername angezeigt werden.

10. Beenden Sie den Server „Node.js“, indem Sie im Terminalfenster STRG+C auswählen.