Configurer les options d’authentification dans une application React à l’aide d’Azure Active Directory B2C

  • Article

Cet article décrit les méthodes permettant de personnaliser et d’améliorer l’expérience d’authentification Azure AD B2C (Azure Active Directory B2C) pour votre application monopage (SPA) React. Avant de commencer, consultez l’article Configurer l’authentification dans une application monopage (SPA) React ou Activer l’authentification dans votre propre application monopage (SPA) React.

Comportement de connexion et de déconnexion

Vous pouvez configurer votre application monopage pour la connexion des utilisateurs avec MSAL.js de deux façons :

  • Fenêtre contextuelle : l’authentification se déroule dans une fenêtre contextuelle, et l’état de l’application est conservé. Optez pour cette approche si vous souhaitez que les utilisateurs restent sur la page de votre application pendant l’authentification. L’utilisation des fenêtres contextuelles sur Internet Explorer peut entraîner des problèmes.
    • Pour la connexion avec des fenêtres contextuelles, utilisez la méthode loginPopup.
    • Pour la déconnexion avec des fenêtres contextuelles, utilisez la méthode logoutPopup.
  • Redirection : l’utilisateur est redirigé vers Azure AD B2C pour mettre fin au flux d’authentification. Optez pour cette approche si les utilisateurs sont soumis à des contraintes imposées par le navigateur ou par des stratégies qui bloquent les fenêtres contextuelles.
    • Pour la connexion avec redirection, utilisez la méthode loginRedirect.
    • Pour la déconnexion avec redirection, utilisez la méthode logoutRedirect.

L’exemple suivant montre comment se connecter et se déconnecter :

// src/components/NavigationBar.jsx
instance.loginPopup(loginRequest)
            .catch((error) => console.log(error))

instance.logoutPopup({ postLogoutRedirectUri: "/", mainWindowRedirectUri: "/" })

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 votre domaine personnalisé en tant qu’ID de locataire dans l’URL d’authentification, suivez les instructions fournies dans Activer des domaines personnalisés. Ouvrez l’objet de configuration MSAL knownAuthorities, puis modifiez les valeurs src/authConfig.js et authorities de façon à utiliser vos nom de domaine et 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 :

export const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_reset",
        },
        editProfile: {
            authority: "https://custom.domain.com/00000000-0000-0000-0000-000000000000/b2c_1_edit_profile"
        }
    },
    authorityDomain: "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 requise comme décrit dans l’article Configurer la connexion directe.
  2. Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant.
  3. Définissez l’attribut loginHint avec l’indicateur de connexion correspondant.

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

// src/components/NavigationBar.jsx
loginRequest.loginHint = "bob@contoso.com";
instance.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 ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant.
  3. 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. Ils utilisent facebook.com comme valeur d’attribut.

// src/components/NavigationBar.jsx
loginRequest.domainHint = "facebook.com";
instance.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 du langage.
  2. Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
  3. Ajoutez à l’attribut extraQueryParameters le paramètre ui_locales avec le code de langue correspondant.

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"ui_locales" : "es-es"};
instance.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 ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
  3. Ajoutez le paramètre de chaîne de requête personnalisé, par exemple campaignId. Définissez la valeur du paramètre.

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"campaignId": 'germany-promotion'};
instance.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 le profil technique d’un indicateur de jeton d’ID.
  2. Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
  3. Ajoutez le paramètre id_token_hint avec la variable correspondante qui stocke le jeton d’ID.

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

// src/components/NavigationBar.jsx
loginRequest.extraQueryParameters = {"id_token_hint": idToken};
instance.loginPopup(loginRequest);

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 MSAL, dans src/authConfig.js, configurez les clés suivantes :

  • loggerCallback est la fonction de rappel d’enregistreur d’événements.
  • 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 :

export const msalConfig = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Étapes suivantes