A felhasználói felület testreszabása az Azure Active Directory B2C-ben

Fontos

2025. május 1-jére az Azure AD B2C már nem lesz elérhető az új ügyfelek számára. További információ a GYIK-ben.

Mielőtt hozzákezdene, a lap tetején található Szabályzattípus kiválasztása választóval válassza ki a beállított szabályzat típusát. Az Azure Active Directory B2C két módszert kínál annak meghatározására, hogy a felhasználók hogyan használják az alkalmazásokat: előre definiált felhasználói folyamatokon vagy teljesen konfigurálható egyéni szabályzatokon keresztül. A cikkben szereplő lépések különbözőek az egyes metódusok esetében.

Az Azure Active Directory B2C (Azure AD B2C) által az ügyfelek számára megjelenített felhasználói felület védjegyezése és testreszabása segít zökkenőmentes felhasználói élményt nyújtani az alkalmazásban. Ezek a szolgáltatások közé tartozik a regisztráció, a bejelentkezés, a profilszerkesztés és a jelszó alaphelyzetbe állítása. Ebben a cikkben az Azure AD B2C-lapokat lapsablon és vállalati védjegyezés használatával szabhatja testre.

Jótanács

Ha testre szeretné szabni a felhasználói folyamat lapjainak egyéb aspektusait az oldalsablonon, a szalagcím emblémáján, a háttérképen vagy a háttérszínen kívül, tekintse meg, hogyan szabhatja testre a felhasználói felületet HTML-sablonnal.

Előfeltételek

Hozzon létre egy felhasználói folyamatot , hogy a felhasználók regisztrálhassák és bejelentkezhessenek az alkalmazásba.
Webalkalmazás regisztrálása.

Végezze el az Egyéni szabályzatok használatának első lépéseit az Active Directory B2C-ben. Ez az oktatóanyag bemutatja, hogyan frissítheti az egyéni szabályzatfájlokat az Azure AD B2C-bérlő konfigurációjának használatára.
Webalkalmazás regisztrálása.

Áttekintés

Az Azure AD B2C számos beépített sablont kínál, amelyek közül választhat, hogy professzionális megjelenést biztosítson a felhasználói élmény lapjainak. Ezek a lapsablonok kiindulópontként szolgálhatnak a saját testreszabásához is a céges arculati funkcióval.

Megjegyzés

A klasszikus sablon támogatott böngészői közé tartozik az Internet Explorer, a Microsoft Edge, a Google Chrome, a Mozilla Firefox és a Safari aktuális és korábbi verziói. Az Ocean Blue és a Slate Gray sablonok korlátozottan támogatják a régebbi böngészőverziókat, például az Internet Explorer 11-et és a 10-et; javasoljuk, hogy tesztelje az alkalmazást a támogatni kívánt böngészőkkel.

Óceánkék

Példa a regisztrációs és bejelentkezési oldalon megjelenített Ocean Blue-sablonra:

Ocean Blue-sablon képernyőképe

Pala szürke

Példa a regisztrációs bejelentkezési oldalon megjelenített Slate Gray sablonra:

A Slate Gray sablon képernyőképe

Klasszikus

Példa a regisztrációs bejelentkezési oldalon megjelenített klasszikus sablonra:

Klasszikus sablon képernyőképe

Céges arculat

Az Azure AD B2C-lapokat banner emblémával, háttérképpel és háttérszínnel testre szabhatja a Microsoft Entra ID Cégarculattal. A vállalati márkaépítés magában foglalja a regisztrációt, a bejelentkezést, a profilszerkesztést és a jelszó visszaállítását.

Az alábbi példa egy regisztrációs és bejelentkezési oldalt mutat be egy egyéni emblémával, háttérképpel, Ocean Blue sablonnal:

Az Azure AD B2C által kiszolgált védjegyes regisztrációs/bejelentkezési oldal

Lapsablon kiválasztása

Jelentkezzen be a Azure portalra.
Ha több bérlőhöz is hozzáférése van, a felső menüben a Beállítások ikont választva váltson az Azure AD B2C-bérlőre a Címtárak + előfizetések menüből.
Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
Válassza ki a felhasználói folyamatokat.
Válasszon ki egy testre szabni kívánt felhasználói folyamatot.
A bal oldali menü Testreszabás területén válassza a Lapelrendezések , majd a Sablon lehetőséget.

Amikor kiválaszt egy sablont, a rendszer alkalmazza a kijelölt sablont a felhasználói folyamat összes lapjához. Az egyes lapok URI-ja az Egyéni lap URI mezőjében látható.

Lapsablon kiválasztásához állítsa be a LoadUritartalomdefiníciók elemét. Az alábbi példa bemutatja a tartalomdefiníció azonosítóit és a hozzájuk tartozó LoadUri elemeket.

Óceánkék:

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

Szürke pala:

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

Klasszikus:

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

Vállalati arculat konfigurálása

A felhasználói folyamatoldalak testreszabásához először konfigurálja a céges védjegyezést a Microsoft Entra ID-ban, majd engedélyezze azt a felhasználói folyamatokban az Azure AD B2C-ben.

Első lépésként állítsa be a szalagcím emblémáját, a háttérképet és a háttérszínt a Céges arculatban.

Jelentkezzen be a Azure portalra.
Ha több bérlőhöz is hozzáférése van, a felső menüben a Beállítások ikont választva váltson az Azure AD B2C-bérlőre a Címtárak + előfizetések menüből.
Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
A Kezelés alatt válassza a Vállalati arculat lehetőséget.
Kövesse a Saját brand hozzáadása a szervezet Microsoft Entra bejelentkezési oldalához című útmutató lépéseit.

Tartsa szem előtt ezeket a dolgokat, amikor konfigurálja a vállalati védjegyezést az Azure AD B2C-ben:

Az Azure AD B2C-ben a céges védjegyezés jelenleg a háttérképre, a szalagcím emblémára és a háttérszín testreszabására korlátozódik. A céges védjegyzés panel többi tulajdonsága, például a Speciális beállítások nem támogatottak.
A felhasználói folyamat oldalain a háttérszín a háttérkép betöltése előtt jelenik meg. Azt javasoljuk, hogy válasszon egy háttérszínt, amely szorosan megfelel a háttérkép színeinek a zökkenőmentesebb betöltési élmény érdekében.
A szalagcím emblémája megjelenik a felhasználóknak küldött ellenőrző e-mailekben, amikor regisztrációs felhasználói folyamatot kezdeményeznek.

A vállalati arculat engedélyezése a felhasználói folyamat oldalain

Miután konfigurálta a vállalati védjegyezést, engedélyezze azt a felhasználói folyamatokban.

Az Azure Portal bal oldali menüjében válassza az Azure AD B2C lehetőséget.
A Szabályzatok területen válassza ki a Felhasználói folyamatok (szabályzatok) lehetőséget.
Válassza ki azt a felhasználói folyamatot, amelyhez engedélyezni szeretné a vállalati védjegyezést. A vállalati arculat nem támogatott a szokásos bejelentkezéshez és a szokásos profilszerkesztési felhasználói folyamattípusokhoz.
A Testreszabás területen válassza a Lapelrendezések lehetőséget, majd válassza ki a márkához tartozó lapot. Válassza például az Egyesített regisztráció vagy a Bejelentkezési lap lehetőséget.
A Lapelrendezés verziója (előzetes verzió) esetében válassza az 1.2.0-s vagy újabb verziót.
Válassza az Mentésgombot.

Ha a felhasználói folyamat összes oldalát fel szeretné címkézni, állítsa be az oldalelrendezés verzióját a felhasználói folyamat minden oldalelrendezéséhez.

Lapelrendezés kiválasztása az Azure AD B2C-ben az Azure Portalon.

Vállalati arculat engedélyezése egyéni szabályzatoldalakon

Miután konfigurálta a vállalati védjegyezést, engedélyezze azt az egyéni szabályzatában. Konfigurálja a lapelrendezési verziót úgy, hogy az megfeleljen a lap verziójának az egyéni szabályzat contract tartalomdefiníciójánál. Az érték formátumának tartalmaznia kell az alábbi szót contract: urn:com:microsoft:aad:b2c:elements:contract:page-name:version. Ha meg szeretne adni egy lapelrendezést az egyéni szabályzatokban, amelyek régi DataUri-értéket használnak. További információkért ismerje meg, hogyan migrálhat lapelrendezésre lapverzió használatával.

Az alábbi példa a tartalomdefiníciókat mutatja be a megfelelő lapszerződéssel és az Ocean Blue oldalsablonnal:

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

A helyi fiókok űrlap regisztrációs oldalán található beviteli mezők átrendezéséhez kövesse az alábbi lépéseket:

Jelentkezzen be a Azure portalra.
Ha több bérlőhöz is hozzáférése van, a felső menüben a Beállítások ikont választva váltson az Azure AD B2C-bérlőre a Címtárak + előfizetések menüből.
Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
A bal oldali menüben válassza a Felhasználói folyamatok lehetőséget.
Válasszon ki egy felhasználói folyamatot (csak helyi fiókok esetén), amelyet át szeretne rendezni a bemeneti mezőkben.
A bal oldali menüben válassza a Lapelrendezések lehetőséget
A táblázatban válassza a Helyi fiók regisztráció lapja lehetőséget.
A Felhasználói attribútumok területen jelölje ki az átrendezni kívánt beviteli mezőt, majd húzza fel vagy le, és ejtse le a kívánt helyre, vagy használja a Fel vagy Le gombokat a kívánt sorrend eléréséhez.
Az oldal tetején válassza ki a Mentésgombot.

Sablonkijelölési legördülő lista az Azure Portal felhasználói folyamatoldalán.

További információ arról, hogyan szabhatja testre az alkalmazások felhasználói felületét az alkalmazás felhasználói felületének testreszabása az Azure Active Directory B2C-ben.

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2025-04-03