Konfigurieren von Authentifizierungsoptionen in einer Angular-Anwendung mit Azure Active Directory B2C

  • Artikel

In diesem Artikel werden Möglichkeiten beschrieben, wie Sie die Azure Active Directory B2C-Authentifizierungsoberfläche (Azure AD B2C) für Ihre Single-Page-Webanwendung (SPA) in Angular anpassen und verbessern können.

Voraussetzungen

Machen Sie sich zunächst mit dem Inhalt eines der folgenden Artikeln vertraut: Konfigurieren der Authentifizierung in einer Angular-Single-Page-Webanwendung oder Aktivieren der Authentifizierung Ihrer eigenen Angular-SPA.

An- und Abmeldeverhalten

Sie können Ihre Single-Page-Webanwendung auf zwei verschiedene Arten für die Anmeldung von Benutzern mit MSAL.js konfigurieren:

  • Popupfenster: Die Authentifizierung erfolgt in einem Popupfenster, während der Status der Anwendung beibehalten wird. Diese Methode ist geeignet, wenn die Benutzer während der Authentifizierung Ihre Anwendungsseite nicht verlassen sollen. Es gibt jedoch bekannte Probleme mit Popupfenstern im Internet Explorer.
    • Verwenden Sie zur Anmeldung mit Popupfenstern in der Klasse src/app/app.component.ts die Methode loginPopup.
    • Legen Sie in der Klasse src/app/app.module.ts das Attribut interactionType auf InteractionType.Popup fest.
    • Verwenden Sie zur Abmeldung mit Popupfenstern in der Klasse src/app/app.component.ts die Methode logoutPopup. Sie können logoutPopup auch so konfigurieren, dass das Hauptfenster nach abgeschlossener Abmeldung auf eine andere Seite (z. B. die Startseite oder die Anmeldeseite) umgeleitet wird, indem Sie mainWindowRedirectUri als Teil der Anforderung übergeben.
  • Umleitung: Der Benutzer wird zu Azure AD B2C umgeleitet, um den Authentifizierungsflow abzuschließen. Diese Methode ist geeignet, wenn für Benutzer Browsereinschränkungen oder Richtlinien gelten, bei denen Popupfenster deaktiviert sind.
    • Verwenden Sie zur Anmeldung mit der Umleitung in der Klasse src/app/app.component.ts die Methode loginRedirect.
    • Legen Sie in der Klasse src/app/app.module.ts das Attribut interactionType auf InteractionType.Redirect fest.
    • Verwenden Sie zur Abmeldung mit der Umleitung in der Klasse src/app/app.component.ts die Methode logoutRedirect. Konfigurieren der URI, zu der nach dem Abmelden umgeleitet werden soll, durch das Festlegen von postLogoutRedirectUri. Sie sollten diese URI als Umleitungs-URl Ihrer Anwendungsregistrierung hinzufügen.

Im folgenden Beispiel werden die An- und Abmeldung veranschaulicht:

//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-Bibliothek in Angular verfügt über drei Anmeldeflows: die interaktive Anmeldung (bei der ein Benutzer auf die Anmeldeschaltfläche klickt), MSAL Guard und den MSAL-Interceptor. Die Konfigurationen von MSAL Guard und dem MSAL-Interceptor werden wirksam, wenn ein Benutzer versucht, ohne gültiges Zugriffstoken auf eine geschützte Ressource zuzugreifen. In diesem Fall erzwingt die MSAL-Bibliothek eine Anmeldung.

In den folgenden Beispielen wird veranschaulicht, wie Sie MSAL Guard und den MSAL-Interceptor für die Anmeldung mit einem Popupfenster oder einer Umleitung konfigurieren:

// 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]
    ])
  })

Auffüllen des Anmeldenamens

Während einer User Journey zur Anmeldung zielt Ihre App ggf. auf einen bestimmten Benutzer ab. Wenn eine App auf einen Benutzer abzielt, kann sie in der Autorisierungsanforderung den Abfrageparameter login_hint mit dem Anmeldenamen des Benutzers angeben. Azure AD B2C füllt den Anmeldenamen automatisch auf. 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. Eine Anleitung hierzu finden Sie unter Einrichten der direkten Anmeldung.
  2. Erstellen oder verwenden Sie ein vorhandenes MSAL-Konfigurationsobjekt vom Typ PopupRequest oder RedirectRequest.
  3. Legen Sie das Attribut loginHint mit dem entsprechenden Anmeldehinweis fest.

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

// 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"
    }
  },

Vorabauswahl eines Identitätsanbieters

Wenn Sie die User Journey für die Anmeldung bei Ihrer Anwendung so konfiguriert haben, dass Konten für soziale Netzwerke inbegriffen sind, wie z.B. Facebook, LinkedIn oder Google, können Sie den Parameter domain_hint angeben. Dieser Abfrageparameter enthält einen Hinweis für Azure AD B2C zu dem sozialen Netzwerk als Identitätsanbieter, das für die Anmeldung verwendet werden sollte. Wenn in der Anwendung beispielsweise domain_hint=facebook.com angegeben ist, erfolgt der Anmeldefluss direkt auf der Anmeldeseite von Facebook.

Gehen Sie wie folgt vor, um Benutzer zu einem externen Identitätsanbieter umzuleiten:

  1. Überprüfen Sie den Domänennamen Ihres externen Identitätsanbieters. Weitere Informationen finden Sie unter Umleiten einer Anmeldung zu einem Anbieter sozialer Netzwerke.
  2. Erstellen oder verwenden Sie ein vorhandenes MSAL-Konfigurationsobjekt vom Typ PopupRequest oder RedirectRequest.
  3. Legen Sie das Attribut domainHint mit dem entsprechenden Domänenhinweis fest.

Die folgenden Codeausschnitte veranschaulichen, wie der Domänenhinweisparameter übergeben wird. In diesem Beispiel wird facebook.com als Attributwert verwendet.

// 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"
    }
  },

Ändern Sie die Sprache für die Benutzeroberfläche

Die Sprachanpassung in Azure AD B2C ermöglicht Ihrem Benutzerfluss, eine Vielzahl von Sprachen zu berücksichtigen, um die Anforderungen Ihrer Kunden zu erfüllen. Weitere Informationen hierzu finden Sie unter Sprachanpassung.

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

  1. Konfigurieren Sie die Sprachanpassung.
  2. Erstellen oder verwenden Sie ein vorhandenes MSAL-Konfigurationsobjekt vom Typ PopupRequest oder RedirectRequest mit extraQueryParameters-Attributen.
  3. Fügen Sie den extraQueryParameters-Attributen den Parameter ui_locales mit dem entsprechenden Sprachcode hinzu.

Die folgenden Codeausschnitte veranschaulichen, wie der Domänenhinweisparameter übergeben wird. In diesem Beispiel wird es-es als Attributwert verwendet.

// 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"}
    }
  },

Das Übergeben eines benutzerdefinierten Abfragezeichenfolgenparameters

Mit benutzerdefinierten Richtlinien können Sie einen benutzerdefinierten Abfragezeichenfolgenparameter übergeben. Ein gutes Anwendungsfallbeispiel ist die dynamische Änderung der Seitenanzahl.

Um einen benutzerdefinierten Abfragezeichenfolgenparameter zu übergeben, gehen Sie folgendermaßen vor:

  1. Konfigurieren Sie das ContentDefinitionParameters-Element.
  2. Erstellen oder verwenden Sie ein vorhandenes MSAL-Konfigurationsobjekt vom Typ PopupRequest oder RedirectRequest 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. In diesem Beispiel wird germany-promotion als Attributwert verwendet.

// 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 der vertrauenden Seite kann ein eingehendes JWT (JSON Web Token) als Teil der OAuth2-Autorisierungsanforderung senden. Das eingehende Token ist ein Hinweis zum Benutzer oder zur Autorisierungsanforderung. Azure AD B2C überprüft das Token und extrahiert die Ansprüche.

Führen Sie die folgenden Schritte aus, um einen ID-Tokenhinweis in die Authentifizierungsanforderung einzufügen:

  1. Definieren Sie in Ihrer benutzerdefinierten Richtlinie das technische Profil eines ID-Tokenhinweises.
  2. Erstellen oder verwenden Sie ein vorhandenes MSAL-Konfigurationsobjekt vom Typ PopupRequest oder RedirectRequest mit extraQueryParameters-Attributen.
  3. Fügen Sie den Parameter id_token_hint 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

Durch Verwenden einer benutzerdefinierten Domäne können Sie die Authentifizierungs-URL vollständig mit Branding versehen. Aus seiner Sicht bleibt der Benutzer während des Authentifizierungsprozesses in Ihrer Domäne und wird nicht zum Azure AD B2C-Domänennamen b2clogin.com umgeleitet.

Um alle Verweise auf „b2c“ in der URL zu entfernen, können Sie auch den Namen Ihres B2C-Mandanten, contoso.onmicrosoft.com, in der URL der Authentifizierungsanforderung durch die GUID Ihrer Mandanten-ID ersetzen. Sie können z. B. https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ in https://account.contosobank.co.uk/<tenant ID GUID>/ ändern.

Eine Anleitung für die Nutzung der benutzerdefinierten Domäne für Ihre Mandanten-ID in der Authentifizierungs-URL finden Sie unter Aktivieren von benutzerdefinierten Domänen. Öffnen Sie das MSAL-Konfigurationsobjekt src/app/auth-config.ts, und ändern Sie authorities und knownAuthorities so ab, dass diese Ihren benutzerdefinierten Domänennamen und die Mandanten-ID verwenden.

Im folgenden JavaScript-Code sehen Sie das MSAL-Konfigurationsobjekt vor der Änderung:

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

Im folgenden JavaScript-Code sehen Sie 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 den Detaillierungsgrad geben und darüber, ob persönliche und Organisationsdaten protokolliert werden.

Sie sollten einen MSAL-Protokollierungsrückruf erstellen und Benutzern eine Möglichkeit bieten, Protokolle zu übermitteln, wenn Authentifizierungsprobleme auftreten. MSAL bietet mehrere Protokollierungsdetailgrade:

  • Fehler: Gibt an, dass ein Problem aufgetreten ist und ein Fehler generiert wurde. Dieser Grad wird zum Debuggen und Identifizieren von Problemen verwendet.
  • Warnung: Es muss nicht unbedingt zu einem Fehler oder Ausfall gekommen sein. Diese Informationen sind zum Diagnostizieren und Ermitteln von Problemen vorgesehen.
  • Info: MSAL protokolliert Ereignisse, die zu Informationszwecken und nicht notwendigerweise zum Debuggen bestimmt sind.
  • Ausführlich: Dies ist die Standardstufe. Msal protokolliert die vollständigen Details des Bibliotheksverhaltens.

Die MSAL-Protokollierung erfasst standardmäßig keine personenbezogenen oder Organisationsdaten. Die Bibliothek bietet Ihnen jedoch die Option, die Protokollierung von personenbezogenen Daten und Organisationsdaten zu aktivieren.

Konfigurieren Sie für die Anmeldung bei Angular in src/app/auth-config.ts die folgenden Schlüssel:

  • loggerCallback: Die Rückruffunktion der Protokollierung.
  • logLevel: Zur Angabe des Protokolliergrads. Mögliche Werte: Error, Warning, Info und Verbose.
  • piiLoggingEnabled: Ermöglicht die Eingabe personenbezogener Daten. Mögliche Werte: true oder false.

Im folgenden Codeausschnitt wird das Konfigurieren der MSAL-Protokollierung veranschaulicht:

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

Nächste Schritte