Innehållsdefinitioner

Du kan anpassa utseendet och känslan för alla självsäkra tekniska profiler. Azure Active Directory B2C (Azure AD B2C) kör kod i kundens webbläsare och använder en modern metod som kallas Resursdelning mellan ursprung (CORS).

Om du vill anpassa användargränssnittet anger du en URL i elementet ContentDefinition med anpassat HTML-innehåll. I den självsäkra tekniska profilen eller OrchestrationStep pekar du på den innehållsdefinitionsidentifieraren. Innehållsdefinitionen kan innehålla elementet LocalizedResourcesReferences som anger en lista över lokaliserade resurser som ska läsas in. Azure AD B2C sammanfogar användargränssnittselement med HTML-innehållet som läses in från url:en och visar sedan sidan för användaren.

Elementet ContentDefinitions innehåller URL:er till HTML5-mallar som kan användas under en användarresa. HTML5-sidans URI används för ett angivet användargränssnittssteg. Till exempel inloggnings-, registrerings-, lösenordsåterställnings- eller felsidor. Du kan ändra utseendet och känslan genom att åsidosätta LoadUri för HTML5-filen. Du kan skapa nya innehållsdefinitioner efter dina behov. Det här elementet kan innehålla en referens för lokaliserade resurser till lokaliseringsidentifieraren som anges i lokaliseringselementet .

I följande exempel visas innehållsdefinitionsidentifieraren och definitionen av lokaliserade resurser:

<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" />
    ...

Metadata för den självsäkra tekniska profilen LocalAccountSignUpWithLogonEmail innehåller innehållsdefinitionsidentifieraren ContentDefinitionReferenceId inställd på 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>
  ...

InnehållDefinition

Elementet ContentDefinition innehåller följande attribut:

Elementet ContentDefinition innehåller följande element:

LoadUri (på engelska)

LoadUri-elementet används för att ange URL:en för HTML5-sidan för innehållsdefinitionen. Startpaket för azure AD B2C-anpassade principer levereras med innehållsdefinitioner som använder Azure AD B2C HTML-sidor. LoadUri börjar med ~, vilket är en relativ sökväg till din Azure AD B2C-klientorganisation.

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

Du kan anpassa användargränssnittet med HTML-mallar. Ange en absolut URL när du använder HTML-mallar. I följande exempel visas en innehållsdefinition med HTML-mall:

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

DataUri (på engelska)

DataUri-elementet används för att ange sididentifieraren. Azure AD B2C använder sididentifieraren för att läsa in och initiera användargränssnittselement och JavaScript på klientsidan. Värdets format är urn:com:microsoft:aad:b2c:elements:page-name:version. I följande tabell visas de sididentifierare som du kan använda.

Välj en sidlayout

Du kan aktivera JavaScript-kod på klientsidan genom att contract infoga mellan elements och sidtypen. Till exempel urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

Versionsdelen av DataUri anger paketet med innehåll som innehåller HTML, CSS och JavaScript för användargränssnittselementen i principen. Om du tänker aktivera JavaScript-kod på klientsidan måste de element som du baserar JavaScript på vara oföränderliga. Om de inte är oföränderliga kan eventuella ändringar orsaka oväntat beteende på dina användarsidor. Du kan förhindra dessa problem genom att använda en sidlayout och ange en sidlayoutversion. Detta säkerställer att alla innehållsdefinitioner som du har baserat JavaScript på är oföränderliga. Även om du inte tänker aktivera JavaScript måste du fortfarande ange sidlayoutversionen för dina sidor.

I följande exempel visas DataUriselfasserted för version 1.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> -->

Migrera till sidlayout

Om du vill migrera från det gamla DataUri-värdet (utan sidkontrakt) till sidlayoutversionen lägger du till ordet follow by a page version (ord contract följer efter en sidversion). Använd följande tabell för att migrera från det gamla DataUri-värdet till sidlayoutversionen.

I följande exempel visas identifierare för innehållsdefinition och motsvarande DataUri med den senaste sidversionen:

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

Metainformation

Ett metadataelement innehåller följande element:

Elementet Item i metadataelementet innehåller följande attribut:

Metadatanycklar

Innehållsdefinition stöder följande metadataobjekt:

LocalizedResourcesReferences (Lokaliserade resurserReferenser)

Elementet LocalizedResourcesReferences innehåller följande element:

Elementet LocalizedResourcesReference innehåller följande attribut:

I följande exempel visas en innehållsdefinition för registrering eller inloggning med en referens till lokalisering för engelska, franska och spanska:

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

Mer information om hur du lägger till lokaliseringsstöd för dina innehållsdefinitioner finns i Lokalisering.

Innehållsdefinitions-ID:t

ID-attributet för ContentDefinition-elementet anger vilken typ av sida som relaterar till innehållsdefinitionen. Elementet definierar kontexten som en anpassad HTML5/CSS-mall ska gälla. I följande tabell beskrivs den uppsättning innehållsdefinitions-ID:er som identifieras av Identity Experience Framework och de sidtyper som är relaterade till dem. Du kan skapa egna innehållsdefinitioner med ett godtyckligt ID.

Nästa steg

Ett exempel på hur du anpassar användargränssnittet med hjälp av innehållsdefinitioner finns i:

Anpassa användargränssnittet för ditt program med hjälp av en anpassad princip