Share via

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

  • Artikel

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.

Vereisten

Maak uzelf vertrouwd met het artikel Verificatie configureren in een Angular BEVEILIGD-WACHTWOORDVERIFICATIE of Verificatie inschakelen in uw eigen Angular BEVEILIGD-WACHTWOORDVERIFICATIE.

Aan- en afmeldingsgedrag

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

  • 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 weggaan van uw toepassingspagina tijdens de verificatie. Er zijn echter bekende problemen met pop-upvensters in Internet Explorer.
    • Als u zich wilt aanmelden 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.
    • Als u zich wilt afmelden 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 benadering als gebruikers browserbeperkingen of beleidsregels hebben waarbij pop-upvensters zijn uitgeschakeld.
    • Als u zich wilt aanmelden met omleiding, gebruikt u de methode in de src/app/app.component.tsloginRedirect klasse.
    • Stel in de src/app/app.module.ts klasse het interactionType kenmerk in op InteractionType.Redirect.
    • Als u zich wilt afmelden met omleiding, gebruikt u in de src/app/app.component.ts klasse de logoutRedirect methode . Configureer de URI waarnaar deze moet worden omgeleid na een afmelding door in te stellen postLogoutRedirectUri. U moet deze URI toevoegen als een omleidings-URI in uw toepassingsregistratie.

Het volgende voorbeeld demonstreert het aan- 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 configuraties MSAL Guard en MSAL Interceptor worden van kracht wanneer een gebruiker toegang probeert 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 gebruikersbeleving voor aanmelden kan uw app zich op een specifieke gebruiker richten. Wanneer een app zich op een gebruiker richt, geeft de app in de autorisatieaanvraag mogelijk de queryparameter login_hint op met de aanmeldingsnaam van de gebruiker. Azure AD B2C vult automatisch de aanmeldingsnaam in en de gebruiker hoeft alleen het wachtwoord op te geven.

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

  1. Als u een aangepast beleid gebruikt, voeg dan de vereiste invoerclaim toe, zoals beschreven in Directe aanmelding instellen.
  2. Een PopupRequest of RedirectRequest MSAL-configuratieobject maken of een bestaande gebruiken.
  3. Stel het kenmerk loginHint in met de overeenkomstige aanmeldingshint.

De volgende codefragmenten laten zien hoe u de parameter voor aanmeldingshints doorgeeft. Deze 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 socialemedia-accounts, zoals Facebook, LinkedIn en Google, in de aanmeldbeleving voor uw toepassing hebt geconfigureerd, kunt u de parameter domain_hint opgeven. Deze queryparameter biedt een hint naar Azure AD B2C over de id-provider voor sociale media die moet worden gebruikt voor aanmelden. Als de toepassing bijvoorbeeld domain_hint=facebook.com opgeeft, leidt 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 de externe id-provider. Zie Aanmelden omleiden naar een sociale provider voor meer informatie.
  2. Een PopupRequest of RedirectRequest MSAL-configuratieobject maken of een bestaande gebruiken.
  3. Stel het kenmerk domainHint in met de overeenkomstige domeinhint.

De volgende codefragmenten laten zien hoe u de parameter voor domeinhints doorgeeft. Deze 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 taal van de gebruikersinterface opgeven

Met taalaanpassing in Azure AD B2C kunt u verschillende talen in uw gebruikersstroom opnemen om aan de behoeften van uw klanten te voldoen. Zie Taalaanpassing voor meer informatie.

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

  1. Taalaanpassing configureren.
  2. Een PopupRequest of RedirectRequest MSAL-configuratieobject maken of een bestaande gebruiken met extraQueryParameters-kenmerken.
  3. Voeg de parameter ui_locales met de bijbehorende taalcode toe aan de extraQueryParameters-kenmerken.

De volgende codefragmenten laten zien hoe u de parameter voor domeinhints doorgeeft. Deze 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 querytekenreeksparameter doorgeven

Met aangepast beleid kunt u een aangepaste querytekenreeksparameter doorgeven. Dit is bijvoorbeeld handig wanneer u de pagina-inhoud dynamisch wilt wijzigen.

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

  1. Configureer het element ContentDefinitionParameters.
  2. Een PopupRequest of RedirectRequest MSAL-configuratieobject maken of een bestaande gebruiken met extraQueryParameters-kenmerken.
  3. Voeg de aangepaste querytekenreeksparameter toe, bijvoorbeeld campaignId. Stel de parameterwaarde in.

De volgende codefragmenten laten zien hoe u een aangepaste querytekenreeksparameter doorgeeft. Deze 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 Web Token (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 hint voor het id-token in de verificatieaanvraag op te nemen:

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

De volgende codefragmenten laten zien hoe u een id-tokenhint 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}
    }
  },

Een aangepast domein gebruiken

Met behulp van een aangepast domein kunt u de verificatie-URL volledig aanpassen aan uw merknaam. Voor gebruikers lijkt het alsof ze tijdens het verificatieproces op uw domein blijven, in plaats van dat ze worden omgeleid naar de Azure AD B2C-domeinnaam b2clogin.com.

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 URL van de verificatieaanvraag vervangen door de GUID van uw tenant-id. U kunt https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ bijvoorbeeld wijzigen in https://account.contosobank.co.uk/<tenant ID GUID>/.

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

In het volgende JavaScript ziet u het MSAL-configuratieobject 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 ziet u het MSAL-configuratieobject 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 over de registratie van persoonlijke en organisatorische gegevens.

We raden u aan een callback voor MSAL-logboekregistratie te maken en gebruikers een manier te bieden om logboeken in te dienen wanneer ze verificatieproblemen ondervinden. MSAL biedt de volgende detailniveaus voor logboekregistratie:

  • Fout: er is iets misgegaan en er is een fout gegenereerd. Dit niveau wordt gebruikt voor het opsporen van fouten en het identificeren van problemen.
  • Waarschuwing: er is niet noodzakelijkerwijs een fout of fout opgetreden, maar de informatie is bedoeld voor diagnoses 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 bibliotheekgedrag.

De MSAL-logboekregistratie legt standaard geen persoonlijke of organisatorische gegevens vast. De bibliotheek biedt u de optie om logboekregistratie van persoonlijke en organisatorische gegevens in te schakelen.

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

  • loggerCallback is de callbackfunctie van de logger.
  • Met logLevel kunt u het niveau van logboekregistratie opgeven. Mogelijke waarden: Error, Warning, Info en 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