ContentDefinitions

È possibile personalizzare l'aspetto di qualsiasi profilo tecnico autocertificato. Azure Active Directory B2C (Azure AD B2C) esegue il codice nel browser del cliente e usa un approccio moderno denominato Condivisione risorse tra le origini (CORS).

Per personalizzare l'interfaccia utente, si specifica un URL nell'elemento ContentDefinition con contenuto HTML personalizzato. Nel profilo tecnico autocertificato oppure OrchestrationStep, si punta a tale identificatore di definizione del contenuto. La definizione del contenuto può contenere un elemento LocalizedResourcesReferences che specifica un elenco di risorse localizzate da caricare. Azure AD B2C unisce elementi dell'interfaccia utente con il contenuto HTML caricato dall'URL e quindi mostra la pagina all'utente.

L'elemento ContentDefinitions include gli URL per i template HTML5 che possono essere usati in un percorso utente. L'URI della pagina HTML5 viene usato per un passaggio dell'interfaccia utente specificato. Ad esempio, le pagine di accesso o iscrizione, reimpostazione della password o di errore. Nei criteri di estensione è possibile modificare l'aspetto eseguendo l'override del LoadUri per il file HTML5. È possibile creare nuove definizioni del contenuto in base alle esigenze. Questo elemento può contenere un riferimento alle risorse localizzate, all'identificatore della localizzazione specificato nell'elemento Localizzazione.

L'esempio seguente mostra l'identificatore di definizione del contenuto e la definizione di risorse localizzate:

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

I metadati del profilo tecnico autocertificato LocalAccountSignUpWithLogonEmail contengono l'identificatore di definizione del contenuto ContentDefinitionReferenceId impostato su 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

L'elemento ContentDefinition contiene gli attributi seguenti:

L'elemento ContentDefinition contiene gli elementi seguenti:

LoadUri

L'elemento LoadUri viene usato per specificare l'URL della pagina HTML5 per la definizione del contenuto. I pacchetti di avvio dei criteri personalizzati di Azure AD B2C sono dotati di definizioni di contenuto che usano pagine HTML di Azure AD B2C. LoadUri inizia con ~, che è un percorso relativo al tenant di Azure AD B2C.

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

È possibile personalizzare l'interfaccia utente con i modelli HTML. Quando si usano modelli HTML, specificare un URL assoluto. L'esempio seguente illustra una definizione di contenuto con un modello HTML:

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

DataUri

L'elemento DataUri viene usato per specificare l'identificatore della pagina. Azure AD B2C usa l'identificatore di pagina per caricare e avviare gli elementi dell'interfaccia utente e JavaScript lato client. Il formato del valore è urn:com:microsoft:aad:b2c:elements:page-name:version. Nella tabella seguente sono elencati gli identificatori di pagina che è possibile usare.

Selezionare un layout di pagina

È possibile abilitare il codice lato client JavaScript inserendo contract tra elements e il tipo di pagina. Ad esempio, urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

La parte della versione di DataUri specifica il pacchetto di contenuto contenente HTML, CSS e JavaScript per gli elementi dell'interfaccia utente nei criteri. Se si intende abilitare il codice lato client JavaScript, gli elementi su cui si basa JavaScript devono essere non modificabili. Se non sono modificabili, eventuali modifiche potrebbero causare comportamenti imprevisti nelle pagine utente. Per evitare questi problemi, applicare l'uso di un layout di pagina e specificare una versione del layout di pagina. In questo modo si garantisce che tutte le definizioni di contenuto basate su JavaScript in siano non modificabili. Anche se non si intende abilitare JavaScript, è comunque necessario specificare la versione del layout di pagina per le pagine.

Nell'esempio seguente viene illustrato l'oggetto DataUri della selfasserted versione 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> -->

Migrazione al layout di pagina

Per eseguire la migrazione dal valore DataUri precedente (senza contratto di pagina) alla versione del layout di pagina, aggiungere la parola contract seguita da una versione della pagina. Usare la tabella seguente per eseguire la migrazione dal valore DataUri precedente alla versione del layout di pagina.

L'esempio seguente mostra gli identificatori di definizione del contenuto e l'URI di dati corrispondente con la versione più recente della pagina:

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

Metadati

L'elemento Metadata contiene gli elementi seguenti:

L'elemento Elemento di Metadati contiene gli attributi seguenti:

Chiavi di metadati

La definizione del contenuto supporta gli elementi di metadati seguenti:

LocalizedResourcesReferences

L'elemento LocalizedResources contiene gli elementi seguenti:

L'elemento LocalizedResourcesReference contiene gli attributi seguenti:

Nell'esempio seguente viene illustrata una definizione del contenuto di iscrizione o accesso con un riferimento alla localizzazione per inglese, francese e spagnolo:

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

Per informazioni su come aggiungere il supporto di localizzazione per le definizioni del contenuto, vedere Localizzazione.

ID definizione del contenuto

L'attributo ID dell'elemento ContentDefinition specifica il tipo di pagina correlato alla definizione del contenuto. L'elemento definisce il contesto a cui un modello personalizzato HTML5/CSS viene applicato. La tabella seguente descrive il set degli ID definizione del contenuto riconosciuti dal framework di gestione dell'identità e i tipi di pagina correlati. È possibile creare le definizioni del contenuto con un ID arbitrario.

Passaggi successivi

Per un esempio di personalizzazione dell'interfaccia utente usando le definizioni di contenuto, vedere:

Personalizzare l'interfaccia utente dell'applicazione usando criteri personalizzati