Přizpůsobení uživatelského rozhraní v Azure Active Directory B2C

Článek
11/08/2023

Než začnete, pomocí selektoru Zvolit typ zásady zvolte typ zásady, kterou nastavujete. Azure Active Directory B2C nabízí dvě metody pro definování způsobu interakce uživatelů s vašimi aplikacemi: prostřednictvím předdefinovaných toků uživatelů nebo prostřednictvím plně konfigurovatelných vlastních zásad. Kroky vyžadované v tomto článku se pro každou metodu liší.

Branding a přizpůsobení uživatelského rozhraní, které Azure Active Directory B2C (Azure AD B2C) zobrazuje vašim zákazníkům, pomáhá zajistit bezproblémové uživatelské prostředí ve vaší aplikaci. Mezi tato prostředí patří registrace, přihlášení, úpravy profilu a resetování hesla. V tomto článku přizpůsobíte stránky Azure AD B2C pomocí šablony stránky a firemního brandingu.

Tip

Pokud chcete přizpůsobit další aspekty stránek toku uživatele nad rámec šablony stránky, loga banneru, obrázku pozadí nebo barvy pozadí, podívejte se , jak přizpůsobit uživatelské rozhraní pomocí šablony HTML.

Předpoklady

Vytvořte tok uživatele, aby se uživatelé mohli zaregistrovat a přihlásit k vaší aplikaci.
Zaregistrujte webovou aplikaci.

Dokončete kroky v tématu Začínáme s vlastními zásadami ve službě Active Directory B2C.
Zaregistrujte webovou aplikaci.

Přehled

Azure AD B2C nabízí několik předdefinovaných šablon, ze které si můžete vybrat, abyste svým stránkám uživatelského prostředí poskytli profesionální vzhled. Tyto šablony stránek můžou také sloužit jako výchozí bod pro vlastní přizpůsobení pomocí funkce brandingu společnosti.

Poznámka:

Mezi podporované prohlížeče pro klasickou šablonu patří aktuální a předchozí verze Aplikace Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox a Safari. Šablony Ocean Blue a Slate Gray mohou mít omezenou podporu pro starší verze prohlížeče, jako je Internet Explorer 11 a 10; doporučujeme otestovat aplikaci pomocí prohlížečů, které chcete podporovat.

Mořská modrá

Příklad šablony Ocean Blue vykreslené při registraci a přihlašovací stránce:

Ocean Blue template screenshot

Břidlicová šedá

Příklad šablony Slate Gray vykreslené při přihlašovací stránce registrace:

Slate Gray template screenshot

Klasické

Příklad klasické šablony vykreslené při registraci přihlašovací stránky:

Classic template screenshot

Firemní branding

Stránky Azure AD B2C můžete přizpůsobit logem banneru, obrázkem pozadí a barvou pozadí pomocí značky společnosti Microsoft Entra ID. Firemní branding zahrnuje registraci, přihlášení, úpravy profilu a resetování hesla.

Následující příklad ukazuje registrační a přihlašovací stránku s vlastním logem, obrázkem pozadí pomocí šablony Ocean Blue:

Branded sign-up/sign-in page served by Azure AD B2C

Výběr šablony stránky

Přihlaste se k portálu Azure.
Pokud máte přístup k více tenantům, v horní nabídce vyberte ikonu Nastavení a v nabídce Adresáře a předplatná přepněte do svého tenanta Azure AD B2C.
Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.
Vyberte Toky uživatele.
Vyberte tok uživatele, který chcete přizpůsobit.
V části Přizpůsobit v nabídce vlevo vyberte Rozložení stránky a pak vyberte šablonu.

Při výběru šablony se vybraná šablona použije na všechny stránky v toku uživatele. Identifikátor URI pro každou stránku je viditelný v poli Vlastní identifikátor URI stránky.

Pokud chcete vybrat šablonu stránky, nastavte LoadUri prvek definic obsahu. Následující příklad ukazuje identifikátory definice obsahu a odpovídající LoadUri.

Oceán Modrá:

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

Slate Gray:

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

Klasické:

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

Konfigurace brandingu společnosti

Pokud chcete přizpůsobit stránky toku uživatelů, nejprve nakonfigurujete firemní branding v Microsoft Entra ID a pak ho povolíte v tocích uživatelů v Azure AD B2C.

Začněte nastavením loga banneru, obrázku pozadí a barvy pozadí v rámci brandingu společnosti.

Přihlaste se k portálu Azure.
Pokud máte přístup k více tenantům, v horní nabídce vyberte ikonu Nastavení a v nabídce Adresáře a předplatná přepněte do svého tenanta Azure AD B2C.
Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.
V části Spravovat vyberte Branding společnosti.
Postupujte podle pokynů v části Přidání brandingu na přihlašovací stránku Microsoft Entra vaší organizace.

Při konfiguraci firemního brandingu v Azure AD B2C mějte na paměti tyto věci:

Firemní branding v Azure AD B2C je v současné době omezený na obrázek pozadí, logo banneru a přizpůsobení barvy pozadí. Ostatní vlastnosti v podokně brandingu společnosti, například Upřesnit nastavení, nejsou podporované.
Na stránkách toku uživatele se před načtením obrázku na pozadí zobrazí barva pozadí. Doporučujeme zvolit barvu pozadí, která přesně odpovídá barvám na obrázku pozadí, abyste měli plynulejší možnosti načítání.
Logo banneru se zobrazí v ověřovacích e-mailech odeslaných uživatelům, když zahájí tok registrace uživatele.

Povolení firemního brandingu na stránkách toku uživatelů

Jakmile nakonfigurujete firemní branding, povolte ho v tocích uživatelů.

V levé nabídce webu Azure Portal vyberte Azure AD B2C.
V části Zásady vyberte Toky uživatelů (zásady).
Vyberte tok uživatele, pro který chcete povolit firemní branding. Firemní branding se nepodporuje pro standardní typy toků přihlášení a standardních úprav profilu.
V části Přizpůsobit vyberte Rozložení stránky a pak vyberte stránku, kterou chcete oznamovat. Vyberte například sjednocenou registraci nebo přihlašovací stránku.
Pro verzi rozložení stránky (Preview) zvolte verzi 1.2.0 nebo vyšší.
Zvolte Uložit.

Pokud chcete označit všechny stránky v toku uživatele, nastavte verzi rozložení stránky pro každé rozložení stránky v toku uživatele.

Page layout selection in Azure AD B2C in the Azure portal.

Povolení firemního brandingu na stránkách vlastních zásad

Jakmile nakonfigurujete firemní branding, povolte ho ve vlastních zásadách. Nakonfigurujte verzi rozložení stránky s verzí stránky contract pro všechny definice obsahu ve vlastních zásadách. Formát hodnoty musí obsahovat slovo contract: urn:com:microsoft:aad:b2c:elements:contract:p age-name:version. Pokud chcete zadat rozložení stránky ve vlastních zásadách, které používají starou hodnotu DataUri . Další informace najdete v tématu Migrace na rozložení stránky s verzí stránky.

Následující příklad ukazuje definice obsahu s odpovídající kontrakt stránky a Ocean Blue page template:

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

Chcete-li změnit uspořádání vstupních polí na registrační stránce pro formulář místních účtů, postupujte takto:

Přihlaste se k portálu Azure.
Pokud máte přístup k více tenantům, v horní nabídce vyberte ikonu Nastavení a v nabídce Adresáře a předplatná přepněte do svého tenanta Azure AD B2C.
Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.
V nabídce vlevo vyberte Toky uživatele.
Vyberte tok uživatele (pouze pro místní účty), který chcete změnit uspořádání vstupních polí.
V nabídce vlevo vyberte Rozložení stránky.
V tabulce vyberte řádek registrace místního účtu.
V části Atributy uživatele vyberte vstupní pole, které chcete přeuspořádat, přetáhněte (nahoru nebo dolů) a přetáhněte nebo pomocí ovládacích prvků Přesunout nahoru nebo Přesunout dolů dosáhnete požadovaného pořadí.
V horní části stránky vyberte Uložit.

Template selection drop-down in user flow page of Azure portal.

Další kroky

Další informace o tom, jak můžete přizpůsobit uživatelské rozhraní aplikací, najdete v tématu Přizpůsobení uživatelského rozhraní aplikace v Azure Active Directory B2C.