Delen via

Verificatieopties configureren in een Angular-toepassing met behulp van Azure Active Directory B2C

Belangrijk

Vanaf 1 mei 2025 is Azure AD B2C niet meer beschikbaar voor nieuwe klanten. Meer informatie vindt u in onze veelgestelde vragen.

In dit artikel wordt beschreven hoe u de verificatie-ervaring van Azure Active Directory B2C (Azure AD B2C) voor uw Angular-toepassing met één pagina (SPA) kunt aanpassen en verbeteren.

Vereiste voorwaarden

Vertrouwd raken met het artikel Verificatie configureren in een Angular SPA of verificatie inschakelen in uw eigen Angular SPA.

Gedrag bij aanmelden en afmelden

U kunt uw toepassing met één pagina configureren om gebruikers met MSAL.js op twee manieren aan te melden:

  • Pop-upvenster: De verificatie vindt plaats in een pop-upvenster en de status van de toepassing blijft behouden. Gebruik deze methode als u niet wilt dat gebruikers tijdens de verificatie van uw toepassingspagina weggaan. Er zijn echter bekende problemen met pop-upvensters in Internet Explorer.
    • Om in te loggen met pop-upvensters, gebruikt u in de src/app/app.component.ts klasse de loginPopup methode.
    • Stel in de src/app/app.module.ts klasse het interactionType kenmerk in op InteractionType.Popup.
    • Om u af te melden met pop-upvensters, gebruikt u in de src/app/app.component.ts klasse de logoutPopup methode. U kunt ook configureren logoutPopup om het hoofdvenster om te leiden naar een andere pagina, zoals de startpagina of aanmeldingspagina, nadat het afmelden is voltooid door als onderdeel van de aanvraag door te geven mainWindowRedirectUri .
  • Omleiding: de gebruiker wordt omgeleid naar Azure AD B2C om de verificatiestroom te voltooien. Gebruik deze methode als gebruikers browserbeperkingen of beleidsregels hebben waarbij pop-upvensters zijn uitgeschakeld.
    • Meld u aan door gebruik te maken van de doorverwijzing in de src/app/app.component.ts klasse, met de loginRedirect methode.
    • Stel in de src/app/app.module.ts klasse het interactionType kenmerk in op InteractionType.Redirect.
    • Om u af te melden met omleiding, gebruikt u de src/app/app.component.ts methode in de logoutRedirect klasse. Configureer de URI waarnaar deze moet worden omgeleid na een afmelding door de instelling in te stellen postLogoutRedirectUri. U moet deze URI toevoegen als een omleidings-URI in uw toepassingsregistratie.

In het volgende voorbeeld ziet u hoe u zich kunt aanmelden en afmelden:

//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: '/',
  });
}

De MSAL Angular-bibliotheek heeft drie aanmeldingsstromen: interactieve aanmelding (waarbij een gebruiker de aanmeldingsknop selecteert), MSAL Guard en MSAL Interceptor. De MSAL Guard- en MSAL Interceptor-configuraties worden van kracht wanneer een gebruiker probeert toegang te krijgen tot een beveiligde resource zonder een geldig toegangstoken. In dergelijke gevallen dwingt de MSAL-bibliotheek de gebruiker zich aan te melden.

In de volgende voorbeelden ziet u hoe u MSAL Guard en MSAL Interceptor configureert voor aanmelding met een pop-upvenster of omleiding:

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

De aanmeldingsnaam vooraf invullen

Tijdens een aanmeldingsgebruikerstraject kan uw app zich richten op een specifieke gebruiker. Wanneer een app is gericht op een gebruiker, kan deze in de autorisatieaanvraag de login_hint queryparameter opgeven met de aanmeldingsnaam van de gebruiker. Azure AD B2C vult automatisch de aanmeldingsnaam in en de gebruiker moet alleen het wachtwoord opgeven.

Ga als volgt te werk om de inlognaam vooraf in te vullen:

  1. Als u een aangepast beleid gebruikt, voegt u de vereiste invoerclaim toe, zoals beschreven in Directe aanmelding instellen.
  2. Maak of gebruik een bestaand PopupRequest of RedirectRequest MSAL-configuratieobject.
  3. Stel het loginHint kenmerk in met de bijbehorende aanmeldingshint.

De volgende codefragmenten laten zien hoe u de parameter voor de aanmeldingshint doorgeeft. Ze gebruiken bob@contoso.com als kenmerkwaarde.

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

Een id-provider vooraf selecteren

Als u het aanmeldingstraject voor uw toepassing hebt geconfigureerd voor het opnemen van sociale accounts, zoals Facebook, LinkedIn of Google, kunt u de domain_hint parameter opgeven. Deze queryparameter biedt een hint voor Azure AD B2C over de id-provider voor sociale netwerken die moet worden gebruikt voor aanmelding. Als de toepassing bijvoorbeeld opgeeft domain_hint=facebook.com, gaat de aanmeldingsstroom rechtstreeks naar de aanmeldingspagina van Facebook.

Ga als volgt te werk om gebruikers om te leiden naar een externe id-provider:

  1. Controleer de domeinnaam van uw externe id-provider. Zie Aanmelding omleiden naar een sociale providervoor meer informatie.
  2. Maak of gebruik een bestaand PopupRequest of RedirectRequest MSAL-configuratieobject.
  3. Stel het domainHint kenmerk in met de bijbehorende domeinhint.

De volgende codefragmenten laten zien hoe u de parameter domeinhint doorgeeft. Ze gebruiken facebook.com als kenmerkwaarde.

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

De gebruikersinterfacetaal opgeven

Met taalaanpassing in Azure AD B2C kan uw gebruikersstroom voldoen aan verschillende talen die aansluiten bij de behoeften van uw klanten. Zie Taalaanpassing voor meer informatie.

Ga als volgt te werk om de voorkeurstaal in te stellen:

  1. Taalinstellingen configureren
  2. Maak of gebruik een bestaand PopupRequest of RedirectRequest MSAL-configuratieobject met extraQueryParameters kenmerken.
  3. Voeg de ui_locales parameter met de bijbehorende taalcode toe aan de extraQueryParameters kenmerken.

De volgende codefragmenten laten zien hoe u de parameter domeinhint doorgeeft. Ze gebruiken es-es als kenmerkwaarde.

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

Een aangepaste queryreeksparameter doorgeven

Met aangepast beleid kunt u een aangepaste querytekenreeksparameter doorgeven. Een goed gebruiksvoorbeeld is wanneer u de pagina-inhoud dynamisch wilt wijzigen.

Ga als volgt te werk om een aangepaste queryreeksparameter door te geven:

  1. Configureer het element ContentDefinitionParameters .
  2. Maak of gebruik een bestaand PopupRequest of RedirectRequest MSAL-configuratieobject met extraQueryParameters kenmerken.
  3. Voeg de aangepaste querytekenreeksparameter toe, zoals campaignId. Stel de parameterwaarde in.

De volgende codefragmenten laten zien hoe u een aangepaste queryreeksparameter doorgeeft. Ze gebruiken germany-promotion als kenmerkwaarde.

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

Een id-tokenhint doorgeven

Een relying party-toepassing kan een binnenkomend JSON-webtoken (JWT) verzenden als onderdeel van de OAuth2-autorisatieaanvraag. Het binnenkomende token is een hint over de gebruiker of de autorisatieaanvraag. Azure AD B2C valideert het token en extraheert vervolgens de claim.

Ga als volgt te werk om een id-tokenhint op te nemen in de verificatieaanvraag:

  1. Definieer in uw aangepaste beleid het technische profiel van een id-tokenhint.
  2. Maak of gebruik een bestaand PopupRequest of RedirectRequest MSAL-configuratieobject met extraQueryParameters kenmerken.
  3. Voeg de id_token_hint parameter toe met de bijbehorende variabele waarin het id-token wordt opgeslagen.

De volgende codefragmenten laten zien hoe u een hint voor een id-token definieert:

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

Gebruik een eigen domein

Met behulp van een aangepast domein kunt u de verificatie-URL volledig brandmerken. Vanuit het oogpunt van een gebruiker blijven gebruikers in uw domein tijdens het verificatieproces, in plaats van om te worden omgeleid naar de Azure AD B2C-b2clogin.com domeinnaam.

Als u alle verwijzingen naar 'b2c' in de URL wilt verwijderen, kunt u ook de naam van uw B2C-tenant, contoso.onmicrosoft.com, in de verificatieaanvraag-URL vervangen door de GUID van uw tenant-id. U kunt bijvoorbeeld overschakelen naar https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/https://account.contosobank.co.uk/<tenant ID GUID>/.

Als u uw aangepaste domein wilt gebruiken voor uw tenant-id in de verificatie-URL, volgt u de richtlijnen in Aangepaste domeinen inschakelen. Open het src/app/auth-config.ts MSAL-configuratieobject en wijzig authorities en knownAuthorities om uw aangepaste domeinnaam en tenant-ID te gebruiken.

In het volgende JavaScript wordt het MSAL-configuratieobject weergegeven vóór de wijziging:

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

In het volgende JavaScript wordt het MSAL-configuratieobject weergegeven na de wijziging:

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

Logboekregistratie configureren

De MSAL-bibliotheek genereert logboekberichten die u kunnen helpen bij het vaststellen van problemen. De app kan logboekregistratie configureren. De app kan u ook aangepaste controle geven over het detailniveau en of persoonlijke en organisatorische gegevens worden geregistreerd.

U wordt aangeraden een callback voor MSAL-logboekregistratie te maken en gebruikers een manier te bieden om logboeken in te dienen wanneer ze verificatieproblemen ondervinden. MSAL biedt deze niveaus van logboekregistratiedetails:

  • Fout: er is iets misgegaan en er is een fout gegenereerd. Dit niveau wordt gebruikt voor foutopsporing en het identificeren van problemen.
  • Waarschuwing: er is niet noodzakelijkerwijs een fout of fout opgetreden, maar de informatie is bedoeld voor diagnostische gegevens en het opsporen van problemen.
  • Info: MSAL registreert gebeurtenissen die zijn bedoeld voor informatieve doeleinden en niet noodzakelijkerwijs voor foutopsporing.
  • Uitgebreid: dit is het standaardniveau. MSAL registreert de volledige details van het gedrag van de bibliotheek.

De MSAL-logboekregistratie legt standaard geen persoonlijke of organisatorische gegevens vast. De bibliotheek biedt u de mogelijkheid om logboekregistratie van persoonlijke en organisatorische gegevens in te schakelen als u besluit dit te doen.

Als u Angular-logboekregistratie wilt configureren, configureert u in src/app/auth-config.ts de volgende sleutels:

  • loggerCallback is de callback-functie voor logboekregistratie.
  • logLevel hiermee kunt u het niveau van logboekregistratie opgeven. Mogelijke waarden: Error, Warning, , Infoen Verbose.
  • piiLoggingEnabled maakt de invoer van persoonsgegevens mogelijk. Mogelijke waarden: true of false.

Het volgende codefragment laat zien hoe u MSAL-logboekregistratie configureert:

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

Volgende stappen

  • Last updated on