Udostępnij za pośrednictwem

Dostosowywanie interfejsu użytkownika za pomocą szablonów HTML w Azure Active Directory B2C

  • Artykuł

Przed rozpoczęciem użyj selektora Wybierz typ zasad, aby wybrać typ konfigurowanych zasad. Usługa Azure Active Directory B2C oferuje dwie metody definiowania sposobu interakcji użytkowników z aplikacjami: za pomocą wstępnie zdefiniowanych przepływów użytkowników lub w pełni konfigurowalnych zasad niestandardowych. Kroki wymagane w tym artykule są różne dla każdej metody.

Znakowanie i dostosowywanie interfejsu użytkownika wyświetlanego przez usługę Azure Active Directory B2C (Azure AD B2C) klientom pomaga zapewnić bezproblemowe środowisko użytkownika w aplikacji. Te środowiska obejmują rejestrowanie, logowanie, edytowanie profilu i resetowanie hasła. W tym artykule przedstawiono metody dostosowywania interfejsu użytkownika.

Napiwek

Jeśli chcesz zmodyfikować tylko logo transparentu, obraz tła i kolor tła stron przepływu użytkownika, możesz wypróbować funkcję znakowania firmy.

Omówienie niestandardowego kodu HTML i CSS

Usługa Azure AD B2C uruchamia kod w przeglądarce klienta przy użyciu współużytkowania zasobów między źródłami (CORS). W czasie wykonywania zawartość jest ładowana z adresu URL określonego w przepływie użytkownika lub zasadach niestandardowych. Każda strona w środowisku użytkownika ładuje jego zawartość z adresu URL określonego dla tej strony. Po załadowaniu zawartości z adresu URL zostanie ona scalona z fragmentem HTML wstawionym przez usługę Azure AD B2C, a następnie zostanie wyświetlona strona klientowi.

Custom page content margin

Niestandardowa zawartość strony HTML

Utwórz stronę HTML z własnym znakowaniem, aby obsługiwać zawartość strony niestandardowej. Ta strona może być stroną statyczną *.html lub stroną dynamiczną, taką jak .NET, Node.js lub PHP, jednak usługa Azure B2C nie obsługuje żadnych aparatów wyświetlania. Każde renderowanie strony dynamicznej po stronie serwera musi być wykonywane przez dedykowaną aplikację internetową.

Zawartość strony niestandardowej może zawierać dowolne elementy HTML, w tym CSS i JavaScript, ale nie może zawierać niezabezpieczonych elementów, takich jak iframe. Jedynym wymaganym elementem jest element div z ustawioną wartością id api, taką jak ten <div id="api"></div> na stronie HTML.

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

Dostosowywanie domyślnych stron usługi Azure AD B2C

Zamiast tworzyć zawartość strony niestandardowej od podstaw, możesz dostosować domyślną zawartość strony usługi Azure AD B2C.

W poniższej tabeli wymieniono domyślną zawartość strony udostępnioną przez usługę Azure AD B2C. Pobierz pliki i użyj ich jako punktu wyjścia do tworzenia własnych stron niestandardowych. Zobacz Przykładowe szablony, aby dowiedzieć się, jak pobrać przykładowe szablony i korzystać z nich.

Strona opis Szablony
Ujednolicona rejestracja lub logowanie Ta strona obsługuje proces rejestracji i logowania użytkownika. Użytkownicy mogą używać dostawców tożsamości przedsiębiorstwa, dostawców tożsamości społecznościowych, takich jak Facebook, konto Microsoft lub konta lokalne. Classic, Ocean Blue i Slate Gray.
Logowanie (tylko) Strona logowania jest również nazywana wyborem dostawcy tożsamości. Obsługuje logowanie użytkownika przy użyciu konta lokalnego lub dostawców tożsamości federacyjnych. Użyj tej strony, aby zezwolić na logowanie bez możliwości rejestracji. Na przykład zanim użytkownik będzie mógł edytować swój profil. Classic, Ocean Blue i Slate Gray.
Self-Asserted Większość interakcji w usłudze Azure AD B2C, w której oczekuje się, że użytkownik dostarczy dane wejściowe, są samozwańcze. Na przykład strona rejestracji, strona logowania lub strona resetowania hasła. Użyj tego szablonu jako niestandardowej zawartości strony dla strony rejestracji konta społecznościowego, strony rejestracji konta lokalnego, strony logowania do konta lokalnego, resetowania hasła, edytowania profilu, strony blokowania i nie tylko. Strona samodzielnie asercjalna może zawierać różne kontrolki wejściowe, takie jak: pole wprowadzania tekstu, pole wprowadzania hasła, przycisk radiowy, pola rozwijane zaznaczania jednokrotnego i pola wyboru wielokrotnego wyboru. Classic, Ocean Blue i Slate Gray.
Uwierzytelnianie wieloskładnikowe Na tej stronie użytkownicy mogą weryfikować swoje numery telefonów (przy użyciu tekstu lub głosu) podczas rejestracji lub logowania. Classic, Ocean Blue i Slate Gray.
Błąd Ta strona jest wyświetlana w przypadku wystąpienia wyjątku lub błędu. Classic, Ocean Blue i Slate Gray.

Hostowanie zawartości strony

W przypadku używania własnych plików HTML i CSS do dostosowywania interfejsu użytkownika hostowanie zawartości interfejsu użytkownika na dowolnym publicznie dostępnym punkcie końcowym HTTPS obsługującym mechanizm CORS. Na przykład usługa Azure Blob Storage, usługi aplikacja systemu Azure Services, serwery internetowe, sieci CDN, usługi AWS S3 lub systemy udostępniania plików.

Wskazówki dotyczące korzystania z niestandardowej zawartości strony

  • Użyj bezwzględnego adresu URL w przypadku uwzględnienia zasobów zewnętrznych, takich jak multimedia, css i pliki JavaScript w pliku HTML.

  • Za pomocą układu strony w wersji 1.2.0 lub nowszej można dodać data-preload="true" atrybut w tagach HTML, aby kontrolować kolejność ładowania arkuszy CSS i JavaScript. W programie data-preload="true"strona jest tworzona przed pokazaniem użytkownikowi. Ten atrybut pomaga uniemożliwić "migotanie" strony przez wstępne załadowanie pliku CSS bez wyświetlania użytkownikowi nieoznakowanego kodu HTML. Poniższy fragment kodu HTML przedstawia użycie tagu data-preload .

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

  • Zalecamy rozpoczęcie od domyślnej zawartości strony i skompilowanie jej na początku.

  • Możesz dołączyć kod JavaScript do niestandardowej zawartości.

  • Obsługiwane wersje przeglądarki to:

    • Internet Explorer 11, 10 i Microsoft Edge
    • Ograniczona obsługa programu Internet Explorer 9 i 8
    • Google Chrome 42.0 i nowsze
    • Mozilla Firefox 38.0 i nowsze
    • Safari dla systemów iOS i macOS w wersji 12 lub nowszej

  • Ze względu na ograniczenia zabezpieczeń usługa Azure AD B2C nie obsługuje frameelementów , iframeani form HTML.

Lokalizowanie zawartości

Zawartość HTML można zlokalizować, włączając dostosowywanie języka w dzierżawie usługi Azure AD B2C. Włączenie tej funkcji umożliwia usłudze Azure AD B2C ustawienie atrybutu języka strony HTML i przekazanie parametru ui_locales openID Połączenie do punktu końcowego.

Podejście oparte na jednym szablonie

Podczas ładowania strony usługa Azure AD B2C ustawia atrybut języka strony HTML przy użyciu bieżącego języka. Na przykład <html lang="en">. Aby renderować różne style dla bieżącego języka, użyj selektora CSS wraz z definicją CSS :lang .

W poniższym przykładzie zdefiniowano następujące klasy:

  • imprint-en — Używany, gdy bieżący język to angielski.
  • imprint-de - Używany, gdy bieżący język jest niemiecki.
  • imprint - Domyślna klasa, która jest używana, gdy bieżący język nie jest angielski lub niemiecki.
.imprint-en:lang(en),
.imprint-de:lang(de) {
    display: inherit !important;
}
.imprint {
    display: none;
}

Następujące elementy HTML będą wyświetlane lub ukryte zgodnie z językiem strony:

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

Podejście obejmujące wiele szablonów

Funkcja dostosowywania języka umożliwia usłudze Azure AD B2C przekazanie parametru ui_locales openID Połączenie do punktu końcowego. Serwer zawartości może użyć tego parametru, aby zapewnić strony HTML specyficzne dla języka.

Uwaga

Usługa Azure AD B2C nie przekazuje parametrów Połączenie openID, takich jak ui_locales, do stron wyjątków.

Zawartość można ściągnąć z różnych miejsc na podstawie używanych ustawień regionalnych. W punkcie końcowym z obsługą mechanizmu CORS należy skonfigurować strukturę folderów do hostowania zawartości dla określonych języków. Jeśli używasz wartości {Culture:RFC5646}symbolu wieloznakowego, należy wywołać metodę .

Na przykład identyfikator URI strony niestandardowej może wyglądać następująco:

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

Stronę można załadować po francusku, ściągając zawartość z:

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

Przewodnik po niestandardowej zawartości strony

Oto omówienie procesu:

  1. Przygotuj lokalizację do hostowania niestandardowej zawartości strony (publicznie dostępnego punktu końcowego HTTPS z obsługą mechanizmu CORS).
  2. Pobierz i dostosuj domyślny plik zawartości strony, na przykład unified.html.
  3. Opublikuj zawartość strony niestandardowej publicznie dostępnego punktu końcowego HTTPS.
  4. Ustaw współużytkowanie zasobów między źródłami (CORS) dla aplikacji internetowej.
  5. Wskaż zasady identyfikatorowi URI zawartości zasad niestandardowych.

Wymagania wstępne

1. Tworzenie zawartości HTML

Utwórz zawartość strony niestandardowej z nazwą marki produktu w tytule.

  1. Skopiuj poniższy fragment kodu HTML. Jest to dobrze sformułowany kod HTML5 z pustym elementem o nazwie div id="api"></div> znajdującym się w tagach <treści>.< Ten element wskazuje, gdzie ma zostać wstawiona zawartość usługi Azure AD B2C.

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

  2. Wklej skopiowany fragment kodu w edytorze tekstów

  3. Użyj css, aby stylować elementy interfejsu użytkownika wstawione do strony przez usługę Azure AD B2C. W poniższym przykładzie pokazano prosty plik CSS, który zawiera również ustawienia dla wstawionych elementów HTML do rejestracji:

    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. Zapisz plik jako customize-ui.html.

Uwaga

Elementy formularza HTML zostaną usunięte z powodu ograniczeń zabezpieczeń, jeśli używasz login.microsoftonline.com. Jeśli chcesz użyć elementów formularza HTML w niestandardowej zawartości HTML, użyj b2clogin.com.

2. Tworzenie konta usługi Azure Blob Storage

W tym artykule użyjemy usługi Azure Blob Storage do hostowania naszej zawartości. Możesz wybrać hostowanie zawartości na serwerze internetowym, ale musisz włączyć mechanizm CORS na serwerze internetowym.

Uwaga

W dzierżawie usługi Azure AD B2C nie można aprowizować magazynu obiektów blob. Ten zasób należy utworzyć w dzierżawie firmy Microsoft Entra.

Aby hostować zawartość HTML w usłudze Blob Storage, wykonaj następujące kroki:

  1. Zaloguj się w witrynie Azure Portal.
  2. Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się do dzierżawy Microsoft Entra ID z menu Katalogi i subskrypcje.
  3. W witrynie Azure Portal wyszukaj i wybierz pozycję Konta magazynu
  4. Wybierz + Utwórz.
  5. Wybierz subskrypcję konta magazynu.
  6. Utwórz grupę zasobów lub wybierz istniejącą.
  7. Wprowadź unikatową nazwę konta magazynu dla konta magazynu.
  8. Wybierz region geograficzny dla konta magazynu.
  9. Wydajność może pozostać w warstwie Standardowa.
  10. Nadmiarowość może pozostać magazynem geograficznie nadmiarowym (GRS)
  11. Wybierz pozycję Przejrzyj i utwórz i zaczekaj kilka sekund na uruchomienie weryfikacji identyfikatora entra firmy Microsoft.
  12. Wybierz pozycję Utwórz, aby utworzyć konto magazynu. Po zakończeniu wdrażania zostanie otwarta automatycznie strona konta magazynu lub musisz wybrać pozycję Przejdź do zasobu.

2.1 Tworzenie kontenera

Aby utworzyć kontener publiczny w usłudze Blob Storage, wykonaj następujące kroki:

  1. W obszarze Magazyn danych w menu po lewej stronie wybierz pozycję Kontenery.
  2. Wybierz pozycję + Kontener.
  3. W polu Nazwa wprowadź wartość root. Nazwa może być nazwą wybranej nazwy, na przykład contoso, ale w tym przykładzie używamy katalogu głównego dla uproszczenia.
  4. W obszarze Poziom dostępu publicznego wybierz pozycję Obiekt blob. Wybierając opcję Obiekt blob , zezwalasz na anonimowy publiczny dostęp tylko do odczytu dla tego kontenera.
  5. Wybierz pozycję Utwórz, aby utworzyć kontener.
  6. Wybierz katalog główny , aby otworzyć nowy kontener.

2.2 Przekazywanie niestandardowych plików zawartości strony

  1. Wybierz opcję Prześlij.
  2. Wybierz ikonę folderu obok pozycji Wybierz plik.
  3. Przejdź do strony i wybierz pozycję customize-ui.html, który został utworzony wcześniej w sekcji Dostosowywanie interfejsu użytkownika strony.
  4. Jeśli chcesz przekazać do podfolderu, rozwiń węzeł Zaawansowane i wprowadź nazwę folderu w obszarze Przekaż do folderu.
  5. Wybierz opcję Prześlij.
  6. Wybierz przekazany obiekt blob customize-ui.html.
  7. Po prawej stronie pola tekstowego adresu URL wybierz ikonę Kopiuj do schowka , aby skopiować adres URL do schowka.
  8. W przeglądarce internetowej przejdź do skopiowanego adresu URL, aby sprawdzić, czy przekazany obiekt blob jest dostępny. Jeśli jest niedostępna, na przykład jeśli wystąpi ResourceNotFound błąd, upewnij się, że typ dostępu kontenera jest ustawiony na obiekt blob.

3. Konfigurowanie mechanizmu CORS

Skonfiguruj magazyn obiektów blob na potrzeby współużytkowania zasobów między źródłami, wykonując następujące kroki:

  1. Przejdź do swojego konta magazynu.
  2. W menu po lewej stronie w obszarze Ustawienia wybierz pozycję Udostępnianie zasobów (CORS).
  3. W polu Dozwolone źródła wprowadź wartość https://your-tenant-name.b2clogin.com. Zastąp your-tenant-name ciąg nazwą dzierżawy usługi Azure AD B2C. Na przykład https://fabrikam.b2clogin.com. Podczas wprowadzania nazwy dzierżawy użyj wszystkich małych liter.
  4. W obszarze Dozwolone metody wybierz wartości i OPTIONSGET .
  5. W polu Dozwolone nagłówki wprowadź gwiazdkę (*).
  6. W polu Uwidocznione nagłówki wprowadź gwiazdkę (*).
  7. W polu Maksymalny wiek wprowadź wartość 200.
  8. W górnej części strony wybierz pozycję Zapisz.

3.1 Test CORS

Sprawdź, czy wszystko jest gotowe, wykonując następujące czynności:

  1. Powtórz krok konfigurowania mechanizmu CORS. W polu Dozwolone źródła wprowadź https://www.test-cors.org
  2. Przejdź do www.test-cors.org
  3. W polu Zdalny adres URL wklej adres URL pliku HTML. Na przykład https://your-account.blob.core.windows.net/root/azure-ad-b2c/unified.html
  4. Wybierz pozycję Wyślij żądanie. Wynik powinien mieć wartość XHR status: 200. Jeśli wystąpi błąd, upewnij się, że ustawienia mechanizmu CORS są poprawne. Może być również konieczne wyczyszczenie pamięci podręcznej przeglądarki lub otwarcie sesji przeglądania w trybie prywatnym przez naciśnięcie klawiszy Ctrl+Shift+P.

Dowiedz się więcej o tworzeniu kont usługi Azure Storage i zarządzaniu nimi.

4. Aktualizowanie przepływu użytkownika

  1. Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się do dzierżawy usługi Azure AD B2C z menu Katalogi i subskrypcje.
  2. W witrynie Azure Portal wyszukaj i wybierz pozycję Azure AD B2C.
  3. W menu po lewej stronie wybierz pozycję Przepływy użytkownika, a następnie wybierz przepływ użytkownika B2C_1_signupsignin1 .
  4. Wybierz pozycję Układy stron, a następnie w obszarze Ujednolicona rejestracja lub strona logowania wybierz pozycję Tak dla opcji Użyj niestandardowej zawartości strony.
  5. W polu Identyfikator URI strony niestandardowej wprowadź identyfikator URI dla zarejestrowanego wcześniej pliku custom-ui.html .
  6. W górnej części strony wybierz pozycję Zapisz.

5. Testowanie przepływu użytkownika

  1. W dzierżawie usługi Azure AD B2C wybierz pozycję Przepływy użytkownika i wybierz przepływ użytkownika B2C_1_signupsignin1 .
  2. W górnej części strony wybierz pozycję Uruchom przepływ użytkownika.
  3. W okienku po prawej stronie wybierz przycisk Uruchom przepływ użytkownika.

Powinna zostać wyświetlona strona podobna do poniższego przykładu z elementami wyśrodkowymi na podstawie utworzonego pliku CSS:

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

4. Modyfikowanie pliku rozszerzeń

Aby skonfigurować dostosowywanie interfejsu użytkownika, skopiuj element ContentDefinition i jego elementy podrzędne z pliku podstawowego do pliku rozszerzeń:

  1. Otwórz plik podstawowy zasad. Na przykład SocialAndLocalAccounts/TrustFrameworkBase.xml. Ten plik podstawowy jest jednym z plików zasad zawartych w niestandardowym pakiecie startowym zasad, które należy uzyskać wstępnie, Wprowadzenie do zasad niestandardowych.

  2. Wyszukaj i skopiuj całą zawartość elementu ContentDefinitions .

  3. Otwórz plik rozszerzenia. Na przykład TrustFrameworkExtensions.xml. Wyszukaj element BuildingBlocks. Jeśli element nie istnieje, dodaj go.

  4. Wklej całą zawartość elementu ContentDefinitions skopiowaną jako element podrzędny elementu BuildingBlocks .

  5. Wyszukaj element ContentDefinition, który zawiera Id="api.signuporsignin" skopiowany kod XML.

  6. Zmień wartość identyfikatora LoadUri na adres URL pliku HTML przekazanego do magazynu. Na przykład https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html.

    Zasady niestandardowe powinny wyglądać podobnie do następującego fragmentu kodu:

    <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. Zapisz plik rozszerzeń.

5. Przekazywanie i testowanie zaktualizowanych zasad niestandardowych

5.1 Przekazywanie zasad niestandardowych

  1. Jeśli masz dostęp do wielu dzierżaw, wybierz ikonę Ustawienia w górnym menu, aby przełączyć się do dzierżawy usługi Azure AD B2C z menu Katalogi i subskrypcje.
  2. Wyszukaj i wybierz Azure AD B2C.
  3. W obszarze Zasady wybierz pozycję Identity Experience Framework.
  4. Wybierz pozycję Przekaż zasady niestandardowe.
  5. Przekaż plik rozszerzeń, który został wcześniej zmieniony.

5.2 Przetestuj zasady niestandardowe przy użyciu polecenia Uruchom teraz

  1. Wybierz przekazane zasady, a następnie wybierz pozycję Uruchom teraz.
  2. Powinno być możliwe zarejestrowanie się przy użyciu adresu e-mail.

Konfigurowanie dynamicznego niestandardowego identyfikatora URI zawartości strony

Za pomocą zasad niestandardowych usługi Azure AD B2C można wysłać parametr w ścieżce adresu URL lub ciąg zapytania. Przekazanie parametru do punktu końcowego HTML pozwala na dynamiczną zmianę zawartość strony. Na podstawie parametru przekazywanego z aplikacji internetowej lub aplikacji mobilnej można na przykład zmienić obraz tła na stronie rejestracji lub logowania usługi Azure AD B2C. Parametr może być dowolnym modułem rozpoznawania oświadczeń, takim jak identyfikator aplikacji, identyfikator języka lub niestandardowy parametr ciągu zapytania, taki jak campaignId.

Wysyłanie parametrów ciągu zapytania

Aby wysłać parametry ciągu zapytania, w zasadach jednostki uzależnionej dodaj ContentDefinitionParameters element, jak pokazano poniżej.

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

W definicji zawartości zmień wartość LoadUri na https://<app_name>.azurewebsites.net/home/unified. Zasady niestandardowe ContentDefinition powinny wyglądać podobnie do następującego fragmentu kodu:

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

Gdy usługa Azure AD B2C ładuje stronę, wykonuje wywołanie punktu końcowego serwera internetowego:

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

Identyfikator URI zawartości strony dynamicznej

Zawartość można ściągnąć z różnych miejsc na podstawie użytych parametrów. W punkcie końcowym z obsługą mechanizmu CORS skonfiguruj strukturę folderów do hostowania zawartości. Możesz na przykład zorganizować zawartość w następującej strukturze. Folder główny /folder na język/pliki HTML. Na przykład identyfikator URI strony niestandardowej może wyglądać następująco:

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

Usługa Azure AD B2C wysyła dwuliterowy kod ISO dla języka fr francuskiego:

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

Przykładowe szablony

Przykładowe szablony dostosowywania interfejsu użytkownika można znaleźć tutaj:

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

Ten projekt zawiera następujące szablony:

Aby użyć przykładu:

  1. Sklonuj repozytorium na komputerze lokalnym. Wybierz folder /AzureBlueszablonu , /MSAlub /classic.

  2. Przekaż wszystkie pliki w folderze szablonu i folderze /src do usługi Blob Storage zgodnie z opisem w poprzednich sekcjach.

  3. Następnie otwórz każdy \*.html plik w folderze szablonu. Następnie zastąp wszystkie wystąpienia adresów https://login.microsoftonline.com URL adresem URL przekazanym w kroku 2. Przykład:

    Od:

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

    Do:

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

  4. \*.html Zapisz pliki i przekaż je do magazynu obiektów blob.

  5. Teraz zmodyfikuj zasady, wskazując plik HTML, jak wspomniano wcześniej.

  6. Jeśli widzisz brakujące czcionki, obrazy lub arkusze CSS, sprawdź odwołania w zasadach rozszerzeń i \*.html plikach.

Używanie zasobów znakowania firmowego w niestandardowym kodzie HTML

Aby używać zasobów znakowania firmowego w niestandardowym kodzie HTML, dodaj następujące tagi poza tagiem <div id="api"> . Źródło obrazu jest zastępowane obrazem tła i logo baneru.

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

Następne kroki

Dowiedz się, jak włączyć kod JavaScript po stronie klienta.