A felhasználói felület testreszabása az Azure Active Directory B2C-ben
Mielőtt hozzákezdene, a 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.
Tipp.
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.
- Az Egyéni szabályzatok használatának első lépései az Active Directory B2C-ben
- 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:
Palaszürke
Példa a regisztrációs bejelentkezési oldalon megjelenített Slate Gray-sablonra:
Classic
Példa a regisztrációs bejelentkezési oldalon megjelenített klasszikus sablonra:
Vállalati védjegyzés
Az Azure AD B2C-lapokat transzparens emblémával, háttérképpel és háttérszínnel testre szabhatja a Microsoft Entra ID Company védjegyezésével. A vállalati védjegyzés magában foglalja a regisztrációt, a bejelentkezést, a profilszerkesztést és a jelszó alaphelyzetbe á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 az Ocean Blue sablon használatával:
Lapsablon kiválasztása
- Jelentkezzen be az Azure Portalra.
- Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz 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 a tartalomdefiníció azonosítóit és a megfelelő LoadUri.
Ocean Blue:
<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 az Azure Portalra.
- Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz 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 területen válassza a Céges védjegyzés lehetőséget.
- Kövesse az Add branding to your organization's Microsoft Entra bejelentkezési oldal 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.
Vállalati védjegyzés 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 a Mentés parancsot.
Ha a felhasználói folyamat összes lapját meg szeretné adni, állítsa be a lapelrendezési verziót a felhasználói folyamat minden lapelrendezéséhez.
Vállalati védjegyzés 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 az egyéni szabályzat összes tartalomdefiníciójának lapverziójával contract. Az érték formátumának tartalmaznia kell az alábbi szót contract: urn:com:microsoft:aad:b2c:elements:contract:p age-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 olvassa el, hogyan migrálhat lapelrendezésre lapverzió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>
Beviteli mezők átrendezése a regisztrációs űrlapon
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 az Azure Portalra.
- Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont az Azure AD B2C-bérlőre való váltáshoz 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) a kívánt sorrendet, vagy használja a Fel vagy a Le lépés vezérlőt.
- A lap tetején válassza a Mentés lehetőséget.
Következő lépések
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
Hamarosan elérhető: 2024-ben fokozatosan kivezetjük a GitHub-problémákat a tartalom visszajelzési mechanizmusaként, és lecseréljük egy új visszajelzési rendszerre. További információ: https://aka.ms/ContentUserFeedback.
Visszajelzés küldése és megtekintése a következőhöz: