Teilen über

Schnellstart: Anmelden von Benutzern in einer Beispiel-Web-App

Gilt für: Grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für Mitarbeitermandanten gilt. Mitarbeitermandanten grüner Kreis mit einem weißen Häkchensymbol, das angibt, dass der folgende Inhalt für externe Mandanten gilt. Externe Mandanten (weitere Informationen)

In dieser Schnellstartanleitung verwenden Sie eine Beispiel-Web-App, um zu demonstrieren, wie Sie Benutzer anmelden und die Microsoft Graph-API in Ihrem Mitarbeitermandanten aufrufen. Die Beispiel-App verwendet die Microsoft-Authentifizierungsbibliothek , um die Authentifizierung zu verarbeiten.

Bevor Sie beginnen, verwenden Sie den Selektor Mandantentyp auswählen oben auf dieser Seite, um den Mandantentyp auszuwählen. Die Microsoft Entra-ID stellt zwei Mandantenkonfigurationen, Mitarbeiter und externe Konfigurationen bereit. Eine konfiguration für einen Mitarbeitermandanten richtet sich an Ihre Mitarbeiter, interne Apps und andere Organisationsressourcen. Ein externer Mandant richtet sich an Ihre kundenorientierten Apps.

Voraussetzungen

  • Ein Azure-Konto mit einem aktiven Abonnement. Wenn Sie noch kein Konto haben, Ein Konto kostenlos erstellen.
  • Dieses Azure-Konto muss über die Berechtigung zum Verwalten von Anwendungen verfügen. Alle folgenden Microsoft Entra-Rollen enthalten die erforderlichen Berechtigungen:
    • Anwendungsadministrator
    • Anwendungsentwickler
  • Ein Mandant für Mitarbeitende. Sie können Ihr Standardverzeichnis verwenden oder einen neuen Mandanten einrichten.
  • Visual Studio Code oder ein anderer Code-Editor.
  • Registrieren Sie eine neue App im Microsoft Entra Admin Center, die nur für Konten in diesem Organisationsverzeichnis konfiguriert ist. Weitere Informationen finden Sie unter Registrieren einer Anwendung . Notieren Sie die folgenden Werte auf der Anwendungsübersichtsseite für die spätere Verwendung:
    • Anwendungs-ID (Client)
    • Verzeichnis-ID (Mandant)
  • Fügen Sie die folgenden Umleitungs-URIs mithilfe der Webplattformkonfiguration hinzu. Weitere Informationen finden Sie unter Hinzufügen eines Umleitungs-URI in Ihrer Anwendung .
    • Umleitungs-URI: http://localhost:3000/auth/redirect
    • Logout-URL des Frontkanals: https://localhost:5001/signout-callback-oidc
  • Fügen Sie Ihrer App-Registrierung einen geheimen Clientschlüssel hinzu. Verwenden Sie keine Clientgeheimnisse in Produktions-Apps. Verwenden Sie stattdessen Zertifikate oder Verbundanmeldeinformationen. Weitere Informationen finden Sie unter Hinzufügen von Anmeldeinformationen zu Ihrer Anwendung.
  • Node.js

Klonen oder Herunterladen einer Beispielwebanwendung

Um die Beispielanwendung zu erhalten, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen.

  • Laden Sie die .zip Datei herunter, und extrahieren Sie sie dann in einen Dateipfad, in dem die Länge des Namens weniger als 260 Zeichen beträgt, oder klonen Sie das Repository:

  • Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

    git clone https://github.com/Azure-Samples/ms-identity-node.git

Konfigurieren der Beispielweb-App

Damit Sie Benutzer mit der Beispiel-App anmelden können, müssen Sie sie mit Ihren App- und Mandantendetails aktualisieren:

Öffnen Sie im Ordner "ms-identity-node " die Datei "App/.env ", und ersetzen Sie dann die folgenden Platzhalter:

Variable Description Beispiel(n)
Enter_the_Cloud_Instance_Id_Here Die Azure-Cloudinstanz, in der Ihre Anwendung registriert ist https://login.microsoftonline.com/ (fügen Sie den nachgestellten Schrägstrich ein)
Enter_the_Tenant_Info_here Mandanten-ID oder primäre Domäne contoso.microsoft.com oder aaaabbbb-0000-cccc-1111-dddd2222eeee
Enter_the_Application_Id_Here Client-ID der Anwendung, die Sie registriert haben 00001111-aaaa-2222-bbbb-3333cccc4444
Enter_the_Client_Secret_Here Geheimer Clientschlüssel der anwendung, die Sie registriert haben A1b-C2d_E3f.H4i,J5k?L6m!N7o-P8q_R9s.T0u
Enter_the_Graph_Endpoint_Here Die Cloudinstanz der Microsoft Graph-API, die Ihre App aufruft https://graph.microsoft.com/ (den abschließenden Schrägstrich einfügen)
Enter_the_Express_Session_Secret_Here Eine zufällige Zeichenfolge, die zum Signieren des Express-Sitzungs-Cookies verwendet wird A1b-C2d_E3f.H4...

Nachdem Sie Änderungen vorgenommen haben, sollte die Datei dem folgenden Codeausschnitt ähneln:

CLOUD_INSTANCE=https://login.microsoftonline.com/
TENANT_ID=aaaabbbb-0000-cccc-1111-dddd2222eeee
CLIENT_ID=00001111-aaaa-2222-bbbb-3333cccc4444
CLIENT_SECRET=A1b-C2d_E3f.H4...

REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000

GRAPH_API_ENDPOINT=https://graph.microsoft.com/

EXPRESS_SESSION_SECRET=6DP6v09eLiW7f1E65B8k

Ausführen und Testen einer Beispielweb-App

Sie haben Ihre Beispiel-App konfiguriert. Sie können mit der Ausführung fortfahren und testen.

  1. Führen Sie zum Starten des Servers die folgenden Befehle aus dem Projektverzeichnis aus:

    cd App
npm install
npm start

  2. Gehe zu http://localhost:3000/.

  3. Wählen Sie "Anmelden" aus, um den Anmeldevorgang zu starten.

Wenn Sie sich zum ersten Mal anmelden, werden Sie aufgefordert, Ihre Zustimmung zu geben, damit sich die Anwendung anmelden und auf Ihr Profil zugreifen kann. Nachdem Sie sich erfolgreich angemeldet haben, werden Sie zurück zur Startseite der Anwendung umgeleitet.

Funktionsweise der App

Im Beispiel wird ein Webserver auf localhost, Port 3000 gehostet. Wenn ein Webbrowser auf diese Adresse zugreift, rendert die App die Startseite. Sobald der Benutzer "Anmelden" auswählt, leitet die App den Browser über die URL, die von der MSAL Node-Bibliothek generiert wird, an den Anmeldebildschirm von Microsoft Entra um. Nach Zustimmung des Benutzers leitet der Browser den Benutzer zurück zur Startseite der Anwendung zusammen mit einer ID und einem Zugriffstoken.

Verwandte Inhalte

In dieser Schnellstartanleitung verwenden Sie eine Beispielweb-App, um Ihnen zu zeigen, wie Sie Benutzer in Ihrem externen Mandanten anmelden. Die Beispiel-App verwendet die Microsoft-Authentifizierungsbibliothek , um die Authentifizierung zu verarbeiten.

Bevor Sie beginnen, verwenden Sie den Selektor Mandantentyp auswählen oben auf dieser Seite, um den Mandantentyp auszuwählen. Die Microsoft Entra-ID stellt zwei Mandantenkonfigurationen, Mitarbeiter und externe Konfigurationen bereit. Eine konfiguration für einen Mitarbeitermandanten richtet sich an Ihre Mitarbeiter, interne Apps und andere Organisationsressourcen. Ein externer Mandant richtet sich an Ihre kundenorientierten Apps.

Voraussetzungen

Klonen oder Herunterladen einer Beispielwebanwendung

Um die Beispielanwendung zu erhalten, können Sie sie entweder von GitHub klonen oder als .zip Datei herunterladen:

  • Um das Beispiel zu klonen, öffnen Sie eine Eingabeaufforderung, und navigieren Sie zu der Stelle, an der Sie das Projekt erstellen möchten, und geben Sie den folgenden Befehl ein:

    git clone https://github.com/Azure-Samples/ms-identity-ciam-javascript-tutorial.git

  • Alternativ können Sie das Beispiel .zip Datei herunterladen und dann in einen Dateipfad extrahieren, in dem die Länge des Namens weniger als 260 Zeichen beträgt.

Installieren von Projektabhängigkeiten

  1. Öffnen Sie ein Konsolenfenster, und wechseln Sie zu dem Verzeichnis, das die Node.js Beispiel-App enthält:

    cd 1-Authentication\5-sign-in-express\App

  2. Führen Sie die folgenden Befehle aus, um App-Abhängigkeiten zu installieren:

    npm install

Konfigurieren der Beispielweb-App

Damit Sie Benutzer mit der Beispiel-App anmelden können, müssen Sie sie mit Ihren App- und Mandantendetails aktualisieren:

  1. Öffnen Sie in Ihrem Code-Editor die Datei "App\authConfig.js ".

  2. Suchen Sie den Platzhalter:

    • Enter_the_Application_Id_Here, und ersetzen Sie ihn mit der Anwendungs-ID (Client-ID) der zuvor von Ihnen registrierten Anwendung.
    • Enter_the_Tenant_Subdomain_Here und ersetzen Sie es durch die Verzeichnis-(Mandanten-)Unterdomäne. Wenn Ihre primäre Mandantendomäne z. B. contoso.onmicrosoft.comist, verwenden Sie contoso. Wenn Sie Ihren Mandantennamen nicht kennen, finden Sie weitere Informationen unter Auslesen der Details Ihres Mandanten.
    • Enter_the_Client_Secret_Here und ersetzen Sie ihn durch den Wert des App-Geheimnisses, den Sie zuvor kopiert haben.

Ausführen und Testen einer Beispielweb-App

Sie können jetzt das Beispiel Node.js Web-App testen. Sie müssen den Node.js Server starten und über Ihren Browser darauf zugreifen.http://localhost:3000

  1. Führen Sie in Ihrem Terminal den folgenden Befehl aus:

    npm start

  2. Öffnen Sie Ihren Browser, und wechseln Sie dann zu http://localhost:3000. Die Seite sollte ähnlich wie der folgende Screenshot angezeigt werden:

    Screenshot der Anmeldung bei einer Node.js-Web-App.

  3. Nachdem die Seite geladen wurde, wählen Sie "Anmelden" aus, wenn Sie dazu aufgefordert werden.

  4. Geben Sie auf der Anmeldeseite Ihre E-Mail-Adresse ein, wählen Sie Weiter aus, geben Sie Ihr Kennwort ein und wählen Sie dann Anmelden aus. Wenn Sie kein Konto besitzen, wählen Sie den Link Kein Konto? Erstellen Sie eins aus, um den Registrierungsflow zu starten.

  5. Wenn Sie die Registrierungsoption auswählen, führen Sie nach dem Ausfüllen Ihrer E-Mail, der einmaligen Kennung, des neuen Kennworts und weiterer Kontodetails den gesamten Registrierungsablauf aus. Die daraufhin angezeigte Seite sieht in etwa wie im folgenden Screenshot aus. Wenn Sie die Anmeldeoption auswählen, wird eine ähnliche Seite angezeigt.

    Screenshot der Ansichts-ID-Tokenansprüche.

  6. Wählen Sie "Abmelden " aus, um den Benutzer bei der Web-App abzumelden, oder wählen Sie "Anzeige-ID-Tokenansprüche " aus, um von Microsoft Entra zurückgegebene ID-Tokenansprüche anzuzeigen.

Funktionsweise

Wenn Benutzer den Link " Anmelden " auswählen, initiiert die App eine Authentifizierungsanforderung und leitet Benutzer an die externe Microsoft Entra-ID weiter. Auf der anmelde- oder Registrierungsseite, die angezeigt wird, sobald sich ein Benutzer erfolgreich anmeldet oder ein Konto erstellt hat, gibt die externe Microsoft Entra-ID ein ID-Token an die App zurück. Die App überprüft das ID-Token, liest die Ansprüche und gibt eine sichere Seite an die Benutzer zurück.

Wenn die Benutzer den Link " Abmelden " auswählen, löscht die App die Sitzung, und leiten Sie den Benutzer an den Microsoft Entra External ID-Abmeldeendpunkt um, um ihn darüber zu informieren, dass der Benutzer sich abgemeldet hat.

Wenn Sie eine App erstellen möchten, die dem Beispiel ähnelt, das Sie ausgeführt haben, folgen Sie den Schritten im Artikel Anmelden von Benutzern in Ihrer eigenen Node.js-Webanwendung.

Verwandte Inhalte

  • Last updated on