Freigeben über

Aktivieren von Authentifizierungsoptionen in einer Node.js Web-App 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 wird beschrieben, wie Sie die Azure Active Directory B2C(Azure AD B2C)-Authentifizierung für Ihre Node.js Webanwendung aktivieren, anpassen und verbessern.

Bevor Sie beginnen, ist es wichtig, sich mit den folgenden Artikeln vertraut zu machen:

Verwenden einer benutzerdefinierten Domäne

Mithilfe einer benutzerdefinierten Domäne können Sie die Authentifizierungs-URL vollständig kennzeichnen. Aus Benutzerperspektive verbleiben Benutzer während des Authentifizierungsprozesses auf Ihrer Domäne, anstatt an den Azure AD B2C b2clogin.com Domänennamen umgeleitet zu werden.

Um alle Verweise auf "b2c" in der URL zu entfernen, können Sie auch Ihren B2C-Mandantennamen, contoso.onmicrosoft.com, in der Authentifizierungsanforderungs-URL durch Ihre Mandanten-ID-GUID ersetzen. Sie können zum Beispiel https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ zu https://account.contosobank.co.uk/<tenant ID GUID>/ ändern.

Wenn Sie eine benutzerdefinierte Domäne und Ihre Mandanten-ID in der Authentifizierungs-URL verwenden möchten, befolgen Sie die Anweisungen in "Benutzerdefinierte Domänen aktivieren". Unter dem Projektstammordner öffnen Sie die Datei .env . Diese Datei enthält Informationen zu Ihrem Azure AD B2C-Identitätsanbieter.

Gehen Sie in der env-Datei wie folgt vor:

  • Ersetzen Sie alle Instanzen ihrer tenant-name.b2clogin.com benutzerdefinierten Domäne. Ersetzen Sie z. B. tenant-name.b2clogin.com, in login.contoso.com.
  • Ersetzen Sie alle Instanzen tenant-name.onmicrosoft.com ihrer Mandanten-ID. Weitere Informationen finden Sie unter Verwenden der Mandanten-ID.

Die folgende Konfiguration zeigt die App-Einstellungen vor der Änderung:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Die folgende Konfiguration zeigt die App-Einstellungen nach der Änderung:

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

Den Anmeldenamen im Voraus ausfüllen

Während einer Anmeldebenutzerreise richtet sich Ihre App möglicherweise an einen bestimmten Benutzer. Wenn eine App auf einen Benutzer ausgerichtet ist, kann sie in der Autorisierungsanforderung den login_hint Abfrageparameter mit dem Anmeldenamen des Benutzers angeben. Azure AD B2C füllt automatisch den Anmeldenamen auf, und der Benutzer muss nur das Kennwort angeben.

Gehen Sie wie folgt vor, um den Anmeldenamen vorab aufzufüllen:

  1. Wenn Sie eine benutzerdefinierte Richtlinie verwenden, fügen Sie den erforderlichen Eingabeanspruch hinzu, wie unter "Einrichten der direkten Anmeldung" beschrieben.
  2. Suchen Sie das authCodeRequest Objekt, und legen loginHint Sie das Attribut mit dem Anmeldehinweis fest.

Die folgenden Codeausschnitte veranschaulichen, wie der Anmeldehinweisparameter übergeben wird. Es wird als Attributwert verwendet bob@contoso.com .

authCodeRequest.loginHint = "bob@contoso.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

Vorauswahl eines Identitätsanbieters

Wenn Sie die Anmeldereise für Ihre Anwendung so konfiguriert haben, dass sie soziale Konten wie Facebook, LinkedIn oder Google enthält, können Sie den domain_hint Parameter angeben. Dieser Abfrageparameter gibt Azure AD B2C einen Hinweis auf den sozialen Identitätsanbieter, der für die Anmeldung verwendet werden soll. Wenn die Anwendung beispielsweise angibt domain_hint=facebook.com, wechselt der Anmeldefluss direkt zur Facebook-Anmeldeseite.

Gehen Sie wie folgt vor, um Benutzer an einen externen Identitätsanbieter umzuleiten:

  1. Überprüfen Sie den Domänennamen Ihres externen Identitätsanbieters. Weitere Informationen finden Sie unter Umleitung der Anmeldung an einen Anbieter für soziale Netzwerke.
  2. Suchen Sie das authCodeRequest Objekt, und legen domainHint Sie das Attribut mit dem entsprechenden Domänenhinweis fest.

Die folgenden Codeausschnitte veranschaulichen, wie der Parameter "domain hint" übergeben wird. Es verwendet facebook.com als Attributwert.

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

Angeben der Benutzeroberflächensprache

Die Sprachanpassung in Azure AD B2C ermöglicht Es Ihrem Benutzerfluss, eine Vielzahl von Sprachen an die Anforderungen Ihrer Kunden anzupassen. Weitere Informationen finden Sie unter Sprachanpassung.

Gehen Sie wie folgt vor, um die bevorzugte Sprache festzulegen:

  1. Konfigurieren sie die Sprachanpassung.
  2. Suchen Sie das authCodeRequest Objekt, und legen Sie das Attribut mit dem entsprechenden zusätzlichen extraQueryParameters Parameter festui_locales.

Die folgenden Codeausschnitte veranschaulichen, wie der ui_locales Parameter übergeben wird. Es wird als Attributwert verwendet es-es .

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Mit benutzerdefinierten Richtlinien können Sie einen benutzerdefinierten Abfragezeichenfolgenparameter übergeben. Ein gutes Anwendungsfallbeispiel ist, wenn Sie den Seiteninhalt dynamisch ändern möchten.

Gehen Sie wie folgt vor, um einen benutzerdefinierten Abfragezeichenfolgenparameter zu übergeben:

  1. Konfigurieren Sie das ContentDefinitionParameters-Element .
  2. Suchen Sie das authCodeRequest Objekt, und legen Sie das Attribut mit dem entsprechenden zusätzlichen Parameter fest extraQueryParameters .

Die folgenden Codeausschnitte veranschaulichen, wie der campaignId benutzerdefinierte Abfragezeichenfolgenparameter übergeben wird. Es wird als Attributwert verwendet germany-promotion .

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

Übergeben eines ID-Tokenhinweises

Eine Anwendung einer vertrauenden Seite kann ein eingehendes JSON-Webtoken (JWT) als Teil der OAuth2-Autorisierungsanforderung senden. Das eingehende Token ist ein Hinweis auf den Benutzer oder die Autorisierungsanforderung. Azure AD B2C überprüft das Token und extrahiert dann den Anspruch.

Gehen Sie wie folgt vor, um einen ID-Tokenhinweis in die Authentifizierungsanforderung einzuschließen:

  1. Definieren Sie in Ihrer benutzerdefinierten Richtlinie ein ID-Tokenhinweis technisches Profil.
  2. Suchen Sie das authCodeRequest Objekt, und legen Sie das Attribut mit dem entsprechenden zusätzlichen extraQueryParameters Parameter festid_token_hint.

Die folgenden Codeausschnitte veranschaulichen, wie ein ID-Tokenhinweis definiert wird:

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

Konfigurieren der Protokollierung

Die MSAL-Bibliothek generiert Protokollmeldungen, die bei der Diagnose von Problemen helfen können. Die App kann die Protokollierung konfigurieren. Die App kann Ihnen auch eine benutzerdefinierte Kontrolle über die Detailebene und darüber geben, ob persönliche und organisatorische Daten protokolliert werden.

Es wird empfohlen, einen MSAL-Protokollierungsrückruf zu erstellen und Benutzern die Möglichkeit zu bieten, Protokolle zu übermitteln, wenn Authentifizierungsprobleme auftreten. MSAL stellt die folgenden Ebenen der Protokollierungsdetails bereit:

  • Fehler: Es ist ein Fehler aufgetreten, und ein Fehler wurde generiert. Diese Ebene wird zum Debuggen und Identifizieren von Problemen verwendet.
  • Warnung: Es ist nicht notwendigerweise ein Fehler oder Misserfolg aufgetreten, aber die Informationen sind für Diagnosezwecke und zur Lokalisierung von Problemen vorgesehen.
  • Info: MSAL protokolliert Ereignisse, die für Informationszwecke und nicht unbedingt für das Debuggen vorgesehen sind.
  • Ausführlich: Dies ist die Standardstufe. MSAL protokolliert die vollständigen Details des Bibliotheksverhaltens.

Standardmäßig erfasst der MSAL-Logger keine persönlichen oder organisatorischen Daten. Die Bibliothek bietet Ihnen die Möglichkeit, die Protokollierung personenbezogener und organisatorischer Daten zu aktivieren, wenn Sie dies tun möchten.

Konfigurieren Sie zum Konfigurieren der Protokollierung in index.jsdie folgenden Schlüssel:

  • logLevel: Zur Angabe des Protokolliergrads. Mögliche Werte: Error, Warning, , Infound Verbose.
  • piiLoggingEnabled ermöglicht die Eingabe personenbezogener Daten. Mögliche Werte: true oder false.

Der folgende Codeausschnitt veranschaulicht das Konfigurieren der MSAL-Protokollierung:

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

Nächste Schritte

Erfahren Sie mehr über MSAL.js Konfigurationsoptionen.