Udostępnij za pośrednictwem

ContentDefinitions

  • Artykuł

Uwaga

W usłudze Azure Active Directory B2C zasady niestandardowe są przeznaczone głównie do rozwiązywania złożonych scenariuszy. W przypadku większości scenariuszy zalecamy używanie wbudowanych przepływów użytkowników. Jeśli nie zostało to zrobione, dowiedz się więcej o niestandardowym pakiecie startowym zasad w temacie Wprowadzenie do zasad niestandardowych w usłudze Active Directory B2C.

Możesz dostosować wygląd i działanie dowolnego własnego profilu technicznego. Usługa Azure Active Directory B2C (Azure AD B2C) uruchamia kod w przeglądarce klienta i używa nowoczesnego podejścia o nazwie Współużytkowanie zasobów między źródłami (CORS).

Aby dostosować interfejs użytkownika, należy określić adres URL w elemecie ContentDefinition z dostosowaną zawartością HTML. W samozwańczym profilu technicznym lub orchestrationStep wskazujesz ten identyfikator definicji zawartości. Definicja zawartości może zawierać element LocalizedResourcesReferences , który określa listę zlokalizowanych zasobów do załadowania. Usługa Azure AD B2C scala elementy interfejsu użytkownika z zawartością HTML ładowaną z adresu URL, a następnie wyświetla stronę użytkownikowi.

Element ContentDefinitions zawiera adresy URL szablonów HTML5, których można używać w podróży użytkownika. Identyfikator URI strony HTML5 jest używany dla określonego kroku interfejsu użytkownika. Na przykład strony logowania lub rejestracji, resetowania hasła lub błędów. Wygląd i działanie można zmodyfikować, przesłaniając identyfikator LoadUri dla pliku HTML5. Możesz tworzyć nowe definicje zawartości zgodnie z potrzebami. Ten element może zawierać odwołanie do zlokalizowanych zasobów do identyfikatora lokalizacji określonego w elemencie Lokalizacja .

W poniższym przykładzie przedstawiono identyfikator definicji zawartości i definicję zlokalizowanych zasobów:

<ContentDefinition Id="api.localaccountsignup">
  <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
  <DataUri>urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0</DataUri>
  <Metadata>
    <Item Key="DisplayName">Local account sign up page</Item>
  </Metadata>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.localaccountsignup.en" />
    <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.localaccountsignup.es" />
    ...

Metadane lokalnego profilu technicznego LocalAccountSignUpWithLogonEmail zawierają identyfikator definicji zawartości ContentDefinitionReferenceId ustawiony na wartość api.localaccountsignup

<TechnicalProfile Id="LocalAccountSignUpWithLogonEmail">
  <DisplayName>Email signup</DisplayName>
  <Protocol Name="Proprietary" Handler="Web.TPEngine.Providers.SelfAssertedAttributeProvider, Web.TPEngine, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null" />
  <Metadata>
    <Item Key="ContentDefinitionReferenceId">api.localaccountsignup</Item>
    ...
  </Metadata>
  ...

ContentDefinition

Element ContentDefinition zawiera następujący atrybut:

Atrybut Wymagane Opis
Id Tak Identyfikator definicji zawartości. Wartość jest określona w sekcji Identyfikatory definicji zawartości w dalszej części tej strony.

Element ContentDefinition zawiera następujące elementy:

Element Wystąpień Opis
Identyfikator LoadUri 1:1 Ciąg zawierający adres URL strony HTML5 dla definicji zawartości.
Identyfikator URI odzyskiwania 1:1 Ciąg zawierający adres URL strony HTML do wyświetlania błędu związanego z definicją zawartości. Obecnie nie jest używana, wartość musi mieć wartość ~/common/default_page_error.html.
Identyfikator DataUri 1:1 Ciąg zawierający względny adres URL pliku HTML, który zapewnia środowisko użytkownika do wywołania dla kroku.
Metadane 0:1 Kolekcja par klucz/wartość zawierająca metadane używane przez definicję zawartości.
LocalizedResourcesReferences 0:1 Kolekcja zlokalizowanych odwołań do zasobów. Ten element służy do dostosowywania lokalizacji interfejsu użytkownika i atrybutu oświadczeń.

Identyfikator LoadUri

Element LoadUri służy do określania adresu URL strony HTML5 dla definicji zawartości. Pakiety początkowe zasad niestandardowych B2C Azure AD zawierają definicje zawartości, które używają stron HTML Azure AD B2C. Identyfikator LoadUri rozpoczyna się od ~ciągu , który jest ścieżką względną do dzierżawy usługi Azure AD B2C.

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  ...
</ContentDefinition>

Interfejs użytkownika można dostosować przy użyciu szablonów HTML. W przypadku korzystania z szablonów HTML podaj bezwzględny adres URL. Poniższy przykład ilustruje definicję zawartości z szablonem HTML:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>https://your-storage-account.blob.core.windows.net/your-container/customize-ui.html</LoadUri>
  ...
</ContentDefinition>

Identyfikator DataUri

Element DataUri służy do określania identyfikatora strony. Azure AD B2C używa identyfikatora strony do ładowania i inicjowania elementów interfejsu użytkownika i kodu JavaScript po stronie klienta. Format wartości to urn:com:microsoft:aad:b2c:elements:page-name:version. W poniższej tabeli wymieniono identyfikatory stron, których można użyć.

Identyfikator strony Opis
globalexception Wyświetla stronę błędu po wystąpieniu wyjątku lub błędu.
providerselection, idpselection Wyświetla listę dostawców tożsamości, których użytkownicy mogą wybierać podczas logowania.
unifiedssp Wyświetla formularz logowania przy użyciu konta lokalnego opartego na adresie e-mail lub nazwie użytkownika. Ta wartość udostępnia również link "Zachowaj funkcję logowania mnie" i "Nie pamiętasz hasła?".
unifiedssd Wyświetla formularz logowania przy użyciu konta lokalnego opartego na adresie e-mail lub nazwie użytkownika. Ten identyfikator strony jest przestarzały. Zamiast tego użyj identyfikatora unifiedssp strony.
multifactor Weryfikuje numery telefonów przy użyciu tekstu lub głosu podczas rejestracji lub logowania.
selfasserted Wyświetla formularz do zbierania danych od użytkownika. Umożliwia na przykład użytkownikom tworzenie lub aktualizowanie profilu.

Wybieranie układu strony

Kod po stronie klienta języka JavaScript można włączyć, wstawiając contract między elements typem strony i . Na przykład urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

Część DataUriwersji określa pakiet zawartości zawierającej kod HTML, CSS i JavaScript dla elementów interfejsu użytkownika w zasadach. Jeśli zamierzasz włączyć kod po stronie klienta JavaScript, elementy oparte na języku JavaScript muszą być niezmienne. Jeśli nie są one niezmienne, wszelkie zmiany mogą spowodować nieoczekiwane zachowanie na stronach użytkowników. Aby zapobiec tym problemom, wymuś użycie układu strony i określ wersję układu strony. Dzięki temu wszystkie definicje zawartości oparte na języku JavaScript są niezmienne. Nawet jeśli nie zamierzasz włączyć języka JavaScript, nadal musisz określić wersję układu strony dla stron.

W poniższym przykładzie przedstawiono identyfikator DataUri wersji selfasserted1.2.0:

<!-- 
<BuildingBlocks> 
  <ContentDefinitions>-->
    <ContentDefinition Id="api.localaccountpasswordreset">
      <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
      <Metadata>
        <Item Key="DisplayName">Local account change password page</Item>
      </Metadata>
    </ContentDefinition>
  <!-- 
  </ContentDefinitions> 
</BuildingBlocks> -->

Migrowanie do układu strony

Aby przeprowadzić migrację ze starej wartości identyfikatora DataUri (bez kontraktu strony) do wersji układu strony, dodaj wyraz contract , a następnie wersję strony. Użyj poniższej tabeli, aby przeprowadzić migrację ze starej wartości identyfikatora DataUri do wersji układu strony.

Stara wartość identyfikatora DataUri Nowa wartość identyfikatora DataUri
urn:com:microsoft:aad:b2c:elements:globalexception:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1
urn:com:microsoft:aad:b2c:elements:globalexception:1.1.0 urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1
urn:com:microsoft:aad:b2c:elements:idpselection:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1
urn:com:microsoft:aad:b2c:elements:selfasserted:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7
urn:com:microsoft:aad:b2c:elements:selfasserted:1.1.0 urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.7
urn:com:microsoft:aad:b2c:elements:unifiedssd:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:unifiedssd:1.2.1
urn:com:microsoft:aad:b2c:elements:unifiedssp:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5
urn:com:microsoft:aad:b2c:elements:unifiedssp:1.1.0 urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.5
urn:com:microsoft:aad:b2c:elements:multifactor:1.0.0 urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5
urn:com:microsoft:aad:b2c:elements:multifactor:1.1.0 urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5

W poniższym przykładzie przedstawiono identyfikatory definicji zawartości i odpowiadający mu identyfikator DataUri z najnowszą wersją strony:

<!-- 
<BuildingBlocks> -->
  <ContentDefinitions>
    <ContentDefinition Id="api.error">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.idpselections">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.idpselections.signup">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.1</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.signuporsignin">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:2.1.7</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.selfasserted">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.selfasserted.profileupdate">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.localaccountsignup">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.localaccountpasswordreset">
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:2.1.14</DataUri>
    </ContentDefinition>
    <ContentDefinition Id="api.phonefactor">
      <RecoveryUri>~/common/default_page_error.html</RecoveryUri>
      <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.5</DataUri>
    </ContentDefinition>
  </ContentDefinitions>
<!-- 
</BuildingBlocks> -->

Metadane

Element Metadata zawiera następujące elementy:

Element Wystąpień Opis
Element 0:n Metadane, które odnoszą się do definicji zawartości.

Element Item elementu Metadata zawiera następujące atrybuty:

Atrybut Wymagane Opis
Klucz Tak Klucz metadanych.

Klucze metadanych

Definicja zawartości obsługuje następujące elementy metadanych:

Klucz Wymagane Opis
Nazwa wyświetlana Nie Ciąg zawierający nazwę definicji zawartości.

LocalizedResourcesReferences

Element LocalizedResourcesReferences zawiera następujące elementy:

Element Wystąpień Opis
LocalizedResourcesReference 1:n Lista zlokalizowanych odwołań do zasobów dla definicji zawartości.

Element LocalizedResourcesReference zawiera następujące atrybuty:

Atrybut Wymagane Opis
Język Tak Ciąg, który zawiera obsługiwany język dla zasad na RFC 5646 — tagi identyfikacji języków.
LocalizedResourcesReferenceId Tak Identyfikator elementu LocalizedResources .

W poniższym przykładzie przedstawiono definicję zawartości rejestracji lub logowania z odwołaniem do lokalizacji dla języka angielskiego, francuskiego i hiszpańskiego:

<ContentDefinition Id="api.signuporsignin">
  <LoadUri>~/tenant/default/unified.cshtml</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>
  <LocalizedResourcesReferences MergeBehavior="Prepend">
    <LocalizedResourcesReference Language="en" LocalizedResourcesReferenceId="api.signuporsignin.en" />
    <LocalizedResourcesReference Language="fr" LocalizedResourcesReferenceId="api.signuporsignin.rf" />
    <LocalizedResourcesReference Language="es" LocalizedResourcesReferenceId="api.signuporsignin.es" />
</LocalizedResourcesReferences>
</ContentDefinition>

Aby dowiedzieć się, jak dodać obsługę lokalizacji do definicji zawartości, zobacz Lokalizacja.

Identyfikatory definicji zawartości

Atrybut ID elementu ContentDefinition określa typ strony powiązanej z definicją zawartości. Element definiuje kontekst, który ma być stosowany przez niestandardowy szablon HTML5/CSS. W poniższej tabeli opisano zestaw identyfikatorów definicji zawartości rozpoznawanych przez platformę środowiska tożsamości oraz typy stron, które się z nimi wiążą. Możesz utworzyć własne definicje zawartości z dowolnym identyfikatorem.

ID (Identyfikator) Szablon domyślny Opis
api.error exception.cshtml Strona błędu — wyświetla stronę błędu w przypadku wystąpienia wyjątku lub błędu.
api.idpselections idpSelector.cshtml Strona wyboru dostawcy tożsamości — wyświetla listę dostawców tożsamości, którzy użytkownicy mogą wybierać podczas logowania. Opcje to zazwyczaj dostawcy tożsamości przedsiębiorstwa, dostawcy tożsamości społecznościowych, tacy jak Facebook i Google+, lub konta lokalne.
api.idpselections.signup idpSelector.cshtml Wybór dostawcy tożsamości na potrzeby rejestracji — wyświetla listę dostawców tożsamości, którzy użytkownicy mogą wybierać podczas rejestracji. Opcje to zazwyczaj dostawcy tożsamości przedsiębiorstwa, dostawcy tożsamości społecznościowych, tacy jak Facebook i Google+, lub konta lokalne.
api.localaccountpasswordreset selfasserted.cshtml Nie pamiętam strony hasła — wyświetla formularz, który użytkownicy muszą ukończyć w celu zainicjowania resetowania hasła.
api.localaccountsignin selfasserted.cshtml Strona logowania konta lokalnego — wyświetla formularz logowania przy użyciu konta lokalnego opartego na adresie e-mail lub nazwie użytkownika. Formularz może zawierać pole wprowadzania tekstu i pole wprowadzania hasła.
api.localaccountsignup selfasserted.cshtml Strona rejestracji konta lokalnego — wyświetla formularz rejestracji dla konta lokalnego opartego na adresie e-mail lub nazwie użytkownika. Formularz 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.
api.phonefactor multifactor-1.0.0.cshtml Strona uwierzytelniania wieloskładnikowego — weryfikuje numery telefonów przy użyciu tekstu lub głosu podczas rejestracji lub logowania.
api.selfasserted selfasserted.cshtml Strona rejestracji konta społecznościowego — wyświetla formularz, który użytkownicy muszą wykonać po zarejestrowaniu się przy użyciu istniejącego konta od dostawcy tożsamości społecznościowych. Ta strona jest podobna do poprzedniej strony tworzenia konta społecznościowego, z wyjątkiem pól wprowadzania hasła.
api.selfasserted.profileupdate updateprofile.cshtml Strona aktualizacji profilu — wyświetla formularz, do którego użytkownicy mogą uzyskiwać dostęp w celu zaktualizowania profilu. Ta strona jest podobna do strony rejestracji konta społecznościowego, z wyjątkiem pól wprowadzania hasła.
api.signuporsignin unified.cshtml Ujednolicona strona rejestracji lub logowania — 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 lub Google+, lub kont lokalnych.

Następne kroki

Aby zapoznać się z przykładem dostosowywania interfejsu użytkownika przy użyciu definicji zawartości, zobacz:

Dostosowywanie interfejsu użytkownika aplikacji przy użyciu zasad niestandardowych