De gebruikersinterface aanpassen met HTML-sjablonen in Azure Active Directory B2C

Artikel
11/08/2023

Voordat u begint, gebruikt u de selector Een beleidstype kiezen 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. Het gaat om de ervaringen voor het registreren, aanmelden, bewerken van profielen en opnieuw instellen van wachtwoorden. In dit artikel worden de methoden voor het aanpassen van gebruikersinterfaces (UI) geïntroduceerd.

Tip

Als u alleen het bannerlogo, de achtergrondafbeelding en de achtergrondkleur van uw gebruikersstroompagina's wilt wijzigen, kunt u de huisstijlfunctie van het bedrijf proberen.

Overzicht van aangepaste HTML en CSS

Azure AD B2C voert code uit in de browser van uw klant met behulp van Cross-Origin Resource Sharing (CORS). Tijdens runtime wordt inhoud geladen vanuit een URL die u opgeeft in uw gebruikersstroom of aangepast beleid. Elke pagina in de gebruikerservaring laadt de inhoud van de URL die u opgeeft voor die pagina. Nadat de inhoud is geladen vanuit uw URL, wordt deze samengevoegd met een HTML-fragment dat is ingevoegd door Azure AD B2C en wordt de pagina vervolgens aan uw klant weergegeven.

Custom page content margin

Aangepaste HTML-pagina-inhoud

Maak een HTML-pagina met uw eigen huisstijl om uw aangepaste pagina-inhoud te leveren. Deze pagina kan een statische *.html pagina zijn of een dynamische pagina, zoals .NET, Node.js of PHP, maar Azure B2C biedt geen ondersteuning voor weergave-engines. Elke weergave aan de serverzijde van de dynamische pagina moet worden uitgevoerd door een toegewezen webtoepassing.

Uw aangepaste pagina-inhoud kan HTML-elementen bevatten, waaronder CSS en JavaScript, maar kan geen onveilige elementen zoals iframes bevatten. Het enige vereiste element is een div-element dat id is ingesteld apiop, zoals dit <div id="api"></div> element op uw HTML-pagina.

<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>

De standaardPagina's van Azure AD B2C aanpassen

In plaats van uw aangepaste pagina-inhoud helemaal zelf te maken, kunt u de standaardpagina-inhoud van Azure AD B2C aanpassen.

De volgende tabel bevat de standaardpagina-inhoud van Azure AD B2C. Download de bestanden en gebruik ze als uitgangspunt voor het maken van uw eigen aangepaste pagina's. Zie Voorbeeldsjablonen voor meer informatie over hoe u de voorbeeldsjablonen kunt downloaden en gebruiken.

Pagina	Beschrijving	Sjablonen
Geïntegreerde registratie of aanmelding	Deze pagina verwerkt het registratie- en aanmeldingsproces van de gebruiker. Gebruikers kunnen zakelijke id-providers, sociale id-providers zoals Facebook, Microsoft-account of lokale accounts gebruiken.	Klassiek, Ocean Blue en Slate Gray.
Aanmelden (alleen)	De aanmeldingspagina wordt ook wel de id-providerselectie genoemd. Het verwerkt de aanmelding van de gebruiker met een lokaal account of federatieve id-providers. Op deze pagina kunt u zich aanmelden zonder dat u zich kunt registreren. Bijvoorbeeld voordat gebruikers hun profiel kunnen bewerken.	Klassiek, Ocean Blue en Slate Gray.
Zelf-assertie	De meeste interacties in Azure AD B2C waar de gebruiker naar verwachting invoer zal leveren, wordt zelf assertief. Bijvoorbeeld een registratiepagina, aanmeldingspagina of pagina voor het opnieuw instellen van wachtwoorden. Gebruik deze sjabloon als aangepaste pagina-inhoud voor een aanmeldingspagina voor een sociaal account, een aanmeldingspagina voor een lokaal account, een aanmeldingspagina voor een lokaal account, wachtwoordherstel, profiel bewerken, pagina blokkeren en meer. De zelfbewuste pagina kan verschillende invoerbesturingselementen bevatten, zoals: een tekstvak, een invoervak voor wachtwoorden, een keuzerondje, vervolgkeuzelijsten met één selectie en selectievakjes met meerdere selectievakjes.	Klassiek, Ocean Blue en Slate Gray.
Meervoudige verificatie	Op deze pagina kunnen gebruikers hun telefoonnummers controleren (met behulp van tekst of spraak) tijdens het registreren of aanmelden.	Klassiek, Ocean Blue en Slate Gray.
Fout	Deze pagina wordt weergegeven wanneer er een uitzondering of een fout optreedt.	Klassiek, Ocean Blue en Slate Gray.

De pagina-inhoud hosten

Wanneer u uw eigen HTML- en CSS-bestanden gebruikt om de gebruikersinterface aan te passen, host u uw UI-inhoud op elk openbaar beschikbaar HTTPS-eindpunt dat CORS ondersteunt. Bijvoorbeeld Azure Blob Storage, Azure-app Services, webservers, CDN's, AWS S3 of systemen voor het delen van bestanden.

Richtlijnen voor het gebruik van aangepaste pagina-inhoud

Gebruik een absolute URL wanneer u externe resources zoals media-, CSS- en JavaScript-bestanden in uw HTML-bestand opneemt.
Met behulp van pagina-indeling versie 1.2.0 en hoger kunt u het data-preload="true" kenmerk in uw HTML-tags toevoegen om de laadvolgorde voor CSS en JavaScript te beheren. Hiermee data-preload="true"wordt de pagina samengesteld voordat deze aan de gebruiker wordt weergegeven. Dit kenmerk voorkomt dat de pagina flikkert door het CSS-bestand vooraf te laden, zonder dat de niet-vormgegeven HTML aan de gebruiker wordt weergegeven. In het volgende HTML-codefragment ziet u het gebruik van de data-preload tag.
```
<link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>
```
We raden u aan om te beginnen met de standaardpagina-inhoud en er bovenop te bouwen.
U kunt JavaScript opnemen in uw aangepaste inhoud.
Ondersteunde browserversies zijn:
- Internet Explorer 11, 10 en Microsoft Edge
- Beperkte ondersteuning voor Internet Explorer 9 en 8
- Google Chrome 42.0 en hoger
- Mozilla Firefox 38.0 en hoger
- Safari voor iOS en macOS, versie 12 en hoger
Vanwege beveiligingsbeperkingen biedt Azure AD B2C geen ondersteuning voor frameHTML-elementen iframeof form HTML-elementen.

Inhoud lokaliseren

U lokaliseer uw HTML-inhoud door taalaanpassing in te schakelen in uw Azure AD B2C-tenant. Als u deze functie inschakelt, kan Azure AD B2C het taalkenmerk van de HTML-pagina instellen en de parameter ui_locales OpenID Verbinding maken doorgeven aan uw eindpunt.

Benadering met één sjabloon

Tijdens het laden van pagina's stelt Azure AD B2C het kenmerk HTML-paginataal in met de huidige taal. Bijvoorbeeld <html lang="en">. Als u verschillende stijlen per huidige taal wilt weergeven, gebruikt u de CSS-selector :lang samen met uw CSS-definitie.

In het volgende voorbeeld worden de volgende klassen gedefinieerd:

imprint-en - Wordt gebruikt wanneer de huidige taal Engels is.
imprint-de - Wordt gebruikt wanneer de huidige taal Duits is.
imprint - Standaardklasse die wordt gebruikt wanneer de huidige taal geen Engels of Duits is.

.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

De volgende HTML-elementen worden weergegeven of verborgen volgens de paginataal:

<a class="imprint imprint-en" href="Link EN">Imprint</a>
<a class="imprint imprint-de" href="Link DE">Impressum</a>

Benadering met meerdere sjablonen

Met de functie voor taalaanpassing kan Azure AD B2C de Parameter ui_locales OpenID Verbinding maken doorgeven aan uw eindpunt. Uw inhoudsserver kan deze parameter gebruiken om taalspecifieke HTML-pagina's te bieden.

Notitie

Azure AD B2C geeft geen OpenID-Verbinding maken-parameters, zoalsui_locales, door aan de uitzonderingspagina's.

Inhoud kan worden opgehaald van verschillende locaties op basis van de landinstelling die wordt gebruikt. In uw CORS-eindpunt stelt u een mapstructuur in voor het hosten van inhoud voor specifieke talen. U roept de juiste aan als u de jokertekenwaarde {Culture:RFC5646}gebruikt.

Uw aangepaste pagina-URI kan er bijvoorbeeld als volgt uitzien:

https://contoso.blob.core.windows.net/{Culture:RFC5646}/myHTML/unified.html

U kunt de pagina in het Frans laden door inhoud op te halen uit:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Overzicht van aangepaste pagina-inhoud

Hier volgt een overzicht van het proces:

Bereid een locatie voor voor het hosten van uw aangepaste pagina-inhoud (een openbaar toegankelijk HTTPS-eindpunt met CORS-functionaliteit).
Download en pas bijvoorbeeld een standaardpagina-inhoudsbestand unified.htmlaan.
Publiceer de aangepaste pagina-inhoud van uw openbaar beschikbare HTTPS-eindpunt.
Stel CORS (Cross-Origin Resource Sharing) in voor uw web-app.
Wijs uw beleid aan op uw aangepaste beleidsinhouds-URI.

Vereisten

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

Voer de stappen in Aan de slag met aangepast beleid in Active Directory B2C uit.
Registreer een web-app.

1. Uw HTML-inhoud maken

Maak een aangepaste pagina-inhoud met de merknaam van uw product in de titel.

Kopieer het volgende HTML-fragment. Het is goed gevormd HTML5 met een leeg element genaamd div id="api"></div> dat zich in de< hoofdteksttags> bevindt.< Dit element geeft aan waar Azure AD B2C-inhoud moet worden ingevoegd.
```
<!DOCTYPE html>
<html>
<head>
    <title>My Product Brand Name</title>
</head>
<body>
    <div id="api"></div>
</body>
</html>
```
Plak het gekopieerde fragment in een teksteditor

Gebruik CSS om de UI-elementen die Azure AD B2C in uw pagina invoegt, te stylen. In het volgende voorbeeld ziet u een eenvoudig CSS-bestand dat ook instellingen bevat voor de in registratie opgenomen HTML-elementen:

h1 {
  color: blue;
  text-align: center;
}
.intro h2 {
  text-align: center;
}
.entry {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}
.divider h2 {
  text-align: center;
}
.create {
  width: 400px ;
  margin-left: auto ;
  margin-right: auto ;
}

Sla het bestand op als customize-ui.html.

Notitie

HTML-formulierelementen worden verwijderd vanwege beveiligingsbeperkingen als u login.microsoftonline.com gebruikt. Als u HTML-formulierelementen in uw aangepaste HTML-inhoud wilt gebruiken, gebruikt u b2clogin.com.

2. Een Azure Blob Storage-account maken

In dit artikel gebruiken we Azure Blob Storage om onze inhoud te hosten. U kunt ervoor kiezen om uw inhoud op een webserver te hosten, maar u moet CORS inschakelen op uw webserver.

Notitie

In een Azure AD B2C-tenant kunt u blobopslag niet inrichten. U moet deze resource maken in uw Microsoft Entra-tenant.

Voer de volgende stappen uit om uw HTML-inhoud in Blob Storage te hosten:

Meld u aan bij de Azure-portal.
Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Microsoft Entra ID-tenant in het menu Mappen en abonnementen.
Zoek en selecteer opslagaccounts in Azure Portal
Selecteer + Maken.
Selecteer een abonnement voor uw opslagaccount.
Maak een resourcegroep of selecteer een bestaande.
Voer een unieke opslagaccountnaam in voor uw opslagaccount.
Selecteer de geografische regio voor uw opslagaccount.
Prestaties kunnen Standaard blijven.
Redundantie kan geografisch redundante opslag (GRS) blijven
Selecteer Beoordelen en maken en wacht enkele seconden totdat microsoft Entra-id een validatie heeft uitgevoerd.
Selecteer Maken om het opslagaccount te maken. Nadat de implementatie is voltooid, wordt de pagina van het opslagaccount automatisch geopend of moet u Ga naar de resource selecteren.

2.1 Een container maken

Voer de volgende stappen uit om een openbare container te maken in Blob Storage:

Selecteer Containers onder Gegevensopslag in het linkermenu.
Selecteer + Container.
Voer bij Naam de hoofdmap in. De naam kan een naam van uw keuze zijn, bijvoorbeeld contoso, maar we gebruiken root in dit voorbeeld voor eenvoud.
Selecteer Blob voor openbaar toegangsniveau. Als u de optie Blob selecteert, kunt u anonieme openbare alleen-lezentoegang voor deze container toestaan.
Selecteer Maken om de container te maken.
Selecteer de hoofdmap om de nieuwe container te openen.

2.2 Upload uw aangepaste pagina-inhoudsbestanden

Selecteer Uploaden.
Selecteer het mappictogram naast Een bestand selecteren.
Navigeer naar en selecteer customize-ui.html, die u eerder hebt gemaakt in de sectie Aanpassing van de paginagebruikersinterface.
Als u wilt uploaden naar een submap, vouwt u Geavanceerd uit en voert u een mapnaam in Uploaden naar map in.
Selecteer Uploaden.
Selecteer de customize-ui.html-blob die u hebt geüpload.
Selecteer rechts van het URL-tekstvak het pictogram Kopiëren naar klembord om de URL naar het klembord te kopiëren.
Navigeer in de webbrowser naar de URL die u hebt gekopieerd om te controleren of de blob die u hebt geüpload toegankelijk is. Als deze niet toegankelijk is, bijvoorbeeld als er een ResourceNotFound fout optreedt, controleert u of het type containertoegang is ingesteld op blob.

3. CORS configureren

Configureer Blob Storage voor Cross-Origin Resource Sharing door de volgende stappen uit te voeren:

Navigeer naar uw opslagaccount.
Selecteer in het linkermenu onder Instellingen de optie Resource delen (CORS).
Geef https://your-tenant-name.b2clogin.com op bij Toegestane oorsprongen. Vervang your-tenant-name door de naam van uw Azure AD B2C-tenant. Bijvoorbeeld https://fabrikam.b2clogin.com. Gebruik bij het opgeven van de naam van uw tenant alleen kleine letters.
Selecteer bij Toegestane methoden zowel GET, als OPTIONS.
Voer bij Toegestane headers een asterisk (*) in.
Voer bij Zichtbare headers een asterisk (*) in.
Voer bij Maximumleeftijd 200 in.
Klik bovenaan de pagina op Opslaan.

3.1 CORS testen

Controleer of u klaar bent door de volgende stappen uit te voeren:

Herhaal de CORS-stap configureren. Voor toegestane oorsprongen voert u /&0> in https://www.test-cors.org
Ga naar www.test-cors.org
Plak voor het vak Externe URL de URL van het HTML-bestand. Bijvoorbeeld https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
Selecteer Aanvraag verzenden. Het resultaat moet zijn XHR status: 200. Als u een foutmelding krijgt, controleert u of uw CORS-instellingen juist zijn. Mogelijk moet u ook uw browsercache wissen of een privé-browsersessie openen door op Ctrl+Shift+P te drukken.

Meer informatie over het maken en beheren van Azure-opslagaccounts.

4. De gebruikersstroom bijwerken

Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en abonnementen.
Zoek en selecteer Azure AD B2C in de Azure-portal.
Selecteer in het linkermenu Gebruikersstromen en selecteer vervolgens de B2C_1_signupsignin1 gebruikersstroom.
Selecteer Pagina-indelingen en selecteer vervolgens onder Geïntegreerde registratie- of aanmeldingspagina Ja voor aangepaste pagina-inhoud gebruiken.
Geef in URI voor aangepaste pagina de URI op voor het eerder gemaakte bestand custom-ui.html.
Klik bovenaan de pagina op Opslaan.

5. De gebruikersstroom testen

Selecteer in uw Azure AD B2C-tenant de optie Gebruikersstromen en vervolgens de gebruikersstroom B2C_1_signupsignin1.
Selecteer Bovenaan de pagina de optie Gebruikersstroom uitvoeren.
Selecteer in het deelvenster aan de rechterkant de knop Gebruikersstroom uitvoeren.

Als het goed is, ziet u een pagina die lijkt op het volgende voorbeeld, met de elementen gecentreerd op basis van het CSS-bestand dat u hebt gemaakt:

Web browser showing sign up or sign in page with custom UI elements

4. Wijzig het extensiebestand

Als u aanpassing van de gebruikersinterface wilt configureren, kopieert u de ContentDefinition en de onderliggende elementen van het basisbestand naar het extensiebestand:

Open het basisbestand van uw beleid. Bijvoorbeeld SocialAndLocalAccounts/TrustFrameworkBase.xml. Dit basisbestand is een van de beleidsbestanden die zijn opgenomen in het aangepaste starterspakket voor beleid, dat u moet hebben verkregen in de vereiste, aan de slag met aangepaste beleidsregels.
Zoek en kopieer de volledige inhoud van het element ContentDefinitions .
Open het extensiebestand. Bijvoorbeeld TrustFrameworkExtensions.xml. Zoek element BuildingBlocks. Als het element niet aanwezig is, voegt u het toe.
Plak de volledige inhoud van het element ContentDefinitions dat u hebt gekopieerd als een onderliggend element van het element BuildingBlocks .
Zoek naar het element ContentDefinition dat in Id="api.signuporsignin" de XML staat die u hebt gekopieerd.

Wijzig de waarde van LoadUri in de URL van het HTML-bestand dat u naar de opslag hebt geüpload. Bijvoorbeeld https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

Uw aangepaste beleid moet eruitzien als het volgende codefragment:

<BuildingBlocks>
  <ContentDefinitions>
    <ContentDefinition Id="api.signuporsignin">
      <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Signin and Signup</Item>
      </Metadata>
    </ContentDefinition>
  </ContentDefinitions>
</BuildingBlocks>

Sla het extensiebestand op.

5. Upload en test uw bijgewerkte aangepaste beleid

5.1 Het aangepaste beleid uploaden

Als u toegang hebt tot meerdere tenants, selecteert u het pictogram Instellingen in het bovenste menu om over te schakelen naar uw Azure AD B2C-tenant in het menu Mappen en abonnementen.
Zoek Azure AD B2C en selecteer deze.
Selecteer onder Beleid de optie Identity Experience Framework.
Selecteer Aangepast beleid uploaden.
Upload het extensiesbestand dat u eerder hebt gewijzigd.

5.2 Het aangepaste beleid testen met nu uitvoeren

Selecteer het beleid dat u hebt geüpload en selecteer nu Uitvoeren.
U moet zich kunnen registreren met behulp van een e-mailadres.

Dynamische aangepaste pagina-inhouds-URI configureren

Met behulp van aangepast Azure AD B2C-beleid kunt u een parameter verzenden in het URL-pad of een querytekenreeks. Door de parameter door te geven aan uw HTML-eindpunt, kunt u de pagina-inhoud dynamisch wijzigen. U kunt bijvoorbeeld de achtergrondafbeelding op de registratie- of aanmeldingspagina van Azure AD B2C wijzigen, op basis van een parameter die u doorgeeft vanuit uw web- of mobiele toepassing. De parameter kan elke claim-resolver zijn, zoals de toepassings-id, taal-id of aangepaste queryreeksparameter, zoals campaignId.

Queryreeksparameters verzenden

Als u queryreeksparameters wilt verzenden, voegt u in het relying party-beleid een ContentDefinitionParameters element toe, zoals hieronder wordt weergegeven.

<RelyingParty>
    <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
    <UserJourneyBehaviors>
    <ContentDefinitionParameters>
        <Parameter Name="campaignId">{OAUTH-KV:campaignId}</Parameter>
        <Parameter Name="lang">{Culture:LanguageName}</Parameter>
        <Parameter Name="appId">{OIDC:ClientId}</Parameter>
    </ContentDefinitionParameters>
    </UserJourneyBehaviors>
    ...
</RelyingParty>

Wijzig de waarde in LoadUri uw inhoudsdefinitie in https://<app_name>.azurewebsites.net/home/unified. Uw aangepaste beleid ContentDefinition moet eruitzien als het volgende codefragment:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://<app_name>.azurewebsites.net/home/unified</LoadUri>
  ...
</ContentDefinition>

Wanneer Azure AD B2C de pagina laadt, wordt de pagina aangeroepen naar uw webservereindpunt:

https://<app_name>.azurewebsites.net/home/unified?campaignId=123&lang=fr&appId=f893d6d3-3b6d-480d-a330-1707bf80ebea

URI voor dynamische pagina-inhoud

Inhoud kan worden opgehaald op verschillende plaatsen op basis van de gebruikte parameters. Stel in uw CORS-eindpunt een mapstructuur in om inhoud te hosten. U kunt bijvoorbeeld de inhoud in de volgende structuur ordenen. Hoofdmap /map per taal/uw HTML-bestanden. Uw aangepaste pagina-URI kan er bijvoorbeeld als volgt uitzien:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://contoso.blob.core.windows.net/{Culture:LanguageName}/myHTML/unified.html</LoadUri>
  ...
</ContentDefinition>

Azure AD B2C verzendt de ISO-code van twee letters voor de taal, fr voor Frans:

https://contoso.blob.core.windows.net/fr/myHTML/unified.html

Voorbeeldsjablonen

Hier vindt u voorbeeldsjablonen voor het aanpassen van de gebruikersinterface:

git clone https://github.com/azure-ad-b2c/html-templates

Dit project bevat de volgende sjablonen:

Het voorbeeld gebruiken:

Kloon de opslagplaats op uw lokale computer. Kies een sjabloonmap /AzureBlue, /MSAof /classic.
Upload alle bestanden onder de sjabloonmap en de /src map naar Blob Storage, zoals beschreven in de vorige secties.
Open vervolgens elk \*.html bestand in de sjabloonmap. Vervang vervolgens alle exemplaren van https://login.microsoftonline.com URL's door de URL die u in stap 2 hebt geüpload. Bijvoorbeeld:

Van:
```
https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF
```
Aan:
```
https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF
```
Sla de \*.html bestanden op en upload ze naar de Blob-opslag.
Wijzig nu het beleid, dat verwijst naar uw HTML-bestand, zoals eerder vermeld.
Als u ontbrekende lettertypen, afbeeldingen of CSS ziet, controleert u uw verwijzingen in het uitbreidingsbeleid en de \*.html bestanden.

Bedrijfsmiddelen gebruiken in aangepaste HTML

Als u bedrijfsmerkassets in een aangepaste HTML wilt gebruiken, voegt u de volgende tags buiten de <div id="api"> tag toe. De afbeeldingsbron wordt vervangen door die van de achtergrondafbeelding en het bannerlogo.

<img data-tenant-branding-background="true" />
<img data-tenant-branding-logo="true" alt="Company Logo" />

Volgende stappen

Meer informatie over het inschakelen van JavaScript-code aan de clientzijde.

De gebruikersinterface aanpassen met HTML-sjablonen in Azure Active Directory B2C

Overzicht van aangepaste HTML en CSS

Aangepaste HTML-pagina-inhoud

De standaardPagina's van Azure AD B2C aanpassen

De pagina-inhoud hosten

Richtlijnen voor het gebruik van aangepaste pagina-inhoud

Inhoud lokaliseren

Benadering met één sjabloon

Benadering met meerdere sjablonen

Overzicht van aangepaste pagina-inhoud

Vereisten

1. Uw HTML-inhoud maken

2. Een Azure Blob Storage-account maken

2.1 Een container maken

2.2 Upload uw aangepaste pagina-inhoudsbestanden

3. CORS configureren

3.1 CORS testen

4. De gebruikersstroom bijwerken

5. De gebruikersstroom testen

4. Wijzig het extensiebestand

5. Upload en test uw bijgewerkte aangepaste beleid

5.1 Het aangepaste beleid uploaden

5.2 Het aangepaste beleid testen met nu uitvoeren

Dynamische aangepaste pagina-inhouds-URI configureren

Queryreeksparameters verzenden

URI voor dynamische pagina-inhoud

Voorbeeldsjablonen

Bedrijfsmiddelen gebruiken in aangepaste HTML

Volgende stappen

Aanvullende resources