Partager via

Activer les options d’authentification dans une application web Node.js à l’aide d’Azure Active Directory B2C

  • Article

Cet article décrit les méthodes permettant d’activer, de personnaliser et d’améliorer l’expérience d’authentification Azure Active Directory B2C (Azure AD B2C) pour votre application web Node.js.

Avant de commencer, lisez les articles suivants pour vous familiariser avec les concepts :

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. Dans le dossier racine du projet, ouvrez le fichier .env. Ce fichier contient des informations sur votre fournisseur d’identité Azure AD B2C.

Dans le fichier .env, procédez comme suit :

  • Remplacez toutes les instances de tenant-name.b2clogin.com par votre domaine personnalisé. Par exemple, remplacez tenant-name.b2clogin.com par login.contoso.com.
  • Remplacez toutes les instances de tenant-name.onmicrosoft.com par votre ID de locataire. Pour plus d’informations, consultez Utiliser l’ID de locataire.

La configuration suivante montre les paramètres de l’application avant la modification :

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://contoso.b2clogin.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://contoso.b2clogin.com/contoso.onmicrosoft.com/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

La configuration suivante montre les paramètres de l’application après la modification :

#B2C sign up and sign in user flow/policy authority
SIGN_UP_SIGN_IN_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi
#B2C password reset user flow/policy authority
RESET_PASSWORD_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_passwordreset
#B2C edit profile user flow/policy authority
EDIT_PROFILE_POLICY_AUTHORITY=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_edit
#B2C authority domain
AUTHORITY_DOMAIN=https://login.contoso.com
#client redirect url
APP_REDIRECT_URI=http://localhost:3000/redirect
#Logout endpoint 
LOGOUT_ENDPOINT=https://login.contoso.com/12345678-0000-0000-0000-000000000000/B2C_1_susi/oauth2/v2.0/logout?post_logout_redirect_uri=http://localhost:3000

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 requête d’entrée requise comme décrit dans Configurer la connexion directe.
  2. Recherchez l'objet authCodeRequest et définissez l’attribut loginHint avec l’indicateur de connexion.

Les extraits de code suivants montrent comment passer le paramètre d’indicateur de connexion. Ils utilisent bob@contoso.com comme valeur d’attribut.

authCodeRequest.loginHint = "bob@contoso.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Recherchez l'authCodeRequest objet et définissez l’attribut domainHint avec l’indicateur de domaine correspondant.

Les extraits de code suivants montrent comment passer le paramètre d’indicateur de domaine. Il utilise facebook.com comme valeur d’attribut.

authCodeRequest.domainHint = "facebook.com"

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Recherchez l'objet authCodeRequest et définissez l’attribut extraQueryParameters avec l’indicateur de domaine ui_locales correspondant supplémentaire.

Les extraits de code suivants montrent comment passer le paramètre ui_locales. Ils utilisent es-es comme valeur d’attribut.

authCodeRequest.extraQueryParameters = {"ui_locales" : "es-es"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Recherchez l'objet authCodeRequest et définissez l’attribut extraQueryParameters avec l’indicateur de domaine correspondant supplémentaire.

Les extraits de code suivants montrent comment passer un paramètre de chaîne de requête campaignId personnalisé. Ils utilisent germany-promotion comme valeur d’attribut.

authCodeRequest.extraQueryParameters = {"campaignId" : "germany-promotion"}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)
        .then((response) => {

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. Recherchez l'objet authCodeRequest et définissez l’attribut extraQueryParameters avec l’indicateur de domaine id_token_hint correspondant supplémentaire.

Les extraits de code suivants montrent comment définir un indicateur de jeton d’ID :

authCodeRequest.extraQueryParameters = {"id_token_hint": idToken}

return confidentialClientApplication.getAuthCodeUrl(authCodeRequest)

Configuration de la journalisation

La bibliothèque MSAL génère des messages de journal qui peuvent aider à diagnostiquer les problèmes. L’application peut configurer la journalisation. L’application peut également vous offrir un contrôle personnalisé sur le niveau de détail et vous permettre de déterminer si des données personnelles et organisationnelles sont journalisées.

Nous vous conseillons de créer un rappel de journalisation MSAL et de donner aux utilisateurs le moyen d’envoyer des journaux lorsqu’ils rencontrent des problèmes d’authentification. MSAL fournit les niveaux de détail de journalisation suivants :

  • Erreur : un problème est survenu et une erreur a été générée. Ce niveau est utilisé pour le débogage et l’identification des problèmes.
  • Avertissement : il n’y a pas nécessairement eu une erreur ou une défaillance, mais l’information pousse à effectuer un diagnostic et met en avant d’éventuels problèmes.
  • Info : MSAL journalise les événements qui sont destinés à des fins d’information et pas nécessairement pour le débogage.
  • Commentaires : il s’agit du niveau par défaut. MSAL enregistre les détails complets du comportement de la bibliothèque.

Par défaut, l’enregistreur d’événements MSAL ne capture aucune donnée personnelle ou d’organisation. La bibliothèque vous offre la possibilité d’activer la journalisation des données personnelles et organisationnelles si vous décidez de le faire.

Pour configurer la journalisation, dans index.js, configurez les clés suivantes :

  • logLevel vous permet de spécifier le niveau de journalisation. Valeurs possibles : Error, Warning, Info et Verbose.
  • piiLoggingEnabled active l’entrée de données personnelles. Valeurs possibles : true ou false.

L’extrait de code suivant montre comment configurer la journalisation MSAL :

 const confidentialClientConfig = {
    ...
    system: {
        loggerOptions: {
            loggerCallback(loglevel, message, containsPii) {
                console.log(message);
            },
            piiLoggingEnabled: false,
            logLevel: msal.LogLevel.Verbose,
        }
    }
};

Étapes suivantes

En savoir plus sur les options de configuration MSAL.js.