Megosztás a következőn keresztül:

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

  • Cikk

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. Ez a cikk bemutatja a felhasználói felület (UI) testreszabási módszereit.

Tipp.

Ha csak a szalagcím emblémáját, háttérképét és háttérszínét szeretné módosítani a felhasználói folyamat oldalain, kipróbálhatja a Céges védjegyzés funkciót.

Egyéni HTML- és CSS-áttekintés

Az Azure AD B2C kódokat futtat az ügyfél böngészőjében a több forrásból származó erőforrás-megosztás (CORS) használatával. Futásidőben a rendszer betölti a tartalmat a felhasználói folyamatban vagy az egyéni szabályzatban megadott URL-címről. A felhasználói felület minden lapja betölti a tartalmát az adott laphoz megadott URL-címről. Miután betöltötte a tartalmat az URL-címéről, az összeolvad az Azure AD B2C által beszúrt HTML-töredékkel, majd megjelenik a lap az ügyfél számára.

Custom page content margin

Egyéni HTML-lap tartalma

Hozzon létre egy HTML-lapot saját arculattal az egyéni laptartalmak kiszolgálásához. Ez a lap lehet statikus *.html vagy dinamikus lap, például .NET, Node.js vagy PHP, azonban az Azure B2C nem támogatja a nézetmotorokat. A dinamikus lap kiszolgálóoldali megjelenítését egy dedikált webalkalmazásnak kell elvégeznie.

Az egyéni laptartalmak bármilyen HTML-elemet tartalmazhatnak, beleértve a CSS-t és a JavaScriptet is, de nem tartalmazhatnak nem biztonságos elemeket, például iframe-eket. Az egyetlen szükséges elem egy div elem, <div id="api"></div> amelynek id a beállítása apia HTML-oldalon belül van.

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

Az alapértelmezett Azure AD B2C-lapok testreszabása

Az egyéni laptartalmak létrehozása helyett testre szabhatja az Azure AD B2C alapértelmezett laptartalmat.

Az alábbi táblázat az Azure AD B2C által biztosított alapértelmezett laptartalmat sorolja fel. Töltse le a fájlokat, és használja őket kiindulási pontként saját egyéni lapok létrehozásához. A mintasablonok letöltésével és használatával kapcsolatban lásd a mintasablonokat .

Oldal Leírás Sablonok
Egységes regisztráció vagy bejelentkezés Ez a lap kezeli a felhasználó regisztrációs és bejelentkezési folyamatát. A felhasználók használhatják a vállalati identitásszolgáltatókat, a közösségi identitásszolgáltatókat, például a Facebookot, a Microsoft-fiókot vagy a helyi fiókokat. Klasszikus, Ocean Blue és Slate Gray.
Bejelentkezés (csak) A bejelentkezési lap az identitásszolgáltató kiválasztásaként is ismert. Helyi fiókkal vagy összevont identitásszolgáltatókkal kezeli a felhasználó bejelentkezését. Ezen a lapon engedélyezheti a bejelentkezést anélkül, hogy regisztrálhat. Például mielőtt a felhasználó szerkesztheti a profilját. Klasszikus, Ocean Blue és Slate Gray.
Önérvényesített A legtöbb interakció az Azure AD B2C-ben, ahol a felhasználótól elvárható, hogy bemenetet adjon, önérvényesítést kap. Például regisztrációs lap, bejelentkezési lap vagy jelszó-visszaállítási oldal. Ezt a sablont egyéni laptartalomként használhatja a közösségi fiók regisztrációs oldalához, egy helyi fiók regisztrációs oldalához, egy helyi fiók bejelentkezési oldalához, a jelszó alaphelyzetbe állításához, a profil szerkesztéséhez, a blokkoldalhoz stb. Az önaláírt oldal különböző beviteli vezérlőket tartalmazhat, például: szövegbeviteli mezőt, jelszóbeviteli mezőt, választógombot, egyszeresen kijelölhető legördülő mezőket és több jelölőnégyzetet. Klasszikus, Ocean Blue és Slate Gray.
Többtényezős hitelesítés Ezen a lapon a felhasználók a regisztráció vagy a bejelentkezés során ellenőrizhetik telefonszámaikat (szöveg vagy hang használatával). Klasszikus, Ocean Blue és Slate Gray.
Hiba Ez a lap kivétel vagy hiba esetén jelenik meg. Klasszikus, Ocean Blue és Slate Gray.

Az oldal tartalmának üzemeltetése

Ha saját HTML- és CSS-fájlokat használ a felhasználói felület testreszabásához, a felhasználói felület tartalmát minden olyan nyilvánosan elérhető HTTPS-végponton tárolja, amely támogatja a CORS-t. Ilyenek például az Azure Blob Storage, a Azure-alkalmazás Services, a webkiszolgálók, a CDN-ek, az AWS S3 vagy a fájlmegosztó rendszerek.

Egyéni laptartalom használatának irányelvei

  • Használjon abszolút URL-címet, ha külső erőforrásokat, például média-, CSS- és JavaScript-fájlokat tartalmaz a HTML-fájlban.

  • A lapelrendezés 1.2.0-s vagy újabb verziójával hozzáadhatja az attribútumot a data-preload="true" HTML-címkékhez a CSS és a JavaScript terhelési sorrendjének szabályozásához. Ezzel a lehetőséggel data-preload="true"a lap létrehozása előtt megjelenik a felhasználó számára. Ez az attribútum segít megakadályozni, hogy a lap "villogjon" a CSS-fájl előzetes betöltésével, anélkül, hogy a felhasználó megjelenítse a nem formázott HTML-t. Az alábbi HTML-kódrészlet a címke használatát data-preload mutatja be.

    <link href="https://path-to-your-file/sample.css" rel="stylesheet" type="text/css" data-preload="true"/>

  • Javasoljuk, hogy kezdje az alapértelmezett oldaltartalommal, és építsen rá.

  • A JavaScriptet felveheti az egyéni tartalomba.

  • A támogatott böngészőverziók a következők:

    • Internet Explorer 11, 10 és Microsoft Edge
    • Az Internet Explorer 9 és 8 korlátozott támogatása
    • Google Chrome 42.0 vagy újabb
    • Mozilla Firefox 38.0 vagy újabb
    • Safari iOS-hez és macOS-hez, 12-es vagy újabb verzió

  • Biztonsági korlátozások miatt az Azure AD B2C nem támogatja framea iframeHTML-elemeket.form

Tartalom honosítása

A HTML-tartalmak honosításához engedélyeznie kell a nyelvi testreszabást az Azure AD B2C-bérlőben. A funkció engedélyezésével az Azure AD B2C beállíthatja a HTML-lap nyelvi attribútumát, és átadhatja az OpenID Csatlakozás paramétert ui_locales a végpontnak.

Egysablonos megközelítés

Az oldalbetöltés során az Azure AD B2C beállítja a HTML-lap nyelvi attribútumát az aktuális nyelvvel. For example, <html lang="en">. Az aktuális nyelv különböző stílusainak megjelenítéséhez használja a CSS-választót :lang és a CSS-definíciót.

Az alábbi példa a következő osztályokat határozza meg:

  • imprint-en - Akkor használatos, ha az aktuális nyelv angol.
  • imprint-de - Akkor használatos, ha a jelenlegi nyelv német.
  • imprint - Alapértelmezett osztály, amelyet akkor használunk, ha az aktuális nyelv nem angol vagy német.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

A következő HTML-elemek jelennek meg vagy rejtve lesznek az oldal nyelvének megfelelően:

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

Többsablonos megközelítés

A nyelvi testreszabási funkció lehetővé teszi, hogy az Azure AD B2C átadja az OpenID Csatlakozás paramétert ui_locales a végpontnak. A tartalomkiszolgáló ezt a paramétert használhatja nyelvspecifikus HTML-oldalak biztosítására.

Megjegyzés:

Az Azure AD B2C nem adja át az OpenID Csatlakozás paramétereket, például ui_localesa kivételoldalaknak.

A használt területi beállítások alapján a tartalom különböző helyekről is lekérehető. A CORS-kompatibilis végponton beállíthat egy mappastruktúrát, amely adott nyelvek tartalmát tárolja. A megfelelőt hívja meg, ha helyettesítő karaktert {Culture:RFC5646}használ.

Az egyéni lap URI-ja például a következőképpen nézhet ki:

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

A lapot francia nyelven töltheti be, ha lekérte a tartalmat a következőből:

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

Egyéni laptartalom bemutatója

A folyamat áttekintése:

  1. Készítsen elő egy helyet az egyéni laptartalom üzemeltetéséhez (nyilvánosan elérhető, CORS-kompatibilis HTTPS-végpont).
  2. Töltse le és szabja testre például unified.htmlaz alapértelmezett laptartalomfájlt.
  3. Tegye közzé az egyéni lap tartalmát a nyilvánosan elérhető HTTPS-végponton.
  4. Állítsa be a több forrásból származó erőforrás-megosztást (CORS) a webalkalmazáshoz.
  5. A szabályzatot az egyéni szabályzat URI-ra mutathatja.

Előfeltételek

1. A HTML-tartalom létrehozása

Hozzon létre egy egyéni laptartalmat a termék márkanevével a címben.

  1. Másolja ki a következő HTML-kódrészletet. Ez egy jól formázott HTML5 egy üres elem, az úgynevezett div id="api"></div> található a< törzscímkék>.< Ez az elem azt jelzi, hogy hová szeretné beszúrni az Azure AD B2C-tartalmat.

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

  2. A másolt kódrészlet beillesztése szövegszerkesztőbe

  3. A CSS használatával formázhatja az Azure AD B2C által a lapra beszúrt felhasználói felületi elemeket. Az alábbi példa egy egyszerű CSS-fájlt mutat be, amely a regisztrációs html-elemek beállításait is tartalmazza:

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

  4. Mentse a fájlt customize-ui.html formátumban.

Megjegyzés:

Ha login.microsoftonline.com használ, a HTML-űrlapelemek biztonsági korlátozások miatt el lesznek távolítva. Ha HTML-űrlapelemeket szeretne használni az egyéni HTML-tartalomban, használja a b2clogin.com.

2. Azure Blob Storage-fiók létrehozása

Ebben a cikkben az Azure Blob Storage-ot használjuk a tartalom üzemeltetéséhez. Dönthet úgy, hogy egy webkiszolgálón tárolja a tartalmat, de engedélyeznie kell a CORS-t a webkiszolgálón.

Megjegyzés:

Egy Azure AD B2C-bérlőben nem építhet ki Blob Storage-tárolót. Ezt az erőforrást a Microsoft Entra-bérlőben kell létrehoznia.

A HTML-tartalom Blob Storage-ban való tárolásához kövesse az alábbi lépéseket:

  1. Jelentkezzen be az Azure Portalra.
  2. Ha több bérlőhöz is hozzáfér, a felső menüben válassza a Gépház ikont a Microsoft Entra ID-bérlőre való váltáshoz a Könyvtárak + előfizetések menüből.
  3. Az Azure Portalon keresse meg és válassza ki a Storage-fiókokat
  4. Válassza a +Létrehozás lehetőséget.
  5. Válasszon előfizetést a tárfiókhoz.
  6. Hozzon létre egy erőforráscsoportot, vagy válasszon ki egy meglévőt.
  7. Adjon meg egy egyedi Storage-fióknevet a tárfiókhoz.
  8. Válassza ki a tárfiók földrajzi régióját .
  9. A teljesítmény standard maradhat.
  10. A redundancia georedundáns tárolás (GRS) maradhat
  11. Válassza a Véleményezés + létrehozás lehetőséget, és várjon néhány másodpercet, amíg a Microsoft Entra-azonosító futtat egy ellenőrzést.
  12. Kattintson a Létrehozás gombra a tárfiók létrehozásához. Az üzembe helyezés befejezése után a tárfiók lapja automatikusan megnyílik, vagy az Erőforrás megnyitása lehetőséget kell választania.

2.1 Tároló létrehozása

Ha nyilvános tárolót szeretne létrehozni a Blob Storage-ban, hajtsa végre a következő lépéseket:

  1. A bal oldali menü Adattárolás területén válassza a Tárolók lehetőséget.
  2. Válassza a + Tároló lehetőséget.
  3. A Név mezőbe írja be a gyökérnevet. A név lehet az Ön által választott név, például contoso, de ebben a példában az egyszerűség kedvéért használjuk a gyökerét .
  4. Nyilvános hozzáférési szint esetén válassza a Blob lehetőséget. A Blob beállítás kiválasztásával engedélyezheti a tároló névtelen nyilvános írásvédett hozzáférését.
  5. A tároló létrehozásához válassza a Létrehozás lehetőséget.
  6. Válassza a gyökér lehetőséget az új tároló megnyitásához.

2.2 Az egyéni lap tartalomfájljainak feltöltése

  1. Válassza a Feltöltés lehetőséget.
  2. Válassza a Mappa ikont a Fájl kiválasztása elem mellett.
  3. Keresse meg és válassza ki a customize-ui.html fájlt, amelyet korábban a Lap felhasználói felület testreszabása szakaszban hozott létre.
  4. Ha almappába szeretne feltölteni, bontsa ki a Speciális elemet, és adjon meg egy mappanevet a Feltöltés mappába területen.
  5. Válassza a Feltöltés lehetőséget.
  6. Válassza ki a feltöltött customize-ui.html blobot.
  7. Az URL-szövegmező jobb oldalán válassza a Vágólapra másolás ikont az URL-cím vágólapra másolásához.
  8. A webböngészőben keresse meg a másolt URL-címet, és ellenőrizze, hogy a feltöltött blob elérhető-e. Ha nem érhető el, például ha hibát tapasztalResourceNotFound, győződjön meg arról, hogy a tárolóelérési típus blobra van állítva.

3. CORS konfigurálása

Konfigurálja a Blob Storage-t a forrásközi erőforrás-megosztáshoz az alábbi lépések végrehajtásával:

  1. Navigate to your storage account.
  2. A bal oldali menü Gépház területén válassza az Erőforrás-megosztás (CORS) lehetőséget.
  3. Az Engedélyezett források mezőben adja meg a következőthttps://your-tenant-name.b2clogin.com: Cserélje le your-tenant-name az Azure AD B2C-bérlő nevét. For example, https://fabrikam.b2clogin.com. A bérlő nevének megadásakor használja az összes kisbetűs betűt.
  4. Engedélyezett metódusok esetén válassza a mindkettőt GET és a OPTIONS.
  5. Engedélyezett fejlécek esetén adjon meg csillagot (*).
  6. A közzétett fejlécek esetében adjon meg csillagot (*).
  7. Max. életkor esetén adja meg a 200-at.
  8. A lap tetején válassza a Mentés lehetőséget.

3.1 CORS tesztelése

Ellenőrizze, hogy készen áll-e az alábbi lépések végrehajtásával:

  1. Ismételje meg a CORS konfigurálását. Engedélyezett források esetén adja meg ahttps://www.test-cors.org
  2. Navigálás a www.test-cors.org
  3. A Távoli URL-cím mezőbe illessze be a HTML-fájl URL-címét. Például: https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Válassza a Kérés küldése lehetőséget. Az eredménynek a következőnek kell lennie XHR status: 200: . Ha hibaüzenetet kap, győződjön meg arról, hogy a CORS-beállítások helyesek. Előfordulhat, hogy törölnie kell a böngésző gyorsítótárát, vagy meg kell nyitnia egy privát böngészési munkamenetet a Ctrl+Shift+P billentyűkombináció lenyomásával.

További információ az Azure Storage-fiókok létrehozásáról és kezeléséről.

4. A felhasználói folyamat frissítése

  1. 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.
  2. Az Azure Portalon keresse meg és válassza ki az Azure AD B2C-t.
  3. A bal oldali menüben válassza a Felhasználói folyamatok lehetőséget, majd válassza ki a B2C_1_signupsignin1 felhasználói folyamatot.
  4. Válassza a Lapelrendezések lehetőséget, majd az Egyesített regisztrációs vagy bejelentkezési lapon válassza az Igen egyéni laptartalom használatához lehetőséget.
  5. Az Egyéni lap URI-jában adja meg a korábban rögzített custom-ui.html fájl URI-címét.
  6. A lap tetején válassza a Mentés lehetőséget.

5. A felhasználói folyamat tesztelése

  1. Az Azure AD B2C-bérlőben válassza ki a Felhasználói folyamatokat , és válassza ki a B2C_1_signupsignin1 felhasználói folyamatot.
  2. A lap tetején válassza a Felhasználói folyamat futtatása lehetőséget.
  3. A jobb oldali panelen válassza a Felhasználói folyamat futtatása gombot.

Az alábbi példához hasonló lapnak kell megjelennie a létrehozott CSS-fájl alapján középre állított elemekkel:

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

4. A bővítményfájl módosítása

A felhasználói felület testreszabásának konfigurálásához másolja a ContentDefinition és annak gyermekelemeit az alapfájlból a bővítményfájlba:

  1. Nyissa meg a szabályzat alapfájlját. For example, SocialAndLocalAccounts/TrustFrameworkBase.xml. Ez az alapfájl az egyéni szabályzatok kezdőcsomagjának egyik szabályzatfájlja, amelyet az előfeltétel, Az egyéni szabályzatok használatának első lépései című előfeltételben kellett volna beszereznie.

  2. Keresse meg és másolja ki a ContentDefinitions elem teljes tartalmát.

  3. Nyissa meg a bővítményfájlt. Például: TrustFrameworkExtensions.xml. Keresse meg a BuildingBlocks elemet. Ha az elem nem létezik, adja hozzá.

  4. Illessze be a BuildingBlocks elem gyermekeként másolt ContentDefinitions elem teljes tartalmát.

  5. Keresse meg a másolt XML-ben található Id="api.signuporsignin" ContentDefinition elemet.

  6. Módosítsa a LoadUri értékét a tárba feltöltött HTML-fájl URL-címére. For example, https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Az egyéni szabályzatnak a következő kódrészlethez hasonlóan kell kinéznie:

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

  7. Mentse a bővítményfájlt.

5. Töltse fel és tesztelje a frissített egyéni szabályzatot

5.1 Az egyéni szabályzat feltöltése

  1. 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.
  2. Keresse meg és válassza ki az Azure AD B2C-t.
  3. A Szabályzatok területen válassza az Identity Experience Framework lehetőséget.
  4. Válassza az Egyéni szabályzat feltöltése lehetőséget.
  5. Töltse fel a korábban módosított bővítményfájlt.

5.2 Az egyéni szabályzat tesztelése a Futtatás most funkcióval

  1. Válassza ki a feltöltött szabályzatot, majd válassza a Futtatás most lehetőséget.
  2. Regisztrálnia kell egy e-mail-címmel.

Dinamikus egyéni laptartalom URI-tartalmának konfigurálása

Egyéni Azure AD B2C-szabályzatok használatával elküldhet egy paramétert az URL-elérési úton vagy egy lekérdezési sztringben. A paraméterek a HTML-végpontnak való átadásával dinamikusan változtathatja az oldal tartalmát. Például megváltoztathatja a háttérképet az Azure AD B2C regisztrációs vagy bejelentkezési oldalán egy olyan paraméter alapján, amelyet a web- vagy mobilalkalmazásából ad át. A paraméter lehet bármely jogcímfeloldó, például az alkalmazásazonosító, a nyelvi azonosító vagy az egyéni lekérdezési sztring paraméter, például campaignId.

Lekérdezési sztringparaméterek küldése

Lekérdezési sztringparaméterek küldéséhez a függő entitás házirendjében adjon hozzá egy ContentDefinitionParameters elemet az alább látható módon.

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

A tartalomdefinícióban módosítsa a következő értékre LoadUrihttps://<app_name>.azurewebsites.net/home/unified: . Az egyéni szabályzatnak ContentDefinition a következő kódrészlethez hasonlóan kell kinéznie:

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

Amikor az Azure AD B2C betölti a lapot, hívást kezdeményez a webkiszolgáló végpontjához:

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

Dinamikus laptartalom URI-ja

A tartalom a használt paraméterek alapján különböző helyekről is lekérehető. A CORS-kompatibilis végponton állítson be egy mappastruktúrát a tartalom üzemeltetéséhez. A tartalmat például a következő struktúrában rendszerezheti. Gyökérmappa /mappa nyelvenként/html-fájljainként. Az egyéni lap URI-ja például a következőképpen nézhet ki:

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

Az Azure AD B2C elküldi a nyelv két betűs ISO-kódját francia fr nyelven:

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

Példasablonok

A felhasználói felület testreszabásához mintasablonokat itt talál:

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

Ez a projekt a következő sablonokat tartalmazza:

A minta használata:

  1. Klónozza az adattárat a helyi gépen. Válasszon egy sablonmappát /AzureBluevagy /MSA/classic.

  2. Töltse fel a sablonmappában és a mappában lévő összes fájlt a /src Blob Storage-ba az előző szakaszokban leírtak szerint.

  3. Ezután nyissa meg az egyes \*.html fájlokat a sablonmappában. Ezután cserélje le az https://login.microsoftonline.com URL-címek összes példányát a 2. lépésben feltöltött URL-címre. Például:

    A következőről:

    https://login.microsoftonline.com/templates/src/fonts/segoeui.WOFF

    Címzett:

    https://your-storage-account.blob.core.windows.net/your-container/templates/src/fonts/segoeui.WOFF

  4. Mentse a \*.html fájlokat, és töltse fel őket a Blob Storage-ba.

  5. Most módosítsa a szabályzatot, és mutasson a HTML-fájlra a korábban említett módon.

  6. Ha hiányzó betűtípusokat, képeket vagy CSS-t lát, ellenőrizze a hivatkozásokat a bővítményszabályzatban és a \*.html fájlokban.

Vállalati védjegyezési eszközök használata egyéni HTML-ben

Ha egyéni HTML-ben szeretné használni a céges védjegyzési objektumokat, adja hozzá a következő címkéket a <div id="api"> címkén kívül. A kép forrása helyett a háttérkép és a szalagcím emblémája látható.

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

Következő lépések

Megtudhatja, hogyan engedélyezheti az ügyféloldali JavaScript-kódot.