DéfinitionsDeContenu

Vous pouvez personnaliser l’apparence de n’importe quel profil technique autodéclaré. Azure Active Directory B2C (Azure AD B2C) exécute du code dans le navigateur de votre client et utilise une approche moderne appelée partage de ressources cross-origin (CORS).

Pour personnaliser l’interface utilisateur, vous spécifiez une URL dans l’élément ContentDefinition avec du contenu HTML personnalisé. Dans le profil technique autodéclaré ou OrchestrationStep, vous pointez vers cet identificateur de définition de contenu. La définition de contenu peut contenir un élément LocalizedResourcesReferences qui spécifie une liste de ressources localisées à charger. Azure AD B2C fusionne les éléments d’interface utilisateur avec le contenu HTML chargé à partir de votre URL, puis affiche la page à l’utilisateur.

L’élément ContentDefinitions contient des URL vers des modèles HTML5 qui peuvent être utilisés dans un parcours utilisateur. L’URI de page HTML5 est utilisé pour une étape d’interface utilisateur spécifiée. Par exemple, les pages de connexion ou d’inscription, de réinitialisation de mot de passe ou d’erreur. Vous pouvez modifier l’apparence en remplaçant LoadUri pour le fichier HTML5. Vous pouvez créer de nouvelles définitions de contenu en fonction de vos besoins. Cet élément peut contenir une référence de ressources localisées, à l’identificateur de localisation spécifié dans l’élément Localisation .

L’exemple suivant montre l’identificateur de définition de contenu et la définition des ressources localisées :

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

Les métadonnées du profil technique autodéclaré LocalAccountSignUpWithLogonEmail contiennent l’identificateur de définition de contenu ContentDefinitionReferenceId défini sur 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’élément ContentDefinition contient l’attribut suivant :

L’élément ContentDefinition contient les éléments suivants :

LoadUri

L’élément LoadUri est utilisé pour spécifier l’URL de la page HTML5 pour la définition de contenu. Les packs de démarrage de stratégie personnalisée Azure AD B2C sont fournis avec des définitions de contenu qui utilisent des pages HTML Azure AD B2C. LoadUri commence par ~, qui est un chemin relatif vers votre locataire Azure AD B2C.

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

Vous pouvez personnaliser l’interface utilisateur avec des modèles HTML. Lorsque vous utilisez des modèles HTML, fournissez une URL absolue. L’exemple suivant illustre une définition de contenu avec un modèle HTML :

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

DataUri

L’élément DataUri est utilisé pour spécifier l’identificateur de page. Azure AD B2C utilise l’identificateur de page pour charger et lancer des éléments d’interface utilisateur et javaScript côté client. Le format de la valeur est urn:com:microsoft:aad:b2c:elements:page-name:version. Le tableau suivant répertorie les identificateurs de page que vous pouvez utiliser.

Sélectionner une mise en page

Vous pouvez activer le code côté client JavaScript en insérant contract entre elements et le type de page. Par exemple : urn:com:microsoft:aad:b2c:elements:contract:page-name:version.

La partie version du package spécifie le package de contenu contenant html, CSS et JavaScript pour les éléments d’interface DataUri utilisateur de votre stratégie. Si vous envisagez d’activer le code côté client JavaScript, les éléments sur lesquels vous basez votre Code JavaScript doivent être immuables. S’ils ne sont pas immuables, toutes les modifications peuvent entraîner un comportement inattendu sur vos pages utilisateur. Pour éviter ces problèmes, appliquez l’utilisation d’une mise en page et spécifiez une version de mise en page. Cela garantit que toutes les définitions de contenu sur lesquelles vous avez basé votre Code JavaScript sont immuables. Même si vous n’avez pas l’intention d’activer JavaScript, vous devez toujours spécifier la version de mise en page de vos pages.

L’exemple suivant montre DataUri de selfasserted 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> -->

Migration vers la mise en page

Pour migrer de l’ancienne valeur DataUri (sans contrat de page) vers la version de mise en page, ajoutez le mot contract suivi par une version de page. Utilisez le tableau suivant pour migrer de l’ancienne valeur DataUri vers la version de mise en page.

L’exemple suivant montre les identificateurs de définition de contenu et le DataUri correspondant avec la dernière version de page :

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

Métadonnées

Un élément Metadata contient les éléments suivants :

L’élément Item de l’élément Metadata contient les attributs suivants :

Clés de métadonnées

La définition de contenu prend en charge les éléments de métadonnées suivants :

LocalizedResourcesRéférences

L’élément LocalizedResourcesReferences contient les éléments suivants :

L’élément LocalizedResourcesReference contient les attributs suivants :

L’exemple suivant montre une définition de contenu d’inscription ou de connexion avec une référence à la localisation pour l’anglais, le français et l’espagnol :

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

Pour savoir comment ajouter la prise en charge de la localisation à vos définitions de contenu, consultez Localisation.

ID de définition de contenu

L’attribut ID de l’élément ContentDefinition spécifie le type de page qui se rapporte à la définition de contenu. L’élément définit le contexte qu’un modèle HTML5/CSS personnalisé va appliquer. Le tableau suivant décrit l’ensemble des ID de définition de contenu reconnus par identity Experience Framework et les types de pages qui les concernent. Vous pouvez créer vos propres définitions de contenu avec un ID arbitraire.

Étapes suivantes

Pour obtenir un exemple de personnalisation de l’interface utilisateur à l’aide de définitions de contenu, consultez :

Personnaliser l’interface utilisateur de votre application à l’aide d’une stratégie personnalisée