Configurer les options d’authentification dans une application monopage à l’aide d’Azure AD B2C

  • Article

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, single-page application).

Avant de commencer, lisez l’article suivant : Configurer l’authentification dans un exemple d’application web.

Utiliser un domaine personnalisé

En utilisant un domaine personnalisé, vous pouvez intégralement marquer l’URL d’authentification. En ce qui concerne les utilisateurs, ils restent sur votre domaine pendant le processus d’authentification, au lieu 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 remplacer le nom de votre locataire b2c (contoso.onmicrosoft.com) dans l’URL de la requête d’authentification par le GUID d’ID de votre locataire. Par exemple, vous pouvez remplacer https://fabrikamb2c.b2clogin.com/contoso.onmicrosoft.com/ par https://account.contosobank.co.uk/<tenant ID GUID>/.

Pour utiliser un domaine personnalisé et l’ID de votre locataire dans l’URL d’authentification, suivez les instructions fournies dans Activer les domaines personnalisés. Recherchez votre objet de configuration MSAL et remplacez les valeurs de authorities et knownAuthorities pour utiliser votre nom de domaine et votre ID de locataire personnalisés.

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

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

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 le parcours utilisateur pour la connexion, votre application peut cibler un utilisateur spécifique. Quand une application cible un utilisateur, celle-ci peut spécifier, dans la requête d’autorisation, le paramètre de requête login_hint avec le nom de connexion de l’utilisateur. Azure AD B2C remplit automatiquement le nom de connexion, et l’utilisateur n’a que le mot de passe à fournir.

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

  1. Si vous utilisez une stratégie personnalisée, ajoutez la revendication d’entrée nécessaire, comme décrit dans Configurer la connexion directe.

  2. Créez un objet où stocker login_hint, puis passez cet objet à la méthode MSAL loginPopup() .

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

myMSALObj.loginPopup(loginRequest);

Présélectionner un fournisseur d'identité

Si vous avez configuré la procédure de connexion pour votre application afin d’inclure des comptes de réseaux sociaux comme Facebook, LinkedIn ou Google, vous pouvez spécifier le paramètre domain_hint. Ce paramètre de requête fournit un indicateur à Azure AD B2C concernant 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 accède 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 Rediriger la connexion vers un fournisseur social.

  2. Créez un objet où stocker extraQueryParameters, puis passez 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 d’utilisateur de prendre en charge plusieurs langues pour répondre aux besoins de votre client. Consultez Personnalisation linguistique pour plus d'informations.

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

  1. Configurez la personnalisation de la langue.

  2. Créez un objet où stocker extraQueryParameters, puis passez 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 les stratégies personnalisées, vous pouvez passer un paramètre de chaîne de requête personnalisé. Les cas où vous souhaitez modifier de façon dynamique le contenu d’une page en sont un bon exemple d’utilisation.

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 où stocker extraQueryParameters, puis passez 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 par partie de confiance peut envoyer un Jeton Web JSON (JWT) entrant dans le cadre de la demande d’autorisation OAuth2. Le jeton entrant est une indication de l’utilisateur ou de la demande d’autorisation. Azure AD B2C valide le jeton puis extrait la demande.

Pour inclure un indicateur de jeton d’ID dans la requête 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 où stocker extraQueryParameters, puis passez cet objet à la méthode MSAL loginPopup() .

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

myMSALObj.loginPopup(loginRequest);

Sécuriser la redirection de déconnexion

Après la déconnexion, l’utilisateur est redirigé vers l’URI spécifié dans le paramètre post_logout_redirect_uri, quelles que soient les URL de réponse qui ont été spécifiées pour l’application. Cependant, si un id_token_hint valide est transmis et que l’option Exiger un jeton d’ID dans les demandes de déconnexion est activée, Azure AD B2C vérifie que la valeur de post_logout_redirect_uri correspond à l’un 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 sécurisé de redirection après déconnexion, effectuez les étapes ci-dessous :

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

    let id_token = "";

  2. Dans la fonction MSAL handleResponse, analysez le id_token de l’objet authenticationResult vers la variable id_token.

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

  3. Dans la section signOut, ajoutez le paramètre id_token_hint à 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 qui est passé dans la demande de déconnexion sera au format https://your-app.com/. Cette URL doit être ajoutée à l’URL de réponse de l’inscription d’application.

Activer le Single Logout

Dans Azure AD B2C, le Single Logout utilise la déconnexion front-channel OpenId Connect pour faire des demandes de déconnexion à toutes les applications auxquelles l’utilisateur s’est connecté 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 envoient des requêtes HTTP à tous les points de terminaison de déconnexion front-channel inscrits pour les applications qu’Azure AD B2C a enregistrées comme étant connectées.

Le point de terminaison de déconnexion de chaque application doit appeler la méthode MSAL logout() . Dans ce scénario, vous devez également configurer explicitement MSAL pour qu’il s’exécute dans un Iframe. Pour cela, définissez allowRedirectInIframe sur true.

L’exemple de code suivant définit allowRedirectInIframe sur true :

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 configuration MSAL.js.