Partager via

Expérience d’inscription ou de connexion incorporée

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.

Cette fonctionnalité est disponible uniquement pour les stratégies personnalisées. Pour les étapes de configuration, sélectionnez Stratégie personnalisée dans le sélecteur précédent.

Pour une expérience d’inscription ou de connexion plus simple, vous pouvez éviter de rediriger les utilisateurs vers une page d’inscription ou de connexion distincte, ou générer une fenêtre contextuelle. À l’aide de l’élément HTML <iframe>, vous pouvez incorporer l’interface utilisateur de connexion Azure AD B2C directement dans votre application web.

Conseil / Astuce

Utilisez l’élément <HTML iframe> pour incorporer l’inscription ou la connexion, modifier le profil ou modifier les stratégies personnalisées de mot de passe dans votre application web ou monopage.

Remarque

Cette fonctionnalité est en préversion publique.

Connexion incorporée à une application web

L’élément <iframe> frame inline est utilisé pour incorporer un document dans une page web HTML5. Vous pouvez utiliser l’élément iframe pour incorporer l’interface utilisateur de connexion Azure AD B2C directement dans votre application web, comme indiqué dans l’exemple suivant :

Connexion avec l’expérience DIV de survol

Lorsque vous utilisez iframe, tenez compte des éléments suivants :

  • Une inscription ou connexion incorporée ne prend en charge que des comptes locaux. La plupart des fournisseurs d’identité sociale (par exemple, Google et Facebook) bloquent le rendu de leurs pages de connexion dans des cadres inline.
  • Certains navigateurs, tels que Safari ou Chrome en mode incognito, affichent les cookies de session Azure AD B2C dans un iframe en tant que cookies tiers. Ces navigateurs peuvent bloquer ou effacer ces cookies, ce qui peut entraîner une expérience utilisateur inférieure à optimale. Pour éviter ce problème, vérifiez que votre nom de domaine d’application et votre domaine Azure AD B2C ont la même origine. Pour utiliser la même origine, activez les domaines personnalisés pour le locataire Azure AD B2C, puis configurez votre application web avec la même origine. Par exemple, une application hébergée sur «https://app.contoso.com » a la même origine qu’Azure AD B2C s’exécutant sur «https://login.contoso.com ».

Conditions préalables

Configurer votre stratégie

Pour permettre à votre interface utilisateur Azure AD B2C d’être incorporée dans un iframe, une stratégie Content-Security-Policy de sécurité du contenu et des options X-Frame-Options de trame doivent être incluses dans les en-têtes de réponse HTTP Azure AD B2C. Ces en-têtes permettent à l’interface utilisateur Azure AD B2C de s’exécuter sous le nom de domaine de votre application.

Ajoutez un élément JourneyFraming à l’intérieur de l’élément RelyingParty . L’élément UserJourneyBehaviors doit suivre DefaultUserJourney. Votre élément UserJourneyBehaviors doit ressembler à cet exemple :

<!--
<RelyingParty>
  <DefaultUserJourney ReferenceId="SignUpOrSignIn" /> -->
  <UserJourneyBehaviors> 
    <JourneyFraming Enabled="true" Sources="https://somesite.com https://anothersite.com" /> 
  </UserJourneyBehaviors>
<!--
</RelyingParty> -->

L’attribut Sources contient l’URI de votre application web. Ajoutez un espace entre les URI. Chaque URI doit répondre aux exigences suivantes :

  • Votre application doit faire confiance à l’URI et en posséder la propriété.
  • L’URI doit utiliser le schéma https.
  • L’URI complet de l’application web doit être spécifié. Les caractères génériques ne sont pas pris en charge.
  • L'élément JourneyFraming autorise uniquement les URL de site avec un domaine de premier niveau (TLD) de deux à sept caractères pour s'aligner sur les TLD couramment reconnus.

En outre, nous vous recommandons de bloquer l’incorporation de votre propre nom de domaine dans un iframe en définissant les en-têtes Content-Security-Policy et X-Frame-Options respectivement sur vos pages d’application. Cette technique atténue les problèmes de sécurité liés aux navigateurs plus anciens liés à l’incorporation imbriquée d’iframes.

Ajuster l’interface utilisateur de la politique

Avec la personnalisation de l’interface utilisateur Azure AD B2C, vous avez presque le contrôle total sur le contenu HTML et CSS que vous présentez à vos utilisateurs. Suivez les étapes de personnalisation d’une page HTML à l’aide de définitions de contenu. Pour adapter l’interface utilisateur Azure AD B2C à la taille iframe, fournissez une page HTML propre sans arrière-plan et espaces supplémentaires.

Le code CSS suivant masque les éléments HTML Azure AD B2C et ajuste la taille du panneau pour remplir l’iframe.

div.social, div.divider {
    display: none;
}

div.api_container{
    padding-top:0;
}

.panel {
    width: 100%!important
}

Dans certains cas, vous souhaiterez peut-être informer votre application de la page Azure AD B2C en cours de présentation. Par exemple, lorsqu’un utilisateur sélectionne l’option d’inscription, vous souhaiterez peut-être que l’application réponde en masquant les liens de connexion avec un compte social ou en ajustant la taille de l’iframe.

Pour informer votre application de la page Azure AD B2C actuelle, activez votre stratégie pour JavaScript, puis utilisez HTML5 pour publier des messages. Le code JavaScript suivant envoie un message de publication à l’application avec signUp:

window.parent.postMessage("signUp", '*');

Configurer une application web

Lorsqu’un utilisateur sélectionne le bouton de connexion, l’application web génère une demande d’autorisation qui amène l’utilisateur à l’expérience de connexion Azure AD B2C. Une fois la connexion terminée, Azure AD B2C retourne un jeton d’ID ou un code d’autorisation à l’URI de redirection configuré au sein de votre application.

Pour prendre en charge la connexion incorporée, l’attribut iframe src pointe vers le contrôleur de connexion, par /account/SignUpSignInexemple, qui génère la demande d’autorisation et redirige l’utilisateur vers la stratégie Azure AD B2C.

<iframe id="loginframe" frameborder="0" src="/account/SignUpSignIn"></iframe>

Une fois que l’application reçoit et valide le jeton d’ID, elle termine le flux d’autorisation et reconnaît et approuve l’utilisateur. Étant donné que le flux d’autorisation se produit à l’intérieur de l’iframe, vous devez recharger la page principale. Une fois la page rechargé, le bouton de connexion passe à « se déconnecter » et le nom d’utilisateur est présenté dans l’interface utilisateur.

L’exemple suivant montre comment l’URI de redirection de connexion peut actualiser la page principale :

window.top.location.reload();

Ajouter la connexion avec des comptes sociaux à une application web

Les fournisseurs d'identité sociale empêchent l'affichage de leurs pages de connexion dans des cadres intégrés. Vous pouvez utiliser une stratégie distincte pour les comptes sociaux, ou vous pouvez utiliser une stratégie unique pour la connexion et l’inscription avec des comptes locaux et sociaux. Vous pouvez ensuite utiliser le domain_hint paramètre de chaîne de requête. Le paramètre d’indicateur de domaine dirige l’utilisateur directement vers la page de connexion du fournisseur d’identité sociale.

Dans votre application, ajoutez la connexion avec des boutons de compte social. Lorsqu’un utilisateur clique sur l’un des boutons du compte social, le contrôle doit modifier le nom de la politique ou définir le paramètre de suggestion de domaine.

L’URI de redirection peut être le même URI de redirection que celui utilisé par l’iframe. Vous pouvez ignorer le rechargement de la page.

Configurer une application à page unique

Pour une application monopage, vous devez également disposer d’une deuxième page HTML de « connexion » qui se charge dans l’iframe. Cette page de connexion héberge le code de la bibliothèque d’authentification qui génère le code d’autorisation et retourne le jeton.

Quand l’application à page unique a besoin du jeton d’accès, utilisez un code JavaScript pour obtenir le jeton d’accès à partir de l’IFrame et de l’objet qui le contient.

Remarque

L’exécution de MSAL 2.0 dans un iframe n’est pas prise en charge actuellement.

Le code suivant est un exemple qui s’exécute sur la page principale et appelle le code JavaScript d’un iframe :

function getToken()
{
  var token = document.getElementById("loginframe").contentWindow.getToken("adB2CSignInSignUp");

  if (token === "LoginIsRequired")
    document.getElementById("tokenTextarea").value = "Please login!!!"
  else
    document.getElementById("tokenTextarea").value = token.access_token;
}

function logOut()
{
  document.getElementById("loginframe").contentWindow.policyLogout("adB2CSignInSignUp", "B2C_1A_SignUpOrSignIn");
}

Étapes suivantes

Consultez les articles associés suivants :