Konfigurieren der Authentifizierung in einer Beispiel- Node.js Webanwendung mithilfe von Azure Active Directory B2C

Von Bedeutung

Ab dem 1. Mai 2025 steht Azure AD B2C nicht mehr für neue Kunden zur Verfügung. Weitere Informationen finden Sie in unseren HÄUFIG gestellten Fragen.

In diesem Beispielartikel wird anhand einer Beispielanwendung Node.js gezeigt, wie Sie einer Node.js Webanwendung die Azure Active Directory B2C-Authentifizierung (Azure AD B2C) hinzufügen. Die Beispielanwendung ermöglicht Benutzern das Anmelden, Abmelden, Aktualisieren des Profils und Zurücksetzen von Kennwörtern mithilfe von Azure AD B2C-Benutzerflüssen. Die Beispielwebanwendung verwendet Microsoft Authentication Library (MSAL) für Node , um die Authentifizierung und Autorisierung zu verarbeiten.

In diesem Artikel führen Sie die folgenden Aufgaben aus:

  • Registrieren Sie eine Webanwendung im Azure-Portal.
  • Erstellen Sie kombinierte Anmelde- und Registrierungs-, Profilbearbeitungs- und Kennwortzurücksetzungsbenutzerflüsse für die App im Azure-Portal.
  • Aktualisieren Sie eine Beispiel-Node-Anwendung, um Ihre eigene Azure AD B2C-Anwendung und Benutzerflüsse zu verwenden.
  • Testen Sie die Beispielanwendung.

Voraussetzungen

Schritt 1: Konfigurieren von Benutzerflüssen

Wenn Benutzer versuchen, sich bei Ihrer App anzumelden, startet die App über einen Benutzerflow eine Authentifizierungsanforderung an den Autorisierungsendpunkt. Der Benutzerflow definiert und kontrolliert die Benutzeroberfläche. Nachdem Benutzer den Benutzerflow abgeschlossen haben, generiert Azure AD B2C ein Token und leitet den Benutzer anschließend wieder zurück zu Ihrer Anwendung.

Falls noch nicht geschehen, erstellen Sie einen Benutzerflow oder eine benutzerdefinierte Richtlinie. Wiederholen Sie die Schritte, um drei separate Benutzerflows wie folgt zu erstellen:

  • Kombinierter Benutzerflow für Registrierung und Anmeldung, z. B. susi. Dieser Benutzerflow unterstützt auch die Umgebung Kennwort vergessen.
  • Benutzerflow für die Profilbearbeitung, z. B. edit_profile.
  • Benutzerflow für die Kennwortzurücksetzung, z. B. reset_password.

Azure AD B2C stellt B2C_1_ dem Benutzerflownamen voran. Beispielsweise wird susi zu B2C_1_susi.

Schritt 2: Registrieren einer Webanwendung

Um die Anmeldung Ihrer Anwendung mit Azure AD B2C zu aktivieren, registrieren Sie Ihre App im Azure AD B2C-Verzeichnis. Die App-Registrierung richtet eine Vertrauensstellung zwischen der App und Azure AD B2C ein.

Während der App-Registrierung geben Sie den Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, zu dem der Benutzer von Azure AD B2C umgeleitet wird, nachdem er sich bei Azure AD B2C authentifiziert hat. Der App-Registrierungsprozess generiert eine Anwendungs-ID, die auch als Client-ID bezeichnet wird, die Ihre App eindeutig identifiziert. Nachdem Ihre App registriert wurde, verwendet Azure AD B2C sowohl die Anwendungs-ID als auch den Umleitungs-URI zum Erstellen von Authentifizierungsanforderungen.

Schritt 2.1: Registrieren der App

Führen Sie die folgenden Schritte aus, um die Web-App zu registrieren:

  1. Melden Sie sich beim Azure-Portal an.

  2. Wenn Sie Zugriff auf mehrere Mandanten haben, wählen Sie das Symbol Einstellungen im Menü oben aus, um über das Menü Verzeichnisse + Abonnements zu Ihrem Azure AD B2C-Mandanten zu wechseln.

  3. Suchen Sie im Azure-Portal nach Azure AD B2C, und wählen Sie diese Option dann aus.

  4. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.

  5. Geben Sie unter "Name" einen Namen für die Anwendung ein (z. B. webapp1).

  6. Wählen Sie unter Unterstützte Kontotypen die Option Konten in einem beliebigen Identitätsanbieter oder Organisationsverzeichnis (zum Authentifizieren von Benutzenden mit Benutzerflows) aus.

  7. Wählen Sie unter Umleitungs-URI die Option Web aus, und geben Sie http://localhost:3000/redirect in das URL-Feld ein.

  8. Aktivieren Sie unter "Berechtigungen" das Kontrollkästchen "Administratorzustimmung für openid- und offline_access-Berechtigungen erteilen".

  9. Wählen Sie Registrieren aus.

  10. Wählen Sie Übersicht aus.

  11. Notieren Sie sich die Anwendungs- bzw. Client-ID, die Sie später beim Konfigurieren der Webanwendung verwenden.

    Screenshot der Seite

Schritt 2.2: Erstellen eines geheimen Web-App-Clientschlüssels

Erstellen Sie einen geheimen Clientschlüssel für die registrierte Webanwendung. Die Webanwendung verwendet den geheimen Clientschlüssel, um seine Identität zu beweisen, wenn sie Token anfordert.

  1. Wählen Sie unter Verwalten die Option Zertifikate und Geheimnisse aus.
  2. Wählen Sie Neuen geheimen Clientschlüsselaus.
  3. Geben Sie im Feld "Beschreibung " eine Beschreibung für den geheimen Clientschlüssel ein (z. B. Clientsecret1).
  4. Wählen Sie unter Läuft ab einen Zeitraum aus, für den das Geheimnis gültig ist, und wählen Sie dann Hinzufügen aus.
  5. Notieren Sie den Wert des Geheimnisses. Dieser Wert wird in einem späteren Schritt für die Konfiguration verwendet.

Schritt 3: Abrufen der Beispielweb-App

Laden Sie die ZIP-Datei herunter, oder klonen Sie die Beispielwebanwendung von GitHub.

git clone https://github.com/Azure-Samples/active-directory-b2c-msal-node-sign-in-sign-out-webapp.git

Extrahieren Sie die Beispieldatei in einen Ordner. Sie erhalten eine Web-App mit der folgenden Verzeichnisstruktur:

active-directory-b2c-msal-node-sign-in-sign-out-webapp/
├── index.js
└── package.json
└── .env
└── views/
    └── layouts/
        └── main.hbs
    └── signin.hbs

Der views Ordner enthält Handlebars-Dateien für die Benutzeroberfläche der Anwendung.

Schritt 4: Installieren von Abhängigkeiten

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

    cd active-directory-b2c-msal-node-sign-in-sign-out-webapp

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

    npm install && npm update

Schritt 5: Konfigurieren der Web-Beispiel-App

Öffnen Sie Ihre Web-App in einem Code-Editor wie Visual Studio Code. Öffnen Sie die .env-Datei im Projektstammordner. Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Aktualisieren Sie die folgenden Eigenschaften der App-Einstellungen:

Schlüssel Wert
APP_CLIENT_ID Die Anwendungs-ID (Client-ID) für die Web-App, die Sie in Schritt 2.1 registriert haben.
APP_CLIENT_SECRET Der geheime Clientschlüsselwert für die Web-App, die Sie in Schritt 2.2 erstellt haben
SIGN_UP_SIGN_IN_POLICY_AUTHORITY Dies ist die Autorität für den Benutzerflow Anmelden und Registrieren (z. B. https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>). Ersetzen Sie <your-tenant-name> durch den Namen Ihres Mandanten und <sign-in-sign-up-user-flow-name> mit dem Namen Ihres Anmelde- und Registrierungsbenutzerablaufs, z. B. B2C_1_susi. Erfahren Sie, wie Sie Ihren Mandantennamen abrufen.
RESET_PASSWORD_POLICY_AUTHORITY Dies ist die Autorität für den Benutzerflow Kennwort zurücksetzen (z. B. https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>). Ersetzen Sie <your-tenant-name> durch den Namen Ihres Mandanten und <reset-password-user-flow-name> durch den Namen des Benutzerflusses zum Zurücksetzen des Kennworts, z. B. B2C_1_reset_password_node_app.
EDIT_PROFILE_POLICY_AUTHORITY Dies ist die Autorität für den Benutzerflow Profilbearbeitung (z. B. https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>). Ersetzen Sie <your-tenant-name> durch den Namen Ihres Mandanten und <reset-password-user-flow-name> mit dem Namen des Benutzerflusses zum Zurücksetzen des Kennworts, wie zum Beispiel B2C_1_edit_profile_node_app.
AUTHORITY_DOMAIN Die Azure AD B2C-Autoritätsdomäne, wie https://<your-tenant-name>.b2clogin.com. Ersetzen Sie durch <your-tenant-name> den Namen Ihres Mandanten.
APP_REDIRECT_URI Dies ist der Anwendungsumleitungs-URI, an dem Azure AD B2C Authentifizierungsantworten (Token) zurückgibt. Er entspricht dem Umleitungs-URI , den Sie beim Registrieren Ihrer App im Azure-Portal festgelegt haben, und muss öffentlich zugänglich sein. Behalten Sie den Wert wie folgt bei.
LOGOUT_ENDPOINT Dies ist der Azure AD B2C-Abmeldeendpunkt (z. B. https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000). Ersetzen Sie <your-tenant-name> durch den Namen Ihres Mandanten und <sign-in-sign-up-user-flow-name> mit dem Namen Ihres Anmelde- und Registrierungsbenutzerablaufs, z. B. B2C_1_susi.

Die endgültige Konfigurationsdatei sollte wie im folgenden Beispiel aussehen:

#HTTP port
SERVER_PORT=3000
#web apps client ID
APP_CLIENT_ID=<You app client ID here>
#session secret
SESSION_SECRET=sessionSecretHere
#web app client secret
APP_CLIENT_SECRET=<Your app client secret here>
#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<reset-password-user-flow-name>
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<profile-edit-user-flow-name>
#B2C authority domain
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<sign-in-sign-up-user-flow-name>/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Ausführen der Beispielweb-App

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

  1. Führen Sie in Ihrem Terminal den folgenden Code aus, um den Node.js Webserver zu starten:

    node index.js

  2. Wechseln Sie in Ihrem Browser zu http://localhost:3000. Die Seite sollte mit einem Anmeldebutton angezeigt werden.

    Screenshot einer Anmeldeseite einer Node.js-Webanwendung.

Testen der Anmeldung

  1. Nachdem die Seite mit der Schaltfläche " Anmelden " geladen wurde, wählen Sie "Anmelden" aus. Sie werden aufgefordert, sich anzumelden.

  2. Geben Sie Ihre Anmeldeinformationen ein, z. B. E-Mail-Adresse und Kennwort. Wenn Sie nicht über ein Konto verfügen, wählen Sie "Jetzt registrieren " aus, um ein Konto zu erstellen. Nachdem Sie sich erfolgreich angemeldet oder eingeloggt haben, sollte die folgende Seite angezeigt werden, auf der der Anmeldestatus angezeigt wird.

    Screenshot zeigt den Status der Web-App-Anmeldung.

Testen der Profilbearbeitung

  1. Nachdem Sie sich angemeldet haben, wählen Sie "Profil bearbeiten" aus.
  2. Geben Sie nach Bedarf neue Änderungen ein, und wählen Sie dann "Weiter" aus. Die Seite mit dem Anmeldestatus mit den neuen Änderungen sollte angezeigt werden (z. B. Vorname).

Test der Passwort-Rücksetzung

  1. Nachdem Sie sich angemeldet haben, wählen Sie "Kennwort zurücksetzen" aus.
  2. Im nächsten angezeigten Dialogfeld können Sie den Vorgang abbrechen, indem Sie "Abbrechen" auswählen. Geben Sie alternativ Ihre E-Mail-Adresse ein, und wählen Sie dann "Überprüfungscode senden" aus. Sie erhalten einen Überprüfungscode für Ihr E-Mail-Konto. Kopieren Sie den Überprüfungscode in Ihre E-Mail, geben Sie ihn in das Dialogfeld "Kennwortzurücksetzung" ein, und wählen Sie dann " Code überprüfen" aus.
  3. Wählen Sie Weiter aus.
  4. Geben Sie Ihr neues Kennwort ein, bestätigen Sie es, und wählen Sie dann "Weiter" aus. Sie sollten die Seite sehen, auf der der Anmeldestatus angezeigt wird.

Testen der Abmeldung

Nachdem Sie sich angemeldet haben, wählen Sie "Abmelden" aus. Die Seite mit einer Anmeldeschaltfläche sollte angezeigt werden.

Nächste Schritte

  • Last updated on