ContentDefinitions

Artikel
01/11/2024

Anteckning

I Azure Active Directory B2C är anpassade principer främst utformade för att hantera komplexa scenarier. I de flesta fall rekommenderar vi att du använder inbyggda användarflöden. Om du inte har gjort det kan du läsa mer om startpaketet för anpassade principer i Kom igång med anpassade principer i Active Directory B2C.

Du kan anpassa utseendet och känslan för valfri självbetitlade 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 för korsande 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änssnittets element med HTML-innehåll som läses in från din URL 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- eller registrerings-, lösenordsåterställnings- eller felsidorna. Du kan ändra utseendet 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 den lokaliseringsidentifierare som anges i elementet Lokalisering .

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

ContentDefinition

Elementet ContentDefinition innehåller följande attribut:

Attribut	Krävs	Beskrivning
Id	Yes	En identifierare för en innehållsdefinition. Värdet är ett som anges i avsnittet Innehållsdefinitions-ID senare på den här sidan.

Elementet ContentDefinition innehåller följande element:

Element	Händelser	Description
LoadUri	1:1	En sträng som innehåller URL:en för HTML5-sidan för innehållsdefinitionen.
RecoveryUri	1:1	En sträng som innehåller URL:en för HTML-sidan för att visa ett fel som rör innehållsdefinitionen. För närvarande används inte värdet `~/common/default_page_error.html`.
DataUri	1:1	En sträng som innehåller den relativa URL:en för en HTML-fil som ger användarupplevelsen att anropa för steget.
Metadata	0:1	En samling nyckel/värde-par som innehåller de metadata som används av innehållsdefinitionen.
LocalizedResourcesReferences	0:1	En samling lokaliserade resursreferenser. Använd det här elementet för att anpassa lokaliseringen av ett användargränssnitt och anspråksattribut.

LoadUri

LoadUri-elementet används för att ange URL:en för HTML5-sidan för innehållsdefinitionen. Startpaketen för Azure AD B2C-anpassade principer har 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. När du använder HTML-mallar anger du en absolut URL. 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

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

Sididentifierare	Description
`globalexception`	Visar en felsida när ett undantag eller ett fel påträffas.
`providerselection`, `idpselection`	Visar en lista över de identitetsprovidrar som användarna kan välja mellan under inloggningen.
`unifiedssp`	Visar ett formulär för att logga in med ett lokalt konto som baseras på en e-postadress eller ett användarnamn. Det här värdet innehåller också länken "Behåll inloggningsfunktionen" och "Har du glömt ditt lösenord?".
`unifiedssd`	Visar ett formulär för att logga in med ett lokalt konto som baseras på en e-postadress eller ett användarnamn. Den här sididentifieraren är inaktuell. `unifiedssp` Använd sididentifieraren i stället.
`multifactor`	Verifierar telefonnummer med hjälp av text eller röst under registrering eller inloggning.
`selfasserted`	Visar ett formulär för att samla in data från en användare. Gör det till exempel möjligt för användare att skapa eller uppdatera sin profil.

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 ändringar orsaka oväntat beteende på användarsidorna. 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 contract efter en sidversion. Använd följande tabell för att migrera från det gamla DataUri-värdet till sidlayoutversionen.

Gammalt DataUri-värde	Nytt DataUri-värde
`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`

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

Metadata

Ett metadataelement innehåller följande element:

Element	Occurrences	Description
Objekt	0:n	Metadata som relaterar till innehållsdefinitionen.

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

Attribut	Krävs	Beskrivning
Nyckel	Yes	Metadatanyckeln.

Metadatanycklar

Innehållsdefinition stöder följande metadataobjekt:

Nyckel	Krävs	Beskrivning
DisplayName	No	En sträng som innehåller namnet på innehållsdefinitionen.

LocalizedResourcesReferences

Elementet LocalizedResourcesReferences innehåller följande element:

Element	Händelser	Description
LocalizedResourcesReference	1:n	En lista över lokaliserade resursreferenser för innehållsdefinitionen.

Elementet LocalizedResourcesReference innehåller följande attribut:

Attribut	Krävs	Beskrivning
Språk	Yes	En sträng som innehåller ett språk som stöds för principen per RFC 5646 – Taggar för att identifiera språk.
LocalizedResourcesReferenceId	Yes	Identifieraren för elementet LocalizedResources .

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>

Information om hur du lägger till lokaliseringsstöd för 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 tillämpas på. I följande tabell beskrivs den uppsättning innehållsdefinitions-ID:t som identifieras av Identity Experience Framework och de sidtyper som är relaterade till dem. Du kan skapa egna innehållsdefinitioner med ett godtyckligt ID.

ID	Standardmall	Description
api.error	exception.cshtml	Felsida – Visar en felsida när ett undantag eller ett fel påträffas.
api.idpselections	idpSelector.cshtml	Sidan för val av identitetsprovider – Visar en lista över identitetsprovidrar som användarna kan välja mellan under inloggningen. Alternativen är vanligtvis företagsidentitetsleverantörer, sociala identitetsprovidrar som Facebook och Google+, eller lokala konton.
api.idpselections.signup	idpSelector.cshtml	Val av identitetsprovider för registrering – Visar en lista över identitetsprovidrar som användarna kan välja mellan under registreringen. Alternativen är vanligtvis företagsidentitetsleverantörer, sociala identitetsprovidrar som Facebook och Google+, eller lokala konton.
api.localaccountpasswordreset	selfasserted.cshtml	Sidan Glömt lösenord – Visar ett formulär som användarna måste fylla i för att initiera en lösenordsåterställning.
api.localaccountsignin	selfasserted.cshtml	Inloggningssida för lokalt konto – Visar ett formulär för inloggning med ett lokalt konto som baseras på en e-postadress eller ett användarnamn. Formuläret kan innehålla en textinmatningsruta och en lösenordspostruta.
api.localaccountsignup	selfasserted.cshtml	Registreringssida för lokalt konto – Visar ett formulär för att registrera dig för ett lokalt konto som baseras på en e-postadress eller ett användarnamn. Formuläret kan innehålla olika indatakontroller, till exempel: en textinmatningsruta, en lösenordspostruta, en alternativknapp, listrutor med enkelmarkering och kryssrutor med flera markeringar.
api.phonefactor	multifaktor-1.0.0.cshtml	Multifaktorautentiseringssida – Verifierar telefonnummer med hjälp av text eller röst, under registrering eller inloggning.
api.selfasserted	selfasserted.cshtml	Registreringssida för sociala konton – Visar ett formulär som användarna måste fylla i när de registrerar sig med hjälp av ett befintligt konto från en social identitetsprovider. Den här sidan liknar registreringssidan för det sociala kontot ovan, förutom lösenordsinmatningsfälten.
api.selfasserted.profileupdate	updateprofile.cshtml	Profiluppdateringssida – Visar ett formulär som användarna kan komma åt för att uppdatera sin profil. Den här sidan liknar registreringssidan för sociala konton, förutom lösenordsfälten.
api.signuporsignin	unified.cshtml	Enhetlig registrerings- eller inloggningssida – Hanterar användarens registrering och inloggningsprocess. Användare kan använda företagsidentitetsleverantörer, sociala identitetsprovidrar som Facebook eller Google+ eller lokala konton.

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