Personnaliser l’interface utilisateur dans Azure Active Directory B2C

Important

À compter du 1er mai 2025, Azure AD B2C ne sera plus disponible pour les nouveaux clients. Pour plus d’informations, consultez notre FAQ.

Avant de commencer, utilisez le sélecteur Choisir un type de stratégie en haut de cette page pour choisir le type de stratégie que vous configurez. Azure Active Directory B2C offre deux possibilités pour définir la façon dont les utilisateurs interagissent avec vos applications : via des flux utilisateurs prédéfinis ou via des stratégies personnalisées entièrement configurables. La procédure donnée dans cet article est différente pour chaque méthode.

La personnalisation et le marquage de l'interface utilisateur affichée par Azure AD B2C à vos clients aident à offrir une expérience utilisateur transparente dans votre application. Ces expériences incluent l’inscription, la connexion, la modification de profil et la réinitialisation du mot de passe. Dans cet article, vous personnalisez vos pages Azure AD B2C à l’aide du modèle de page et de la personnalisation de l’entreprise.

Conseil / Astuce

Pour personnaliser d’autres aspects de vos pages de flux utilisateur au-delà du modèle de page, du logo de bannière, de l’image d’arrière-plan ou de la couleur d’arrière-plan, découvrez comment personnaliser l’interface utilisateur avec un modèle HTML.

Conditions préalables

Créez un flux d’utilisateurs pour permettre aux utilisateurs de s’inscrire et de se connecter à votre application.
Inscrire une application web.

Suivez les étapes de Prise en main des stratégies personnalisées dans Active Directory B2C. Ce tutoriel vous explique comment mettre à jour des fichiers de stratégie personnalisés pour utiliser votre configuration de locataire Azure AD B2C.
Inscrire une application web.

Aperçu

Azure AD B2C fournit plusieurs modèles intégrés parmi lesquels vous pouvez choisir pour donner à vos pages d’expérience utilisateur un aspect professionnel. Ces modèles de page peuvent également servir de point de départ pour votre propre personnalisation, à l’aide de la fonctionnalité de personnalisation de l’entreprise .

Remarque

Les navigateurs pris en charge pour le modèle Classique incluent les versions actuelles et précédentes d’Internet Explorer, Microsoft Edge, Google Chrome, Mozilla Firefox et Safari. Les modèles Ocean Blue et Slate Gray peuvent avoir une prise en charge limitée des versions antérieures du navigateur, telles qu’Internet Explorer 11 et 10 ; nous vous recommandons de tester votre application avec les navigateurs que vous envisagez de prendre en charge.

Bleu océan

Exemple de modèle Ocean Blue rendu sur la page d’inscription et de connexion :

Capture d’écran du modèle Ocean Blue

Ardoise

Exemple du modèle Slate Gray rendu sur la page d'enregistrement et de connexion :

Capture d’écran du modèle Gris ardoise

Classique

Exemple du modèle Classic rendu sur la page d'inscription et de connexion.

Capture d’écran du modèle classique

Marque de l’entreprise

Vous pouvez personnaliser vos pages Azure AD B2C avec un logo de bannière, une image et une couleur d’arrière-plan en utilisant la fonctionnalité Personnalisation d’entreprise de Microsoft Entra ID. L'image de marque de l'entreprise comprend l'inscription, la connexion, la modification de profil et la réinitialisation du mot de passe.

L’exemple suivant montre une page d’inscription et de connexion avec un logo personnalisé, une image d’arrière-plan, à l’aide du modèle Ocean Blue :

Page d’inscription/connexion personnalisée fournie par Azure AD B2C

Sélectionner un modèle de page

Connectez-vous au portail Azure.
Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.
Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.
Sélectionnez Flux utilisateur.
Sélectionnez un flux utilisateur que vous souhaitez personnaliser.
Sous Personnaliser dans le menu de gauche, sélectionnez Mises en page , puis sélectionnez un modèle.

Lorsque vous choisissez un modèle, le modèle sélectionné est appliqué à toutes les pages de votre flux utilisateur. L’URI de chaque page est visible dans le champ URI de page personnalisé .

Pour sélectionner un modèle de page, définissez l’élément LoadUri des définitions de contenu. L’exemple suivant montre les identificateurs de définition de contenu et les identificateurs correspondants LoadUri.

Bleu océan :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Gris ardoise :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/MSA/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/MSA/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/MSA/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/templates/MSA/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/MSA/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Classique:

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/default/exception.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/default/idpSelector.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/default/unified.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <LoadUri>~/tenant/default/selfAsserted.cshtml</LoadUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/default/multifactor-1.0.0.cshtml</LoadUri>
  </ContentDefinition>
</ContentDefinitions>

Configurer la marque de la société

Pour personnaliser vos pages de flux utilisateur, vous configurez d’abord la personnalisation de l’entreprise dans l’ID Microsoft Entra, puis vous l’activez dans vos flux d’utilisateurs dans Azure AD B2C.

Commencez par définir le logo de bannière, l’image d’arrière-plan et la couleur d’arrière-plan dans la personnalisation de la société.

Connectez-vous au portail Azure.
Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.
Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.
Sous Gérer, sélectionnez Marque de la société.
Suivez les étapes décrites dans Ajouter une personnalisation à la page de connexion Microsoft Entra de votre organisation.

Gardez ces éléments à l’esprit lorsque vous configurez la personnalisation de l’entreprise dans Azure AD B2C :

La personnalisation de l’entreprise dans Azure AD B2C est actuellement limitée à l’image d’arrière-plan, au logo de bannière et à la personnalisation des couleurs d’arrière-plan . Les autres propriétés du volet de personnalisation de l’entreprise, par exemple, les paramètres avancés ne sont pas pris en charge.
Dans vos pages de flux utilisateur, la couleur d’arrière-plan est affichée avant le chargement de l’image d’arrière-plan. Nous vous recommandons de choisir une couleur d’arrière-plan qui correspond étroitement aux couleurs de votre image d’arrière-plan pour une expérience de chargement plus fluide.
Le logo de bannière s’affiche dans les e-mails de vérification envoyés à vos utilisateurs lorsqu’ils lancent un flux d’utilisateur d’inscription.

Activer la personnalisation de l’entreprise dans les pages de flux utilisateur

Une fois que vous avez configuré la personnalisation de l’entreprise, activez-la dans vos flux d’utilisateurs.

Dans le menu de gauche du portail Azure, sélectionnez Azure AD B2C.
Sous Stratégies, sélectionnez Flux d’utilisateurs (stratégies).
Sélectionnez le flux utilisateur pour lequel vous souhaitez activer la personnalisation de l’entreprise. La personnalisation de l’image de marque de l’entreprise n’est pas prise en charge pour les types de flux utilisateur de connexion standard et de modification de profil standard.
Sous Personnaliser, sélectionnez Mises en page, puis sélectionnez la page que vous souhaitez personnaliser. Par exemple, sélectionnez l’inscription unifiée ou la page de connexion.
Pour la version de mise en page (préversion), choisissez la version 1.2.0 ou ultérieure.
Cliquez sur Enregistrer.

Si vous souhaitez personnaliser toutes les pages du flux utilisateur, définissez la version de mise en page de chaque mise en page dans le flux utilisateur.

Sélection de la mise en page dans Azure AD B2C dans le portail Azure.

Activer l'image de marque de l'entreprise dans les pages de politique personnalisées

Une fois que vous avez configuré le branding de l’entreprise, activez-le dans votre politique personnalisée. Configurez la version de mise en page avec la version de page contract pour toutes les définitions de contenu de votre stratégie personnalisée. Le format de la valeur doit contenir le mot contract : urn : com : microsoft : aad : b2c : elements : contract : page-name : version. Pour spécifier une mise en page dans vos stratégies personnalisées qui utilisent une ancienne valeur DataUri . Pour plus d’informations, découvrez comment migrer vers la mise en page avec la version de page.

L’exemple suivant montre les définitions de contenu avec leur contrat de page correspondant et le modèle de page Ocean Blue :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <LoadUri>~/tenant/templates/AzureBlue/exception.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <LoadUri>~/tenant/templates/AzureBlue/idpSelector.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <LoadUri>~/tenant/templates/AzureBlue/unified.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
     <LoadUri>~/tenant/templates/AzureBlue/selfAsserted.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <LoadUri>~/tenant/templates/AzureBlue/multifactor-1.0.0.cshtml</LoadUri>
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Pour réorganiser les champs d’entrée de la page d’inscription pour le formulaire comptes locaux, procédez comme suit :

Connectez-vous au portail Azure.
Si vous avez accès à plusieurs tenants (locataires), sélectionnez l’icône Paramètres dans le menu supérieur pour basculer vers votre tenant Azure AD B2C à partir du menu Annuaires + abonnements.
Dans le portail Azure, recherchez et sélectionnez Azure AD B2C.
Dans le menu de gauche, sélectionnez Flux utilisateur.
Sélectionnez un flux utilisateur (pour les comptes locaux uniquement) que vous souhaitez réorganiser ses champs d’entrée.
Dans le menu de gauche, sélectionnez Mises en page
Dans le tableau, sélectionnez la ligne Page d’inscription au compte local.
Sous Attributs utilisateur, sélectionnez le champ d’entrée que vous souhaitez réorganiser, puis faites glisser (vers le haut ou le bas) et déposez ou utilisez les contrôles Déplacer vers le haut ou déplacer vers le bas pour obtenir l’ordre souhaité.
En haut de la page, sélectionnez Enregistrer.

Liste déroulante de sélection de modèle dans la page du flux utilisateur du portail Azure.

Découvrez comment personnaliser l’interface utilisateur de vos applications dans Personnaliser l’interface utilisateur de votre application dans Azure Active Directory B2C.

Commentaires

Cette page a-t-elle été utile ?

Last updated on 2025-05-06