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

Cikk
04/21/2022
6 perc alatt elolvasható

Mielőtt hozzákezdene, válassza ki a beállított szabályzattípust a Szabályzattípus kiválasztása választóval. 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 meghatározott felhasználói folyamatokon vagy teljes mértékben konfigurálható egyéni szabályzatokon keresztül. Az ebben a cikkben leírt lépések különbözőek az egyes metódusok esetében.

A B2C (Azure AD B2C) Azure Active Directory felhasználói felületének védjegyezése és testreszabása segít zökkenőmentes felhasználói élményt nyújtani az alkalmazásban. Ilyenek például a regisztráció, a bejelentkezés, a profilszerkesztés és a jelszó-visszaállítás. Ebben a cikkben az Azure AD B2C-oldalakat lapsablonnal és céges védjegyezéssel szabhatja testre.

Tipp

A felhasználói folyamat oldalainak a lapsablonon, szalagcímemblémán, háttérképen vagy háttérszínen túli egyéb aspektusainak testreszabásához 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.

Hajtsa végre a Első lépések lépéseit egyéni szabályzatokkal 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, a vállalati arculati funkció használatá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 bejelentkezési oldalon megjelenített Ocean Blue sablonra:

Ocean Blue template screenshot

Szürke pala

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

Slate Gray template screenshot

Klasszikus

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

Classic template screenshot

Vállalati védjegyezés

Az Azure AD B2C-lapokat transzparens emblémával, háttérképpel és háttérszínnel testre szabhatja Azure Active Directory Céges arculat használatával. A vállalati arculat magában foglalja a regisztrációt, a bejelentkezést, a profilszerkesztést és a jelszó-visszaállítást.

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:

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

Lapsablon kiválasztása

Jelentkezzen be az Azure Portalra.
Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó címtárat használja. Válassza a Címtárak és előfizetések ikont a portál eszköztárán.
A Portál beállításai | A Címtárak és előfizetések lapon keresse meg az Azure AD B2C-címtárat a Címtárnév listában, majd válassza a Váltás lehetőséget.
A Azure Portal keresse meg és válassza ki az Azure AD B2C-t.
Válassza ki a felhasználói folyamatokat.
Válassza ki a testre szabni kívánt felhasználói folyamatot.
A bal oldali menü Testreszabás területén válassza a Lapelrendezések lehetőséget, majd válasszon egy sablont.

Amikor kiválaszt egy sablont, a rendszer a kiválasztott sablont alkalmazza a felhasználói folyamat minden oldalára. 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éldában a tartalomdefiníció-azonosítók és a hozzájuk tartozó LoadUriazonosítók láthatók.

Ó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 folyamatok lapjainak testreszabásához először konfigurálja a vállalati védjegyezést Azure Active Directory, 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át, háttérképet és háttérszínt a Céges arculatban.

Jelentkezzen be az Azure Portalra.
Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó címtárat használja. Válassza a Címtárak és előfizetések ikont a portál eszköztárán.
A Portál beállításai | A Címtárak és előfizetések lapon keresse meg az Azure AD B2C-címtárat a Címtárnév listában, majd válassza a Váltás lehetőséget.
A Azure Portal keresse meg és válassza ki az Azure AD B2C-t.
A Kezelés területen válassza a Vállalati arculat lehetőséget.
Kövesse a Márkajelzés hozzáadása a szervezet Azure Active Directory bejelentkezési oldalához című témakörben leírt lépéseket.

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 vállalati 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 vállalati arculati panel többi tulajdonsága, például a Speciális beállításoknem 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 a zökkenőmentesebb betöltési élmény érdekében olyan háttérszínt válasszon, amely szorosan megfelel a háttérkép színeinek.
A szalagcímembléma megjelenik a felhasználóknak a regisztrációs felhasználói folyamat kezdeményezésekor küldött ellenőrző e-mailekben.

Vállalati arculat engedélyezése felhasználói folyamatoldalakon

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

A Azure Portal bal oldali menüjében válassza az Azure AD B2C-t.
A Szabályzatok területen válassza 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 szabványos bejelentkezéshez és a szabványos profilszerkesztési felhasználói folyamattípusokhoz.
A Testreszabás területen válassza a Lapelrendezések elemet, majd válassza ki a védjegyezendő 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.
Kattintson a Mentés gombra.

Ha a felhasználói folyamat összes lapját meg szeretné adni, állítsa be a lapelrendezés verzióját a felhasználói folyamat minden lapelrendezéséhez.

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

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és verzióját lapverzióval contract az egyéni szabályzat összes tartalomdefiníciójához. Az érték formátumának tartalmaznia kell az : urn:com:microsoft:aad:b2c:elements:contract:p age-name:version szótcontract. Lapelrendezés megadása 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 a lapverzióval.

Az alábbi példa a tartalomdefiníciókat mutatja be a megfelelő oldalszerző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 űrlapjának regisztrációs oldalán található beviteli mezők újbóli rendeléséhez kövesse az alábbi lépéseket:

Jelentkezzen be az Azure Portalra.
Győződjön meg arról, hogy az Azure AD B2C-bérlőt tartalmazó címtárat használja. Válassza a Címtárak és előfizetések ikont a portál eszköztárán.
A Portál beállításai | A Címtárak és előfizetések lapon keresse meg az Azure AD B2C-címtárat a Címtárnév listában, majd válassza a Váltás lehetőséget.
A Azure Portal 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 újra szeretne rendelni a beviteli mezőihez.
A bal oldali menüben válassza a Lapelrendezések lehetőséget
A táblázatban válassza ki a Helyi fiók regisztrálása lapot.
A Felhasználói attribútumok területen jelölje ki az újrarendelni kívánt beviteli mezőt, húzza (felfelé vagy lefelé) és húzza a kívánt sorrendet, vagy használja a Fel vagy a Le mozgatás vezérlőt a kívánt sorrend eléréséhez.
A lap tetején kattintson a Mentés gombra.

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

Következő lépések

Az alkalmazások felhasználói felületének testreszabásával kapcsolatos további információkért tekintse meg az alkalmazás felhasználói felületének testreszabását Azure Active Directory B2C-ben.