Activer les versions de mise en page et JavaScript 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.

Avec les modèles HTML Azure Active Directory B2C (Azure AD B2C), vous pouvez créer les expériences d’identité de vos utilisateurs. Vos modèles HTML ne peuvent contenir que certaines balises et attributs HTML. Les balises HTML de base, telles que <b>, <i, >u<>, <h1> et <hr>, sont autorisées. Des balises plus avancées telles que <le script> et <l’iframe> sont supprimées pour des raisons de sécurité, mais la <script> balise doit être ajoutée dans la <head> balise. À partir de la version 2.1.21 de mise en page selfasserted, de la version 2.1.10 de unifiedssp, et de la version 1.2.10 multifacteur, B2C ne prend plus en charge l’ajout de scripts dans la balise <body> (car cela peut présenter un risque d’attaque par scripts intersites). La migration de scripts existants de <body> à <head> peut nécessiter parfois la réécriture de scripts existants avec des observateurs de mutation pour garantir le bon fonctionnement.

La balise <script> doit être ajoutée dans la balise <head> de deux manières :

Ajout de l’attribut defer , qui spécifie que le script est téléchargé en parallèle pour analyser la page, puis le script est exécuté une fois que la page a terminé l’analyse :
```
 <script src="my-script.js" defer></script>
```
Ajout d’attribut async qui spécifie que le script est téléchargé en parallèle pour analyser la page, puis le script est exécuté dès qu’il est disponible (avant la fin de l’analyse) :
```
 <script src="my-script.js" async></script>	
```

Pour activer JavaScript et avancer les balises ET attributs HTML :

Sélectionner une mise en page
Activez-le sur le flux utilisateur à l’aide du portail Azure
Utiliser b2clogin.com dans vos demandes

Sélectionner une mise en page
Ajouter un élément à votre stratégie personnalisée
Utiliser b2clogin.com dans vos demandes

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.

Commencer à configurer une version de mise en page

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 pour vous assurer que 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 pouvez spécifier une version de mise en page pour vos pages.

Pour spécifier une version de mise en page pour vos pages de flux utilisateur :

Dans votre tenant Azure AD B2C, sélectionnez Flux d’utilisateurs.
Sélectionnez votre politique (par exemple, « B2C_1_SignupSignin ») pour l’ouvrir.
Sélectionnez Les mises en page. Sélectionnez un nom de disposition, puis choisissez la version de mise en page.

Pour plus d’informations sur les différentes versions de mise en page, consultez le journal des modifications des versions de mise en page.

Paramètres de mise en page dans le portail affichant la liste déroulante des versions de mise en page

Pour spécifier une version de mise en page pour vos pages de stratégie personnalisées :

Sélectionnez une mise en page pour les éléments d’interface utilisateur de votre application.
Définissez une 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.

L’exemple suivant montre les identificateurs de définition de contenu et le DataUri correspondant avec le contrat de page :

<ContentDefinitions>
  <ContentDefinition Id="api.error">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:globalexception:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.idpselections.signup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:providerselection:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.signuporsignin">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:unifiedssp:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.selfasserted.profileupdate">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountsignup">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.localaccountpasswordreset">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:selfasserted:1.2.0</DataUri>
  </ContentDefinition>
  <ContentDefinition Id="api.phonefactor">
    <DataUri>urn:com:microsoft:aad:b2c:elements:contract:multifactor:1.2.0</DataUri>
  </ContentDefinition>
</ContentDefinitions>

Activer JavaScript

Dans les propriétés du flux utilisateur, vous pouvez activer JavaScript. L’activation de JavaScript applique également l’utilisation d’une mise en page. Vous pouvez ensuite définir la version de mise en page pour le flux utilisateur, comme décrit dans la section suivante.

Page des propriétés de flux utilisateur avec le paramètre Activer JavaScript mis en surbrillance

Vous activez l’exécution de script en ajoutant l’élément ScriptExecution à l’élément RelyingParty .

Ouvrez votre fichier de stratégie personnalisé. Par exemple, SignUpOrSignin.xml.

Ajoutez l’élément ScriptExecution à l’élément RelyingParty :

<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" />
  <UserJourneyBehaviors>
    <ScriptExecution>Allow</ScriptExecution>
  </UserJourneyBehaviors>
  ...
</RelyingParty>

Enregistrez et chargez le fichier.

Instructions pour l’utilisation de JavaScript

Suivez ces instructions lorsque vous personnalisez l’interface de votre application à l’aide de JavaScript :

N'oubliez pas:
- Ne pas lier un événement Click aux éléments HTML <a>.
- Ne pas prendre de dépendance envers le code ou les commentaires Azure AD B2C.
- modifiez l’ordre ou la hiérarchie des éléments HTML Azure AD B2C. Utilisez une stratégie Azure AD B2C pour contrôler l’ordre des éléments de l’interface utilisateur.
Vous pouvez appeler n’importe quel service RESTful avec ces considérations :
- Vous devrez peut-être définir votre service RESTful CORS pour autoriser les appels HTTP côté client.
- Vérifiez que votre service RESTful est sécurisé et utilise uniquement le protocole HTTPS.
- N’utilisez pas JavaScript directement pour appeler des points de terminaison Azure AD B2C.
Vous pouvez incorporer votre code JavaScript ou vous pouvez créer un lien vers des fichiers JavaScript externes. Lorsque vous utilisez un fichier JavaScript externe, veillez à utiliser l’URL absolue et non une URL relative.
Les frameworks JavaScript:
- Azure AD B2C utilise une version spécifique de jQuery. N’incluez pas une autre version de jQuery. L’utilisation de plusieurs versions sur la même page provoque des problèmes.
- L’utilisation de RequireJS n’est pas prise en charge.
- La plupart des frameworks JavaScript ne sont pas pris en charge par Azure AD B2C.
Les paramètres Azure AD B2C peuvent être lus en appelant des objets window.SETTINGS, tels que window.CONTENT, comme la langue actuelle de l'interface utilisateur. Ne modifiez pas la valeur de ces objets.
Pour personnaliser le message d’erreur Azure AD B2C, utilisez la localisation dans une stratégie.
Si quelque chose peut être accompli à l’aide d’une politique, c'est généralement la méthode recommandée.
Nous vous recommandons d’utiliser nos contrôles d’interface utilisateur existants, tels que les boutons, plutôt que de les masquer et d’implémenter des liaisons de clic sur vos propres contrôles d’interface utilisateur. Cette approche garantit que votre expérience utilisateur continue de fonctionner correctement même lorsque nous publions de nouvelles mises à niveau de contrat de page.

Exemples JavaScript

Afficher ou masquer un mot de passe

Un moyen courant d’aider vos clients à réussir leur inscription consiste à leur permettre de voir ce qu’ils ont entré en tant que mot de passe. Cette option aide les utilisateurs à s’inscrire en leur permettant de voir et d’apporter facilement des corrections à leur mot de passe si nécessaire. Tout champ de mot de passe de type comporte une case à cocher avec une étiquette Afficher le mot de passe . Cela permet à l’utilisateur d’afficher le mot de passe en texte brut. Incluez cet extrait de code dans votre modèle d’inscription ou de connexion pour une page autodéclarée :

function makePwdToggler(pwd){
  // Create show-password checkbox
  var checkbox = document.createElement('input');
  checkbox.setAttribute('type', 'checkbox');
  var id = pwd.id + 'toggler';
  checkbox.setAttribute('id', id);

  var label = document.createElement('label');
  label.setAttribute('for', id);
  label.appendChild(document.createTextNode('show password'));

  var div = document.createElement('div');
  div.appendChild(checkbox);
  div.appendChild(label);

  // Add show-password checkbox under password input
  pwd.insertAdjacentElement('afterend', div);

  // Add toggle password callback
  function toggle(){
    if(pwd.type === 'password'){
      pwd.type = 'text';
    } else {
      pwd.type = 'password';
    }
  }
  checkbox.onclick = toggle;
  // For non-mouse usage
  checkbox.onkeydown = toggle;
}

function setupPwdTogglers(){
  var pwdInputs = document.querySelectorAll('input[type=password]');
  for (var i = 0; i < pwdInputs.length; i++) {
    makePwdToggler(pwdInputs[i]);
  }
}

setupPwdTogglers();

Ajouter des conditions d’utilisation

Incluez le code suivant dans votre page dans laquelle vous souhaitez inclure une case à cocher Conditions d’utilisation . Cette case à cocher est généralement nécessaire dans les pages d’inscription de votre compte local et de compte social.

function addTermsOfUseLink() {
    // find the terms of use label element
    var termsOfUseLabel = document.querySelector('#api label[for="termsOfUse"]');
    if (!termsOfUseLabel) {
        return;
    }

    // get the label text
    var termsLabelText = termsOfUseLabel.innerHTML;

    // create a new <a> element with the same inner text
    var termsOfUseUrl = 'https://learn.microsoft.com/legal/termsofuse';
    var termsOfUseLink = document.createElement('a');
    termsOfUseLink.setAttribute('href', termsOfUseUrl);
    termsOfUseLink.setAttribute('target', '_blank');
    termsOfUseLink.appendChild(document.createTextNode(termsLabelText));

    // replace the label text with the new element
    termsOfUseLabel.replaceChild(termsOfUseLink, termsOfUseLabel.firstChild);
}

Dans le code, remplacez termsOfUseUrl par le lien vers votre contrat de conditions d’utilisation. Pour votre annuaire, créez un attribut utilisateur appelé termsOfUse , puis incluez termsOfUse en tant qu’attribut utilisateur.

Vous pouvez également ajouter un lien au bas des pages autodéclarées, sans utiliser JavaScript. Utilisez la localisation suivante :

<LocalizedResources Id="api.localaccountsignup.en">
  <LocalizedStrings>
    <!-- The following elements will display a link at the bottom of the page. -->
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_text">Terms of use</LocalizedString>
    <LocalizedString ElementType="UxElement" StringId="disclaimer_link_1_url">termsOfUseUrl</LocalizedString>
    </LocalizedStrings>
</LocalizedResources>

Remplacez termsOfUseUrl par le lien vers la politique de confidentialité et les conditions d’utilisation de votre organisation.

Étapes suivantes

Découvrez comment 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