Freigeben über

Konfigurieren der Authentifizierung in einem Beispiel Node.js Web-API 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 Artikel erfahren Sie, wie Sie ein Beispiel Node.js Webanwendung konfigurieren, um ein Beispiel Node.js Web-API aufzurufen. Die Web-API muss von Azure AD B2C selbst geschützt werden. In diesem Setup ruft eine Web-App, z. B. App-ID: 1 , eine Web-API auf, z. B. App-ID: 2. Benutzer authentifizieren sich bei der Web-App, um ein Zugriffstoken abzurufen, das dann zum Aufrufen einer geschützten Web-API verwendet wird.

Überblick

Die tokenbasierte Authentifizierung stellt sicher, dass Anforderungen an eine Web-API von einem gültigen Zugriffstoken begleitet werden.

Die Web-App schließt die folgenden Ereignisse ab:

  • Es authentifiziert Benutzer mit Azure AD B2C.

  • Sie erwirbt ein Zugriffstoken mit den erforderlichen Berechtigungen (Bereichen) für den Web-API-Endpunkt.

  • Sie übergibt das Zugriffstoken als Bearertoken im Autorisierungsheader der HTTP-Anforderung. Dabei wird folgendes Format verwendet:

Authorization: Bearer <token>

Die Web-API führt die folgenden Aktionen aus:

  • Es liest das Bearertoken aus dem Autorisierungsheader in der HTTP-Anforderung.

  • Es überprüft das Token.

  • Sie überprüft die Berechtigungen (Bereiche) im Token.

  • Sie antwortet auf die HTTP-Anforderung. Wenn das Token ungültig ist, antwortet der Web-API-Endpunkt mit einem 401 Unauthorized HTTP-Fehler.

Übersicht über die App-Registrierung

Damit Ihre App sich mit Azure AD B2C anmelden und eine Web-API aufrufen kann, müssen Sie zwei Anwendungen im Azure AD B2C-Verzeichnis registrieren.

  • Durch die Webanwendungsregistrierung kann sich Ihre App bei Azure AD B2C anmelden. Während der Registrierung geben Sie den Umleitungs-URI an. Der Umleitungs-URI ist der Endpunkt, zu dem Benutzer nach Abschluss der Authentifizierung von Azure AD B2C umgeleitet werden. Beim App-Registrierungsprozess wird eine Anwendungs-ID generiert, die auch als Client-ID bezeichnet wird und Ihre App eindeutig identifiziert. Außerdem generieren Sie einen geheimen Clientschlüssel für Ihre App. Ihre App verwendet den geheimen Clientschlüssel, um einen Autorisierungscode für ein Zugriffstoken auszutauschen.

  • Durch die Web-API-Registrierung kann Ihre App eine sichere Web-API aufrufen. Die Registrierung umfasst die Web-API-Bereiche. Die Bereiche bieten eine Möglichkeit, Berechtigungen für geschützte Ressourcen wie Ihre Web-API zu verwalten. Sie erteilen der Webanwendung Berechtigungen für die Bereiche der Web-API. Wenn ein Zugriffstoken angefordert wird, gibt Ihre App im Bereichsparameter der Anforderung die gewünschten Berechtigungen an.

Die Anwendungsregistrierungen und die Anwendungsarchitektur werden im folgenden Diagramm beschrieben:

Diagramm der Anwendungsregistrierungen und der Anwendungsarchitektur für eine App mit Web A P I.

Voraussetzungen

Schritt 1: Konfigurieren Ihres Benutzerflows

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 Ihrer Web-App und API

In diesem Schritt erstellen Sie die Web- und Web-API-Anwendungsregistrierungen und geben die Bereiche Ihrer Web-API an.

Schritt 2.1 Registrieren der Web-API-Anwendung

Führen Sie die folgenden Schritte aus, um die Web-API-App-Registrierung (App-ID: 2) zu erstellen:

  1. Melden Sie sich beim Azure-Portal an.

  2. Stellen Sie sicher, dass Sie das Verzeichnis verwenden, das Ihren Azure AD B2C-Mandanten enthält. Wählen Sie auf der Symbolleiste des Portals das Symbol Verzeichnisse und Abonnements aus.

  3. Suchen Sie auf der Seite Portaleinstellungen > Verzeichnisse und Abonnements das Azure AD B2C-Verzeichnis in der Liste Verzeichnisname, und klicken Sie dann auf Wechseln.

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

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

  6. Geben Sie für Name einen Namen für die Anwendung ein, z. B. my-api1. Behalten Sie die Standardwerte für Umleitungs-URI und Unterstützte Kontotypen bei.

  7. Wählen Sie Registrieren aus.

  8. Wählen Sie nach Abschluss der App-Registrierung Übersichtaus.

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

    Screenshot: Abrufen einer Web-API-Anwendungs-ID.

Schritt 2.2: Konfigurieren von Bereichen

  1. Wählen Sie die von Ihnen erstellte Anwendung my-api1 (App-ID: 2) aus, um deren Seite Übersicht zu öffnen.

  2. Wählen Sie unter Verwalten die Option Eine API verfügbar machen aus.

  3. Wählen Sie neben Anwendungs-ID-URI den Link Festlegen aus. Ersetzen Sie den Standardwert (GUID) durch einen eindeutigen Namen, z. B. tasks-api, und wählen Sie dann Speichern aus.

    Wenn Ihre Webanwendung ein Zugriffstoken für die Web-API anfordert, sollte sie diesen URI als Präfix für jeden Bereich hinzufügen, den Sie für die API definieren.

  4. Wählen Sie unter Durch diese API definierte Bereiche die Option Bereich hinzufügen aus.

  5. So erstellen Sie einen Bereich, der Lesezugriff auf die API festlegt:

    1. Geben Sie für Bereichsnametasks.read ein.
    2. Geben Sie für Anzeigename der AdministratoreinwilligungLesezugriff auf Aufgaben-API ein.
    3. Geben Sie für Beschreibung der AdministratoreinwilligungLässt Lesezugriff auf die Aufgaben-API zu ein.

  6. Wählen Sie "Bereich hinzufügen" aus.

  7. Wählen Sie Bereich hinzufügen aus, und geben Sie dann einen Bereich ein, der den Schreibzugriff auf die API festlegt:

    1. Geben Sie für Bereichsnametasks.write ein.
    2. Geben Sie für Anzeigename der AdministratoreinwilligungSchreibzugriff auf Aufgaben-API ein.
    3. Geben Sie für Beschreibung der AdministratoreinwilligungLässt Schreibzugriff auf die Aufgaben-API zu ein.

  8. Wählen Sie "Bereich hinzufügen" aus.

Schritt 2.3: Registrieren der Web-App

Gehen Sie wie folgt vor, um die SPA-Registrierung zu erstellen:

  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 nach Azure AD B2C, und wählen Sie es aus.
  4. Wählen Sie App-Registrierungen aus, und wählen Sie dann Registrierung einer neuen Anwendung aus.
  5. Geben Sie einen Namen für die Anwendung ein (z. B. App-ID: 1).
  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 Textfeld für die URL ein.
  8. Aktivieren Sie unter Berechtigungen das Kontrollkästchen Administratoreinwilligung für OpenID- und Offlinezugriffsberechtigungen erteilen.
  9. Wählen Sie Registrieren aus.

Schritt 2.4: Erstellen eines geheimen Clientschlüssels

  1. Wählen Sie auf der Seite "Azure AD B2C – App-Registrierungen " die anwendung aus, die Sie erstellt haben, z. B. App-ID: 1.
  2. Wählen Sie im linken Menü unter "Verwalten" die Option "Zertifikate und Geheime Schlüssel" aus.
  3. Wählen Sie Neuen geheimen Clientschlüsselaus.
  4. Geben Sie im Feld Beschreibung eine Beschreibung für das Clientgeheimnis ein. Beispielsweise clientsecret1.
  5. 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.
  6. Notieren Sie sich den Wert des Geheimnisses, das in Ihrem Clientanwendungscode verwendet werden soll. Dieser geheime Wert wird nicht erneut angezeigt, nachdem Sie diese Seite verlassen haben. Sie verwenden diesen Wert als Anwendungsgeheimnis im Code Ihrer Anwendung.

Schritt 2.5: Erteilen von API-Berechtigungen für die Web-App

Führen Sie die folgenden Schritte aus, um Ihrer App (App-ID: 1) Berechtigungen zu erteilen:

  1. Wählen Sie App-Registrierungen und dann die von Ihnen erstellte App (App-ID: 1) aus.

  2. Wählen Sie unter Verwaltendie Option API-Berechtigungenaus.

  3. Wählen Sie unter Konfigurierte Berechtigungen die Option Berechtigung hinzufügen aus.

  4. Wählen Sie die Registerkarte Meine APIs aus.

  5. Wählen Sie die API aus, für die der Webanwendung Zugriff gewährt werden soll (App-ID: 2). Geben Sie z. B. my-api1 ein.

  6. Erweitern Sie unter Berechtigung den Eintrag Aufgaben, und wählen Sie die zuvor definierten Bereiche aus (Beispiel: tasks.read und tasks.write).

  7. Wählen Sie "Berechtigungen hinzufügen" aus.

  8. Wählen Sie Administratorzustimmung erteilen für<Name Ihres Mandanten> aus.

  9. Wählen Sie Ja aus.

  10. Wählen Sie Aktualisieren aus, und vergewissern Sie sich, dass für beide Bereiche unter Status der Status Gewährt für... angezeigt wird.

  11. Wählen Sie in der Liste Konfigurierte Berechtigungen Ihren Bereich aus, und kopieren Sie dann den vollständigen Namen des Bereichs.

    Screenshot: Bereich „Konfigurierte Berechtigungen“ mit erteilten Lesezugriffsberechtigungen.

Schritt 3: Abrufen des Web-App-Beispielcodes

In diesem Beispiel wird veranschaulicht, wie eine Webanwendung Azure AD B2C für die Benutzeranmeldung und -anmeldung verwenden kann. Anschließend bezieht die App ein Zugriffstoken und ruft eine geschützte Web-API auf.

Zum Abrufen des Web-App-Beispielcodes können Sie eine der folgenden Aktionen ausführen:

  • Laden Sie eine ZIP-Datei herunter. Sie extrahieren die ZIP-Datei, um die Beispielweb-App abzurufen.

  • Klonen Sie das Beispiel auf GitHub, indem Sie den folgenden Befehl ausführen:

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

Schritt 3.1: Installieren von App-Abhängigkeiten

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

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api

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

        npm install && npm update

Schritt 3.2: Konfigurieren der Beispielweb-App

Öffnen Sie Ihre Web-App in einem Code-Editor wie Visual Studio Code. Öffnen Sie unter dem call-protected-api Ordner die .env Datei. Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter. Aktualisieren Sie die folgenden App-Einstellungen:

Schlüssel Wert
APP_CLIENT_ID Die Anwendungs-ID (Client-ID) für die Web-App, die Sie in Schritt 2.3 registriert haben.
APP_CLIENT_SECRET Der geheime Clientschlüsselwert für die Web-App, die Sie in Schritt 2.4 erstellt haben
SIGN_UP_SIGN_IN_POLICY_AUTHORITY Die autoritative Stelle des Benutzerflows Anmelden und Registrieren, die Sie in Schritt 1 erstellt haben, 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> durch den Namen Ihres Anmelde- und Registrierungsbenutzerablaufs, wie B2C_1_susi. Erfahren Sie, wie Sie Ihren Mandantennamen abrufen.
AUTHORITY_DOMAIN Die Azure AD B2C-Autoritätsdomäne, wie z. B. https://<your-tenant-name>.b2clogin.com. Ersetzen Sie durch <your-tenant-name> den Namen Ihres Mandanten.
APP_REDIRECT_URI Der Umleitungs-URI der Anwendung, bei dem Azure AD B2C Authentifizierungsantworten (Token) zurückgibt. Sie entspricht dem Umleitungs-URI , den Sie beim Registrieren Ihrer App im Azure-Portal festgelegt haben. Diese URL muss öffentlich zugänglich sein. Behalten Sie den Wert wie folgt bei.
LOGOUT_ENDPOINT 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> durch den Namen Ihres Anmelde- und Registrierungsbenutzerablaufs, wie B2C_1_susi.

Nach dem Update sollte die endgültige Konfigurationsdatei dem folgenden Beispiel ähneln:

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>
#tenant name
TENANT_NAME=<your-tenant-name>
#B2C sign up and sign in user flow/policy name and 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>
AUTHORITY_DOMAIN=https://<your-tenant-name>.b2clogin.com
#client redorect url
APP_REDIRECT_URI=http://localhost:3000/redirect
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

Schritt 4: Abrufen des Web-API-Beispielcodes

Nachdem Sie die Web-API registriert und die zugehörigen Bereiche definiert haben, können Sie den Web-API-Code für die Verwendung mit Ihrem Azure AD B2C-Mandanten konfigurieren.

Führen Sie einen der folgenden Schritte aus, um den Beispielcode der Web-API abzurufen:

Schritt 4.1 Aktualisieren der Web-API

  1. Öffnen Sie die Datei config.json in einem Code-Editor.

  2. Ändern Sie die Variablenwerte mit dem Benutzerablauf und der Anwendungsregistrierung, die Sie zuvor erstellt haben:

    • Verwenden Sie für tenantName den Namen Ihres Mandanten, z. B. fabrikamb2c.

    • Verwenden Sie für clientIDdie Web-API, die Sie in Schritt 2.1 erstellt haben, die Anwendungs-ID (Client-ID).

    • Verwenden Sie für policyName den Namen des Anmelde- und Registrierungs-Benutzerflusses, den Sie in Schritt 1 erstellt haben, beispielsweise B2C_1_susi.

    Nach dem Update sollte Ihr Code dem folgenden Beispiel ähneln:

    config.json:

    {
    "credentials": {
        "tenantName": "fabrikamb2c",
        "clientID": "Enter_the_Application_Id_Here"
    },
    "policies": {
        "policyName": "B2C_1_susi"
    },
    "resource": {
        "scope": ["tasks.read"]
    },
    "metadata": {
        "authority": "login.microsoftonline.com",
        "discovery": ".well-known/openid-configuration",
        "version": "v2.0"
    },
    "settings": {
        "isB2C": true,
        "validateIssuer": true,
        "passReqToCallback": false,
        "loggingLevel": "info"
    }
}

Schritt 4.2: Installieren von App-Abhängigkeiten

  1. Öffnen Sie ein Konsolenfenster, und wechseln Sie zum Verzeichnis mit dem Node.js-Web-API-Beispiel. Beispiel:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Führen Sie die folgenden Befehle aus:

    npm install && npm update

Schritt 5: Ausführen der Web-App und der API

Jetzt können Sie den bereichsbezogenen Zugriff der Webanwendung auf die Web-API testen. Führen Sie sowohl die Node.js-Web-API als auch die Beispielwebanwendung auf Ihrem lokalen Computer aus.

  1. Navigieren Sie in Ihrem Terminal zur Beispiel-Web-API und starten Sie den Node.js API-Server. Beispiel: '

    cd active-directory-b2c-javascript-nodejs-webapi
node index.js

    Im Konsolenfenster wird die Portnummer angezeigt, unter der die Anwendung gehostet wird.

    Listening on port 5000...

  2. Navigieren Sie in einer anderen Terminalinstanz zur Beispiel-Web-App, und führen Sie den Node.js-Web-App-Server aus. Beispiel:

        cd active-directory-b2c-msal-node-sign-in-sign-out-webapp/call-protected-api
    node index.js

    Im Konsolenfenster wird die Portnummer angezeigt, unter der die Anwendung gehostet wird.

    Msal Node Auth Code Sample app listening on port !3000

  3. Wechseln Sie in Ihrem Browser zu http://localhost:3000. Die Seite sollte mit zwei Schaltflächen angezeigt werden: Anmelden, um DIE GESCHÜTZTE API aufzurufen , oder rufen Sie die ANONYME API auf.

    Webseite zur Anmeldung zum Zugriff auf geschützte APIs.

  4. Wählen Sie zum Aufrufen der anonymen API die Option Oder die ANONYME API aufrufen aus. Die API antwortet mit EINEM JSON-Objekt mit date Schlüssel wie:

        {"date":"2022-01-27T14:21:22.681Z"}

    Die anonyme API ist ein nicht geschützter Endpunkt in der Web-API. Sie benötigen kein Zugriffstoken, um darauf zuzugreifen.

  5. Um den geschützten API-Endpunkt aufzurufen, wählen Sie die Schaltfläche " Anmelden" aus, um die GESCHÜTZTE API aufzurufen . Sie werden aufgefordert, sich anzumelden.

  6. 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 registriert haben, sollte die folgende Seite mit der Schaltfläche "PROTECTED API aufrufen" angezeigt werden.

    Webseite für die Registrierung zum Aufrufen der geschützten API.

  7. Um die geschützte API aufzurufen, wählen Sie die Schaltfläche "GESCHÜTZTE API aufrufen " aus. Die API antwortet mit einem JSON-Objekt mit einem name Schlüssel, dessen Wert der Nachname Ihres Kontos ist, z. B.:

        {"name": "User 1"}

Nächste Schritte

Erfahren Sie, wie Sie die Authentifizierung in Ihrer eigenen Web-API mithilfe von Azure AD B2C aktivieren.

  • Last updated on