De gebruikersinterface in Azure Active Directory B2C aanpassen

2025-04-03

Belangrijk

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

Voordat u begint, gebruikt u de selector Een beleidstype kiezen boven aan deze pagina om het type beleid te kiezen dat u instelt. U kunt in Azure Active Directory B2C op twee manieren definiëren hoe gebruikers met uw toepassingen communiceren: via vooraf gedefinieerde gebruikersstromen of via volledig configureerbaar aangepast beleid. De stappen die in dit artikel zijn vereist, verschillen voor elke methode.

De huisstijl en het aanpassen van de gebruikersinterface die Azure Active Directory B2C (Azure AD B2C) aan uw klanten weergeeft, helpt een naadloze gebruikerservaring in uw toepassing te bieden. Deze ervaringen omvatten het registreren, aanmelden, het bewerken van profielen en het opnieuw instellen van wachtwoorden. In dit artikel past u uw Azure AD B2C-pagina's aan met behulp van een paginasjabloon en de huisstijl van uw bedrijf.

Hint

Als u andere aspecten van uw gebruikersstroompagina's wilt aanpassen buiten de paginasjabloon, bannerlogo, achtergrondafbeelding of achtergrondkleur, raadpleegt u hoe u de gebruikersinterface kunt aanpassen met HTML-sjabloon.

Vereiste voorwaarden

Maak een gebruikersstroom, zodat gebruikers zich bij uw toepassing kunnen registreren en aanmelden.
Registreer een web-app.

Voltooi de stappen in Aan de slag met aangepaste policies in Active Directory B2C. In deze zelfstudie leert u hoe u aangepaste beleidsbestanden bijwerkt voor het gebruik van uw Azure AD B2C-tenantconfiguratie.
Registreer een web-app.

Overzicht

Azure AD B2C biedt verschillende ingebouwde sjablonen waaruit u kunt kiezen om uw gebruikerservaringpagina's een professioneel uiterlijk te geven. Deze paginasjablonen kunnen ook fungeren als uitgangspunt voor uw eigen aanpassing, met behulp van de huisstijlfunctie van het bedrijf.

Notitie

Ondersteunde browsers voor de klassieke sjabloon bevatten huidige en vorige versies van Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox en Safari. De sjablonen Ocean Blue en Slate Gray hebben mogelijk beperkte ondersteuning met oudere browserversies, zoals Internet Explorer 11 en 10; we raden u aan uw toepassing te testen met de browsers die u wilt ondersteunen.

Oceaanblauw

Voorbeeld van de Ocean Blue-sjabloon die wordt weergegeven op de registratie- en aanmeldingspagina:

Schermopname van Ocean Blue-sjabloon

Leisteengrijs

Voorbeeld van de Slate Gray-sjabloon zoals weergegeven op de registratie- en aanmeldingspagina:

Schermopname van de sjabloon Slate Gray

Klassiek

Voorbeeld van de klassieke sjabloon die wordt weergegeven op de aanmeld-/registratiepagina:

Schermopname van klassieke sjabloon

Huisstijl van bedrijf

U kunt uw Azure AD B2C-pagina's aanpassen met een bannerlogo, achtergrondafbeelding en achtergrondkleur met behulp van de huisstijl van microsoft Entra ID Company. De huisstijl van het bedrijf omvat het registreren, aanmelden, het bewerken van profielen en het opnieuw instellen van wachtwoorden.

In het volgende voorbeeld ziet u een aanmeldings- en aanmeldingspagina met een aangepast logo, achtergrondafbeelding, met behulp van ocean blue-sjabloon:

Op maat gemaakte aanmeldings-/inlogpagina geleverd door Azure AD B2C

Een paginasjabloon selecteren

Meld u aan bij het Azure-portaal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het hoofdmenu om over te schakelen naar uw Azure AD B2C-tenant vanuit het menu Mappen + abonnementen.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Selecteer gebruikersstromen.
Selecteer een gebruikersstroom die u wilt aanpassen.
Selecteer onder Aanpassen in het linkermenu pagina-indelingen en selecteer vervolgens een sjabloon.

Wanneer u een sjabloon kiest, wordt de geselecteerde sjabloon toegepast op alle pagina's in uw gebruikersstroom. De URI voor elke pagina is zichtbaar in het veld Aangepaste pagina-URI .

Als u een paginasjabloon wilt selecteren, stelt u het LoadUri element van de inhoudsdefinities in. In het volgende voorbeeld worden de inhoudsdefinitie-identificatoren en de bijbehorende LoadUri getoond.

Oceaanblauw:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Leisteengrijs:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Klassiek:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Bedrijfshuisstijl configureren

Als u uw gebruikersstroompagina's wilt aanpassen, configureert u eerst de huisstijl van uw bedrijf in Microsoft Entra ID en schakelt u deze in in uw gebruikersstromen in Azure AD B2C.

Begin met het instellen van het bannerlogo, de achtergrondafbeelding en de achtergrondkleur in de huisstijl van het bedrijf.

Meld u aan bij het Azure-portaal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het hoofdmenu om over te schakelen naar uw Azure AD B2C-tenant vanuit het menu Mappen + abonnementen.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Ga naar Beheren en selecteer Bedrijfsbranding.
Volg de stappen in Huisstijl toevoegen aan de aanmeldingspagina van Microsoft Entra van uw organisatie.

Houd rekening met deze zaken wanneer u de huisstijl van uw bedrijf configureert in Azure AD B2C:

De huisstijl van het bedrijf in Azure AD B2C is momenteel beperkt tot achtergrondafbeeldingen, bannerlogo en achtergrondkleuraanpassing . De andere eigenschappen in het deelvenster Huisstijl van het bedrijf, bijvoorbeeld Geavanceerde instellingen, worden niet ondersteund.
Op uw gebruikersstroompagina's wordt de achtergrondkleur weergegeven voordat de achtergrondafbeelding wordt geladen. We raden u aan een achtergrondkleur te kiezen die nauw overeenkomt met de kleuren in uw achtergrondafbeelding voor een soepelere laadervaring.
Het bannerlogo wordt weergegeven in de verificatie-e-mailberichten die naar uw gebruikers worden verzonden wanneer ze een gebruikersstroom voor aanmelden initiëren.

Huisstijl van het bedrijf inschakelen op gebruikersstroompagina's

Zodra u de huisstijl van uw bedrijf hebt geconfigureerd, schakelt u deze in uw gebruikersstromen in.

Selecteer Azure AD B2C in het linkermenu van Azure Portal.
Selecteer onder Beleidgebruikersstromen (beleidsregels).
Selecteer de gebruikersstroom waarvoor u de huisstijl van uw bedrijf wilt inschakelen. De huisstijl van het bedrijf wordt niet ondersteund voor de standaardtypen Aanmelden en Standaardprofiel voor het bewerken van gebruikersstromen.
Selecteer onder Aanpassende pagina-indelingen en selecteer vervolgens de pagina die u wilt merkeren. Kies bijvoorbeeld de Unified-aanmeldings- of registratiepagina.
Kies versie 1.2.0 of hoger voor de versie van de pagina-indeling (preview).
Selecteer Opslaan.

Als u alle pagina's in de gebruikersstroom wilt branden, stelt u de versie van de pagina-indeling in voor elke pagina-indeling in de gebruikersstroom.

Selectie van pagina-indeling in Azure AD B2C in Azure Portal.

Huisstijl van het bedrijf inschakelen op aangepaste beleidspagina's

Zodra u de huisstijl van uw bedrijf hebt geconfigureerd, schakelt u deze in uw aangepaste beleid in. Configureer de versie van de pagina-indeling met paginaversie contract voor alle inhoudsdefinities in uw aangepaste beleid. De notatie van de waarde moet het woord contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version bevatten. Een pagina-indeling opgeven in uw aangepaste beleidsregels die een oude DataUri-waarde gebruiken. Voor meer informatie leert u hoe u kunt overschakelen naar de pagina-indeling met de paginaversie.

In het volgende voorbeeld ziet u de inhoudsdefinities met hun bijbehorende paginacontract en de paginasjabloon Ocean Blue :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Voer de volgende stappen uit om de invoervelden op de registratiepagina voor het formulier lokale accounts opnieuw te rangschiknen:

Meld u aan bij het Azure-portaal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het hoofdmenu om over te schakelen naar uw Azure AD B2C-tenant vanuit het menu Mappen + abonnementen.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Selecteer Gebruikersstromen in het linkermenu.
Selecteer een gebruikersstroom (alleen voor lokale accounts) die u de invoervelden opnieuw wilt rangschiknen.
Selecteer pagina-indelingen in het linkermenu
Selecteer in de tabel de rij registratiepagina van het lokale account.
Selecteer onder Gebruikerskenmerken het invoerveld dat u opnieuw wilt rangschikken en sleep het omhoog of omlaag, of gebruik de besturingselementen Omhoog of Omlaag om de gewenste volgorde te verkrijgen.
Selecteer boven aan de pagina Opslaan.

Sjabloonselectie vervolgkeuzelijst op de pagina voor gebruikersstromen van het Azure-portaal.

Meer informatie over hoe u de gebruikersinterface van uw toepassingen kunt aanpassen in De gebruikersinterface van uw toepassing aanpassen in Azure Active Directory B2C.

Feedback

Is deze pagina nuttig?