Verificatieopties configureren in een toepassing met één pagina met behulp van Azure AD B2C

  • Artikel

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

Voordat u begint, moet u vertrouwd raken met het volgende artikel: Verificatie configureren in een voorbeeldwebtoepassing.

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. Zoek uw MSAL-configuratieobject (Microsoft Authentication Library) en wijzig de instanties en knownAuthorities om uw aangepaste domeinnaam en tenant-id te gebruiken.

De volgende JavaScript-code toont 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"],
      ...
    },
  ...
}

De volgende JavaScript-code toont 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"],
      ...
    },
  ...
}

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. Maak een -object om de login_hint op te slaan en geef dit object door aan de methode MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

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. Maak een -object om extraQueryParameters op te slaan en geef dit object door aan de methode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

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. Maak een -object om extraQueryParameters op te slaan en geef dit object door aan de methode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

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. Maak een -object om extraQueryParameters op te slaan en geef dit object door aan de methode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

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. Maak een -object om extraQueryParameters op te slaan en geef dit object door aan de methode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Uw afmeldingsomleiding beveiligen

Na afmelding wordt de gebruiker omgeleid naar de URI die is opgegeven in de post_logout_redirect_uri parameter, ongeacht de antwoord-URL's die zijn opgegeven voor de toepassing. Als echter een geldige id_token_hint wordt doorgegeven en het token voor id vereisen in afmeldingsaanvragen is ingeschakeld, controleert Azure AD B2C of de waarde van post_logout_redirect_uri overeenkomt met een van de geconfigureerde omleidings-URI's van de toepassing voordat de omleiding wordt uitgevoerd. Als er geen overeenkomende antwoord-URL is geconfigureerd voor de toepassing, wordt er een foutbericht weergegeven en wordt de gebruiker niet omgeleid.

Volg de onderstaande stappen om een omleidings-URI voor beveiligde afmelding te ondersteunen:

  1. Maak een wereldwijd toegankelijke variabele om de id_tokenop te slaan.

    let id_token = "";

  2. Parseert in de functie MSAL handleResponse de id_token van het authenticationResult object in de id_token variabele.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. Voeg in de signOut functie de id_token_hint parameter toe aan het object logoutRequest .

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

In het bovenstaande voorbeeld heeft de post_logout_redirect_uri die is doorgegeven aan de afmeldingsaanvraag de volgende indeling: https://your-app.com/. Deze URL moet worden toegevoegd aan de antwoord-URL's van de toepassingsregistratie.

Eenmalige afmelding inschakelen

Eenmalige afmelding in Azure AD B2C maakt gebruik van OpenId Connect frontkanaal afmelding om afmeldingsaanvragen te doen voor alle toepassingen waarbij de gebruiker zich heeft aangemeld via Azure AD B2C.

Deze afmeldingsaanvragen worden gedaan vanaf de Azure AD B2C-afmeldingspagina, in een verborgen Iframe. De Iframes verzenden HTTP-aanvragen naar alle eindpunten voor het afmelden van het frontkanaal die zijn geregistreerd voor de apps die Azure AD B2C heeft geregistreerd als aangemeld.

Uw afmeldingseindpunt voor elke toepassing moet de MSAL logout() -methode aanroepen. U moet MSAL ook expliciet configureren om in dit scenario te worden uitgevoerd binnen een Iframe door in te stellen allowRedirectInIframe op true.

Met het volgende codevoorbeeld wordt ingesteld allowRedirectInIframe op true:

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Volgende stappen

Meer informatie over MSAL.js configuratieopties.