Freigeben über

Konfigurieren von Authentifizierungsoptionen in einer Angular-Anwendung 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 Angular Single-Page-Anwendung (SPA) anpassen und verbessern können.

Voraussetzungen

Machen Sie sich mit dem Artikel "Konfigurieren der Authentifizierung in einem Angular SPA " oder "Aktivieren der Authentifizierung" in Ihrem eigenen Angular SPA vertraut.

Anmelde- und Abmeldeverhalten

Sie können Ihre Einzelseitenanwendung so konfigurieren, dass Sie Benutzer mit MSAL.js auf zwei Arten anmelden:

  • Popupfenster: Die Authentifizierung erfolgt in einem Popupfenster, und der Status der Anwendung wird beibehalten. Verwenden Sie diesen Ansatz, wenn Sie nicht möchten, dass Benutzer während der Authentifizierung von Ihrer Anwendungsseite wegkommen. Es gibt jedoch bekannte Probleme mit Popupfenstern in Internet Explorer.
    • Um sich mit Popupfenstern anzumelden, verwenden Sie in der src/app/app.component.ts Klasse die loginPopup Methode.
    • Legen Sie in der src/app/app.module.ts Klasse das interactionType Attribut auf InteractionType.Popup.
    • Um sich mit Popupfenstern abzumelden, verwenden Sie in der src/app/app.component.ts Klasse die logoutPopup Methode. Sie können auch logoutPopup konfigurieren, um das Hauptfenster auf eine andere Seite umzuleiten, z. B. die Startseite oder die Anmeldeseite, nachdem die Abmeldung abgeschlossen ist, indem Sie mainWindowRedirectUri als Teil der Anforderung übergeben.
  • Umleitung: Der Benutzer wird zu Azure AD B2C umgeleitet, um den Authentifizierungsfluss abzuschließen. Verwenden Sie diesen Ansatz, wenn Benutzer Browsereinschränkungen oder Richtlinien haben, bei denen Popupfenster deaktiviert sind.
    • Um sich mit Umleitung anzumelden, verwenden Sie in der src/app/app.component.ts-Klasse die loginRedirect-Methode.
    • Legen Sie in der src/app/app.module.ts Klasse das interactionType Attribut auf InteractionType.Redirect.
    • Um sich mit Umleitung abzumelden, verwenden Sie in der src/app/app.component.ts-Klasse die logoutRedirect-Methode. Konfigurieren Sie den URI, zu dem nach einer Abmeldung umgeleitet werden soll, indem Sie postLogoutRedirectUri festlegen. Sie sollten diesen URI als Umleitungs-URI in Ihrer Anwendungsregistrierung hinzufügen.

Im folgenden Beispiel wird veranschaulicht, wie Sie sich anmelden und abmelden:

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

Die MSAL Angular-Bibliothek verfügt über drei Anmeldeflüsse: interaktive Anmeldung (bei der ein Benutzer die Anmeldeschaltfläche auswählt), MSAL Guard und MSAL Interceptor. Die Konfigurationen MSAL Guard und MSAL Interceptor werden wirksam, wenn ein Benutzer versucht, ohne ein gültiges Zugriffstoken auf eine geschützte Ressource zuzugreifen. In solchen Fällen erzwingt die MSAL-Bibliothek, dass sich der Benutzer anmeldet.

Die folgenden Beispiele veranschaulichen, wie MSAL Guard und MSAL Interceptor für die Anmeldung mit einem Popupfenster oder einer Umleitung konfiguriert werden:

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

Vorabausfüllen des Anmeldenamens

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 auszufüllen:

  1. Wenn Sie eine benutzerdefinierte Richtlinie verwenden, fügen Sie den erforderlichen Eingabeanspruch hinzu, wie unter "Einrichten der direkten Anmeldung" beschrieben.
  2. Erstellen oder Verwenden eines vorhandenen PopupRequest oder RedirectRequest MSAL-Konfigurationsobjekts.
  3. Legen Sie das loginHint Attribut mit dem entsprechenden Anmeldehinweis fest.

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

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. Erstellen oder Verwenden eines vorhandenen PopupRequest oder RedirectRequest MSAL-Konfigurationsobjekts.
  3. Legen Sie das domainHint Attribut mit dem entsprechenden Domänenhinweis fest.

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

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. Erstellen oder Verwenden eines vorhandenen PopupRequest oder RedirectRequest MSAL-Konfigurationsobjekts mit extraQueryParameters Attributen.
  3. Fügen Sie den ui_locales Parameter mit dem entsprechenden Sprachcode zu den extraQueryParameters Attributen hinzu.

Die folgenden Codeausschnitte veranschaulichen, wie der Parameter "domain hint" übergeben wird. Sie verwenden es-es als Attributwert.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Ü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. Erstellen oder Verwenden eines vorhandenen PopupRequest oder RedirectRequest MSAL-Konfigurationsobjekts mit extraQueryParameters Attributen.
  3. Fügen Sie den benutzerdefinierten Abfragezeichenfolgenparameter hinzu, z. B. campaignId. Legen Sie den Parameterwert fest.

Die folgenden Codeausschnitte veranschaulichen, wie ein benutzerdefinierter Abfragezeichenfolgenparameter übergeben wird. Sie verwenden germany-promotion als Attributwert.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

Ü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 das technische Profil eines ID-Tokenhinweiss.
  2. Erstellen oder Verwenden eines vorhandenen PopupRequest oder RedirectRequest MSAL-Konfigurationsobjekts mit extraQueryParameters Attributen.
  3. Fügen Sie den id_token_hint Parameter mit der entsprechenden Variable hinzu, die das ID-Token speichert.

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

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. Zum Beispiel können Sie https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ in https://account.contosobank.co.uk/<tenant ID GUID>/ ändern.

Wenn Sie Ihre benutzerdefinierte Domäne für Ihre Mandanten-ID in der Authentifizierungs-URL verwenden möchten, befolgen Sie die Anweisungen unter "Benutzerdefinierte Domänen aktivieren". Öffnen Sie das src/app/auth-config.ts MSAL-Konfigurationsobjekt, und ändern Sie authorities und knownAuthorities so, dass sie Ihren benutzerdefinierten Domänennamen und Ihre Mandanten-ID verwenden.

Das folgende JavaScript zeigt das MSAL-Konfigurationsobjekt vor der Änderung an:

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Das folgende JavaScript zeigt das MSAL-Konfigurationsobjekt nach der Änderung:

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

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 Ausfall aufgetreten, aber die Informationen sind für Diagnosezwecke und zur Identifizierung 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.

Um die Protokollierung in Angular zu konfigurieren, richten Sie in src/app/auth-config.ts die folgenden Schlüssel ein:

  • loggerCallback ist die Logger-Rückruffunktion.
  • logLevel ermöglicht es Ihnen, die Protokollierungsebene anzugeben. 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:

export const msalConfig: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Nächste Schritte