Verificatieopties inschakelen in een Node.js web-app 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 Node.js-webtoepassing inschakelt, aanpast en verbetert.

Voordat u begint, is het belangrijk om vertrouwd te raken met de volgende artikelen:

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>/.

Als u een aangepast domein en uw tenant-id in de verificatie-URL wilt gebruiken, volgt u de richtlijnen in Aangepaste domeinen inschakelen. Open het .env-bestand onder de hoofdmap van het project. Het bestand bevat informatie over uw Azure AD B2C-id-provider.

Ga als volgt te werk in het .env-bestand :

  • Vervang alle exemplaren van tenant-name.b2clogin.com door uw aangepaste domein. Vervang tenant-name.b2clogin.combijvoorbeeld door login.contoso.com.
  • Vervang alle exemplaren van tenant-name.onmicrosoft.com door uw tenant-id. Zie Tenant-id gebruiken voor meer informatie.

De volgende configuratie toont de app-instellingen vóór de wijziging:

#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

De volgende configuratie toont de app-instellingen na de wijziging:

#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

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, voegt u de vereiste invoerclaim toe, zoals beschreven in Directe aanmelding instellen.
  2. Zoek het authCodeRequest object en stel loginHint het kenmerk in met de aanmeldingshint.

De volgende codefragmenten laten zien hoe u de parameter voor aanmeldingshints doorgeeft. Deze gebruikt bob@contoso.com als kenmerkwaarde.

authCodeRequest.loginHint = "bob@contoso.com"

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

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. Zoek het authCodeRequest object en stel domainHint het kenmerk in met de bijbehorende domeinhint.

De volgende codefragmenten laten zien hoe u de parameter voor domeinhints doorgeeft. Facebook.com wordt gebruikt als kenmerkwaarde.

authCodeRequest.domainHint = "facebook.com"

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

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. Zoek het authCodeRequest object en stel extraQueryParameters het kenmerk in met de bijbehorende ui_locales extra parameter.

De volgende codefragmenten laten zien hoe u de parameter ui_locales doorgeeft. Deze gebruikt es-es als kenmerkwaarde.

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

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

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. Zoek het authCodeRequest object en stel extraQueryParameters het kenmerk in met de bijbehorende extra parameter.

De volgende codefragmenten laten zien hoe u een aangepaste querytekenreeksparameter campaignId doorgeeft. Deze gebruikt germany-promotion als kenmerkwaarde.

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

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

Een hint voor een id-token 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 een technisch profiel voor de hint voor het id-token.
  2. Zoek het authCodeRequest object en stel extraQueryParameters het kenmerk in met de bijbehorende id_token_hint extra parameter.

De volgende codefragmenten laten zien hoe u een id-tokenhint definieert:

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

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 logboekregistratie wilt configureren, configureert u inindex.jsde volgende sleutels:

  • 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:

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

Volgende stappen

Meer informatie over MSAL.js configuratieopties.