Partager via

Configurer des options d’authentification dans une application Angular à l’aide d’Azure Active Directory 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 Angular (SPA).

Conditions préalables

Familiarisez-vous avec l’article Configurer l’authentification dans un spa Angular ou activer l’authentification dans votre propre spa Angular.

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 produit dans une fenêtre contextuelle et l’état de l’application est conservé. Utilisez cette approche si vous ne souhaitez pas que les utilisateurs s’éloignent de la page de votre application pendant l’authentification. Toutefois, il existe des problèmes connus liés aux fenêtres contextuelles sur Internet Explorer.
    • Pour vous connecter avec des fenêtres contextuelles, dans la src/app/app.component.ts classe, utilisez la loginPopup méthode.
    • Dans la src/app/app.module.ts classe, définissez l’attribut interactionType sur InteractionType.Popup.
    • Pour vous déconnecter avec des fenêtres contextuelles, dans la src/app/app.component.ts classe, utilisez la logoutPopup méthode. Vous pouvez également configurer logoutPopup pour rediriger la fenêtre principale vers une autre page, telle que la page d’accueil ou la page de connexion, une fois la déconnexion terminée en passant mainWindowRedirectUri dans le cadre de la demande.
  • Redirection : l’utilisateur est redirigé vers Azure AD B2C pour terminer le flux d’authentification. Utilisez cette approche si les utilisateurs ont des contraintes de navigateur ou des stratégies où les fenêtres contextuelles sont désactivées.
    • Pour vous connecter avec redirection, dans la src/app/app.component.ts classe, utilisez la loginRedirect méthode.
    • Dans la src/app/app.module.ts classe, définissez l’attribut interactionType sur InteractionType.Redirect.
    • Pour vous déconnecter avec redirection, dans la src/app/app.component.ts classe, utilisez la logoutRedirect méthode. Configurez l’URI vers lequel il doit rediriger après une déconnexion en définissant postLogoutRedirectUri. Vous devez ajouter cet URI en tant qu’URI de redirection dans l’inscription de votre application.

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

//src/app/app.component.ts
login() {
  if (this.msalGuardConfig.authRequest){
    this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest);
  } else {
    this.authService.loginPopup();
  }
}

logout() { 
  this.authService.logoutPopup({
    mainWindowRedirectUri: '/',
  });
}

La bibliothèque MSAL Angular a trois flux de connexion : connexion interactive (où un utilisateur sélectionne le bouton de connexion), MSAL Guard et MSAL Interceptor. Les configurations MSAL Guard et MSAL Interceptor prennent effet lorsqu’un utilisateur tente d’accéder à une ressource protégée sans jeton d’accès valide. Dans ce cas, la bibliothèque MSAL force l’utilisateur à se connecter.

Les exemples suivants montrent comment configurer MSAL Guard et MSAL Interceptor pour la connexion avec une fenêtre contextuelle ou une redirection :

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
    }
  },
  {
    interactionType: InteractionType.Popup,
    protectedResourceMap: new Map([
      [protectedResources.todoListApi.endpoint, protectedResources.todoListApi.scopes]
    ])
  })

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 l'attribut d’entrée requis comme cela est décrit dans Configurer la connexion directe.
  2. Créez ou utilisez un objet de configuration MSAL existant PopupRequest ou RedirectRequest.
  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. On utilise bob@contoso.com comme valeur d’attribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      loginHint: "bob@contoso.com"
    }
  },

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 ou utilisez un objet de configuration MSAL existant PopupRequest ou RedirectRequest.
  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. On utilise facebook.com comme valeur d’attribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.domainHint = "facebook.com";

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      domainHint: "facebook.com"
    }
  },

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 ou utilisez un objet de configuration MSAL existant PopupRequest ou RedirectRequest avec des attributs extraQueryParameters.
  3. Ajoutez le ui_locales paramètre avec le code de langue correspondant aux extraQueryParameters attributs.

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

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"ui_locales" : "es-es"};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

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 ou utilisez un objet de configuration MSAL existant PopupRequest ou RedirectRequest avec des attributs extraQueryParameters.
  3. Ajoutez le paramètre de chaîne de requête personnalisé, tel que 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é. On utilise germany-promotion comme valeur d’attribut.

// src/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"campaignId": 'germany-promotion'}

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"ui_locales" : "es-es"}
    }
  },

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 le profil technique d’un indicateur de jeton d’ID.
  2. Créez ou utilisez un objet de configuration MSAL existant PopupRequest ou RedirectRequest avec des attributs extraQueryParameters.
  3. Ajoutez le id_token_hint paramètre 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/app/app.component.ts
let authRequestConfig: PopupRequest;

if (this.msalGuardConfig.authRequest) {
  authRequestConfig = { ...this.msalGuardConfig.authRequest } as PopupRequest
}

authRequestConfig.extraQueryParameters = {"id_token_hint": idToken};

this.authService.loginPopup(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Popup,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"id_token_hint" : idToken}
    }
  },

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 votre domaine personnalisé pour votre ID de locataire dans l’URL d’authentification, suivez les instructions de l’option Activer les domaines personnalisés. Ouvrez l’objet src/app/auth-config.ts de configuration MSAL et modifiez authorities et knownAuthorities 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"],
      ...
    },
  ...
}

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 donner un contrôle personnalisé sur le niveau de détail et déterminer si les données personnelles et organisationnelles sont enregistré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 : Une erreur s’est produite 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 d’erreur ou d’échec, mais les informations sont destinées aux diagnostics et à l’identification des problèmes.
  • Informations : MSAL enregistre des événements à titre informatif 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 organisationnelle. La bibliothèque vous donne la possibilité d’activer la journalisation des données personnelles et organisationnelles si vous décidez de le faire.

Pour configurer la gestion des logs Angular, dans src/app/auth-config.ts, 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, , WarningInfo, 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: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Étapes suivantes

  • Last updated on