Partager via

Configurer des options d’authentification dans une application monopage à l’aide d’Azure AD 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.

Cet article explique comment personnaliser et améliorer l’expérience d’authentification Azure Active Directory B2C (Azure AD B2C) pour votre application monopage (SPA).

Avant de commencer, familiarisez-vous avec l’article suivant : Configurer l’authentification dans un exemple d’application web.

Utiliser un domaine personnalisé

En utilisant un domaine personnalisé, vous pouvez entièrement personnaliser l’URL d’authentification. Du point de vue de l’utilisateur, les utilisateurs restent sur votre domaine pendant le processus d’authentification, plutôt que d’être redirigés vers le nom de domaine Azure AD B2C b2clogin.com.

Pour supprimer toutes les références à « b2c » dans l’URL, vous pouvez également remplacer votre nom de locataire B2C, contoso.onmicrosoft.com, dans l’URL de demande d’authentification par votre GUID d’ID de locataire. Par exemple, vous pouvez passer https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ à https://account.contosobank.co.uk/<tenant ID GUID>/.

Pour utiliser un domaine personnalisé et votre ID de locataire dans l’URL d’authentification, suivez les instructions de l’option Activer les domaines personnalisés. Recherchez votre objet de configuration MSAL (Microsoft Authentication Library) et modifiez les autorités et lesauthorities connues pour utiliser votre nom de domaine personnalisé et votre ID de locataire.

Le code JavaScript suivant montre l’objet de configuration MSAL avant la modification :

const msalConfig = {
    auth: {
      ...
      authority: "https://fabrikamb2c.b2clogin.com/fabrikamb2c.onmicrosoft.com/B2C_1_susi",
      knownAuthorities: ["fabrikamb2c.b2clogin.com"],
      ...
    },
  ...
}

Le code JavaScript suivant montre l’objet de configuration MSAL après la modification :

const msalConfig = {
    auth: {
      ...
      authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/B2C_1_susi",
      knownAuthorities: ["custom.domain.com"],
      ...
    },
  ...
}

Préremplir le nom de connexion

Pendant un parcours utilisateur de connexion, votre application peut cibler un utilisateur spécifique. Lorsqu’une application cible un utilisateur, elle peut spécifier dans la demande d’autorisation le login_hint paramètre de requête avec le nom de connexion de l’utilisateur. Azure AD B2C remplit automatiquement le nom de connexion, et l’utilisateur doit fournir uniquement le mot de passe.

Pour préremplir le nom de connexion, procédez comme suit :

  1. Si vous utilisez une stratégie personnalisée, ajoutez la requête d’entrée requise comme décrit dans Configurer la connexion directe.

  2. Créez un objet pour stocker le login_hint et transmettez cet objet à la méthode MSAL loginPopup().

    let loginRequest = {
    loginHint: "bob@contoso.com"
}

myMSALObj.loginPopup(loginRequest);

Préélectionner un fournisseur d’identité

Si vous avez configuré le parcours de connexion de votre application pour inclure des comptes sociaux, tels que Facebook, LinkedIn ou Google, vous pouvez spécifier le domain_hint paramètre. Ce paramètre de requête fournit un indicateur à Azure AD B2C sur le fournisseur d’identité sociale qui doit être utilisé pour la connexion. Par exemple, si l’application spécifie domain_hint=facebook.com, le flux de connexion passe directement à la page de connexion Facebook.

Pour rediriger les utilisateurs vers un fournisseur d’identité externe, procédez comme suit :

  1. Vérifiez le nom de domaine de votre fournisseur d’identité externe. Pour plus d’informations, consultez Redirection de la connexion à un fournisseur de réseaux sociaux.

  2. Créez un objet pour stocker extraQueryParameters et transmettez cet objet à la méthode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {domain_hint: 'facebook.com'}
}

myMSALObj.loginPopup(loginRequest);

Spécifier la langue de l’interface utilisateur

La personnalisation de la langue dans Azure AD B2C permet à votre flux utilisateur de prendre en charge diverses langues en fonction des besoins de vos clients. Pour plus d’informations, consultez Personnalisation de la langue.

Pour définir la langue par défaut, procédez comme suit :

  1. Configurez la personnalisation de la langue.

  2. Créez un objet pour stocker extraQueryParameters et transmettez cet objet à la méthode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {ui_locales: 'en-us'}
}

myMSALObj.loginPopup(loginRequest);

Passer un paramètre de chaîne de requête personnalisé

Avec des stratégies personnalisées, vous pouvez passer un paramètre de chaîne de requête personnalisé. Un bon exemple de cas d’usage consiste à modifier dynamiquement le contenu de la page.

Pour passer un paramètre de chaîne de requête personnalisé, procédez comme suit :

  1. Configurez l’élément ContentDefinitionParameters .

  2. Créez un objet pour stocker extraQueryParameters et transmettez cet objet à la méthode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {campaignId: 'germany-promotion'}
}

myMSALObj.loginPopup(loginRequest);

Transmission d’indicateur de jeton d’ID

Une application de partie de confiance peut envoyer un jeton web JSON entrant (JWT) dans le cadre de la demande d’autorisation OAuth2. Le jeton entrant est un indicateur de l’utilisateur ou de la demande d’autorisation. Azure AD B2C valide le jeton, puis extrait la revendication.

Pour inclure un indicateur de jeton d’ID dans la demande d’authentification, procédez comme suit :

  1. Dans votre stratégie personnalisée, définissez un indicateur de jeton d’ID de profil technique.

  2. Créez un objet pour stocker extraQueryParameters et transmettez cet objet à la méthode MSAL loginPopup().

    let loginRequest = {
     extraQueryParameters: {id_token_hint: 'id-token-hint-value'}
}

myMSALObj.loginPopup(loginRequest);

Sécuriser votre redirection de déconnexion

Après la déconnexion, l’utilisateur est redirigé vers l’URI spécifié dans le post_logout_redirect_uri paramètre, quelles que soient les URL de réponse spécifiées pour l’application. Toutefois, si une valeur valide id_token_hint est passée et que le jeton d’ID requis dans les demandes de déconnexion est activé, Azure AD B2C vérifie que la valeur correspond post_logout_redirect_uri à l’une des URI de redirection configurés de l’application avant d’effectuer la redirection. Si aucune URL de réponse correspondante n’a été configurée pour l’application, un message d’erreur s’affiche et l’utilisateur n’est pas redirigé.

Pour prendre en charge un URI de redirection de déconnexion sécurisé, procédez comme suit :

  1. Créez une variable globalement accessible pour stocker le id_token.

    let id_token = "";

  2. Dans la fonction MSAL handleResponse , analysez l’objet id_tokenauthenticationResult dans la id_token variable.

    function handleResponse(response) {
    if (response !== null) {
        setAccount(response.account);
        id_token = response.idToken;
    } else {
        selectAccount();
    }
}

  3. Dans la signOut fonction, ajoutez le id_token_hint paramètre à l’objet logoutRequest .

    function signOut() {
    const logoutRequest = {
        postLogoutRedirectUri: msalConfig.auth.redirectUri,
        //set id_token_hint to the id_token value
        idTokenHint : id_token,
        mainWindowRedirectUri: msalConfig.auth.redirectUri
    };
    myMSALObj.logoutPopup(logoutRequest);
}

Dans l’exemple ci-dessus, le post_logout_redirect_uri passé dans la demande de déconnexion sera au format suivant : https://your-app.com/. Cette URL doit être ajoutée à l’URL de réponse de l’inscription de l’application.

Activer la déconnexion unique

La déconnexion unique dans Azure AD B2C utilise la déconnexion front-canal OpenId Connect pour effectuer des demandes de déconnexion à toutes les applications que l’utilisateur a connectées via Azure AD B2C.

Ces demandes de déconnexion sont effectuées à partir de la page de déconnexion Azure AD B2C, dans un Iframe masqué. Les Iframes effectuent des requêtes HTTP à tous les points de terminaison de déconnexion de canal frontal inscrits pour les applications enregistrées par Azure AD B2C comme étant connectés.

Votre point de terminaison de déconnexion pour chaque application doit appeler la méthode MSAL logout(). Vous devez également configurer explicitement MSAL pour qu’il s’exécute dans un Iframe dans ce scénario en définissant allowRedirectInIframe sur true.

Les exemples allowRedirectInIframe de code suivants sont les truesuivants :

const msalConfig = {
    auth: {
        clientId: "enter_client_id_here",
        .....
    },
    cache: {
        cacheLocation: "..",
        ....
    },
    system: {
        allowRedirectInIframe: true
    };
}

async function logoutSilent(MSAL) {
   return MSAL.logout({
      onRedirectNavigate: (url) => {
         return false;
       }

Étapes suivantes

En savoir plus sur les options de configurationMSAL.js.

  • Last updated on