Organisationsdaten: Erstellen einer Microsoft Entra ID-App-Registrierung

Verbessern Sie die Benutzerproduktivität, indem Sie Organisationsdaten (E-Mails, Dateien, Chats und Kalenderereignisse) direkt in Ihre benutzerdefinierten Anwendungen integrieren. Mithilfe von Microsoft Graph-APIs und Microsoft Entra-ID können Sie relevante Daten in Ihren Apps nahtlos abrufen und anzeigen, wodurch die Notwendigkeit reduziert wird, dass Benutzer den Kontext wechseln müssen. Ganz gleich, ob sie auf eine E-Mail verweist, die an einen Kunden gesendet wird, eine Teams-Nachricht überprüfen oder auf eine Datei zugreifen, benutzer können schnell die benötigten Informationen finden, ohne Ihre App zu verlassen und ihren Entscheidungsprozess zu optimieren.

In dieser Übung führen Sie die folgenden Schritte aus:

• Erstellen Sie eine Microsoft Entra ID-App-Registrierung, damit Microsoft Graph auf Organisationsdaten zugreifen und sie in die App übertragen kann.
• Suchen team und channel IDs aus Microsoft Teams, die zum Senden von Chatnachrichten an einen bestimmten Kanal erforderlich sind.
• Aktualisieren Sie die env-Datei des Projekts mit Werten aus Ihrer Microsoft Entra ID-App-Registrierung.

Erstellen einer Microsoft Entra ID-App-Registrierung

1. Wechseln Sie zum Azure-Portal , und wählen Sie "Microsoft Entra-ID" aus.

2. Wählen Sie "Verwalten --> gefolgt von + Neue Registrierung" aus.

3. Füllen Sie die Details des neuen App-Registrierungsformulars aus, wie unten dargestellt, und wählen Sie "Registrieren" aus:

   • Name: microsoft-graph-app
   • Unterstützte Kontotypen: Konten in einem beliebigen Organisationsverzeichnis (Beliebiger Microsoft Entra ID-Mandant - Multitenant)
   • Umleitungs-URI:
     • Wählen Sie eine Einzelseitenanwendung (Single Page Application, SPA) aus, und geben Sie http://localhost:4200 das Feld "Umleitungs-URI " ein.
   • Wählen Sie "Registrieren" aus, um die App-Registrierung zu erstellen.

   

1. Wählen Sie im Ressourcenmenü die Option "Übersicht" aus, und kopieren Sie den Application (client) ID Wert in die Zwischenablage.

   

Aktualisieren der env-Datei des Projekts

1. Öffnen Sie die env-Datei in Ihrem Editor, und weisen Sie den Application (client) ID Wert zu ENTRAID_CLIENT_ID.

   ENTRAID_CLIENT_ID=<APPLICATION_CLIENT_ID_VALUE>
   

2. Wenn Sie die Möglichkeit zum Senden einer Nachricht aus der App in einen Teams-Kanal aktivieren möchten, melden Sie sich mit Ihrem Microsoft 365-Entwicklermandantenkonto bei Microsoft Teams an (dies wird in den Vorabfragen für das Lernprogramm erwähnt).

3. Nachdem Sie angemeldet sind, erweitern Sie ein Team, und suchen Sie einen Kanal, an den Sie Nachrichten von der App senden möchten. Sie können z. B. das Firmenteam und den Kanal "Allgemein " auswählen (oder das team/den Kanal, den Sie verwenden möchten).

   

4. Klicken Sie in der Teamkopfzeile auf die drei Punkte (...) und wählen Sie "Link zum Team abrufen" aus.

5. In dem Link, der im Popupfenster angezeigt wird, ist die Team-ID die Zeichenfolge von Buchstaben und Zahlen nach team/. Beispielsweise ist die Team-ID im Link "https://teams.microsoft.com/l/team/19%3ae9b9.../" " 19%3ae9b9... bis zum folgenden / Zeichen.

6. Kopieren Sie die Team-ID, und weisen Sie sie in der TEAM_ID zu.

7. Klicken Sie in der Kanalkopfzeile auf die drei Punkte (...) und wählen Sie "Link zum Kanal abrufen" aus.

8. In dem Link, der im Popupfenster angezeigt wird, ist die Kanal-ID die Zeichenfolge von Buchstaben und Zahlen nach channel/. Beispielsweise ist die Kanal-ID im Link "https://teams.microsoft.com/l/channel/19%3aQK02.../" " 19%3aQK02... bis zum folgenden / Zeichen.

9. Kopieren Sie die Kanal-ID, und weisen Sie sie in der CHANNEL_ID zu.

10. Speichern Sie die env-Datei , bevor Sie fortfahren.

Starten/Neustarten der Anwendungs- und API-Server

Führen Sie einen der folgenden Schritte basierend auf den Übungen aus, die Sie bis zu diesem Punkt abgeschlossen haben:

• Wenn Sie die Datenbank, den API-Server und den Webserver in einer früheren Übung gestartet haben, müssen Sie den API-Server und den Webserver beenden und neu starten, um die env-Dateiänderungen zu übernehmen. Sie können die Datenbank ausführen lassen.

  Suchen Sie die Terminalfenster, unter denen der API-Server und der Webserver ausgeführt werden, und drücken Sie STRG+C , um sie zu beenden. Starten Sie sie erneut, indem Sie in jedes Terminalfenster eingeben npm start und die EINGABETASTE drücken. Fahren Sie mit der nächsten Übung fort.

• Wenn Sie die Datenbank, den API-Server und den Webserver noch nicht gestartet haben, führen Sie die folgenden Schritte aus:

  1. In den folgenden Schritten erstellen Sie drei Terminalfenster in Visual Studio Code.

     

  2. Klicken Sie in der Visual Studio Code-Dateiliste mit der rechten Maustaste auf die env-Datei , und wählen Sie " Im integrierten Terminal öffnen" aus. Stellen Sie sicher, dass sich Ihr Terminal am Stamm des Projekts befindet - openai-acs-msgraph -, bevor Sie fortfahren.

  3. Wählen Sie eine der folgenden Optionen aus, um die PostgreSQL-Datenbank zu starten:

     • Wenn Docker Desktop installiert und ausgeführt wird, führen Sie sie im Terminalfenster aus docker-compose up , und drücken Sie die EINGABETASTE.

     • Wenn Podman mit installierter und ausgeführter Podman-Erstellung ausgeführt wird, führen podman-compose up Sie sie im Terminalfenster aus, und drücken Sie die EINGABETASTE.

     • Um den PostgreSQL-Container direkt mit Docker Desktop, Podman, nerdctl oder einer anderen installierten Containerlaufzeit auszuführen, führen Sie den folgenden Befehl im Terminalfenster aus:

       • Mac, Linux oder Windows-Subsystem für Linux (WSL):

         [docker | podman | nerdctl] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v $(pwd)/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

       • Windows mit PowerShell:

         [docker | podman] run --name postgresDb -e POSTGRES_USER=web -e POSTGRES_PASSWORD=web-password -e POSTGRES_DB=CustomersDB -v ${PWD}/data:/var/lib/postgresql/data -p 5432:5432 postgres
         

  4. Nachdem der Datenbankcontainer gestartet wurde, drücken Sie das + Symbol in der Symbolleiste des Visual Studio Code Terminal , um ein zweites Terminalfenster zu erstellen.

     

  5. cd in den Server-/Typescript-Ordner ein, und führen Sie die folgenden Befehle aus, um die Abhängigkeiten zu installieren und den API-Server zu starten.

     • npm install
     • npm start

  6. Drücken Sie erneut das + Symbol in der Visual Studio Code Terminal-Symbolleiste , um ein drittes Terminalfenster zu erstellen.

  7. cd in den Clientordner ein, und führen Sie die folgenden Befehle aus, um die Abhängigkeiten zu installieren und den Webserver zu starten.

     • npm install
     • npm start

  8. Ein Browser wird gestartet, und Sie werden zu http://localhost:4200.

     

Nächster Schritt

Organisationsdaten: Anmelden eines Benutzers und Abrufen eines Zugriffstokens