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

Article
01/11/2024

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

Prérequis

Consultez l’article Configurer l’authentification dans une application monopage (SPA) Angular ou Activer l’authentification dans votre propre application monopage (SPA) Angular.

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. Toutefois, des problèmes concernant les fenêtres pop-up sur Internet Explorer sont connus.
- Pour la connexion avec des fenêtres contextuelles, dans la classe src/app/app.component.ts, utilisez la méthode loginPopup.
- Dans la classe src/app/app.module.ts, définissez l’attribut interactionType sur InteractionType.Popup.
- Pour la déconnexion avec des fenêtres contextuelles, dans la classe src/app/app.component.ts, utilisez la méthode logoutPopup. Vous pouvez également configurer logoutPopup de manière à 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 transmettant mainWindowRedirectUri dans le cadre de la requête.
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, dans la classe src/app/app.component.ts, utilisez la méthode loginRedirect.
- Dans la classe src/app/app.module.ts, définissez l’attribut interactionType sur InteractionType.Redirect.
- Pour la déconnexion avec redirection, dans la classe src/app/app.component.ts, utilisez la méthode logoutRedirect. Configurez l'URI vers lequel doit avoir lieu la redirection après une déconnexion en paramétrant postLogoutRedirectUri. Vous devez ajouter cet URI comme URI de redirection dans l’inscription de votre application.

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

Fenêtre contextuelle
Rediriger

//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: '/',
  });
}

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

logout() { 
  this.authService.logoutRedirect({
    postLogoutRedirectUri: 'http://localhost:4200'
  });
}

La bibliothèque MSAL Angular contient trois flux de connexion : connexion interactive (où un utilisateur sélectionne le bouton de connexion), MSAL Guard et MSAL Interceptor. Les configurations de MSAL Guard et MSAL Interceptor s’appliquent 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 à l’aide d’une fenêtre contextuelle ou d’une redirection :

Fenêtre contextuelle
Rediriger

// 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]
    ])
  })

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

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 :

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.
Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant.
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.

Fenêtre contextuelle
Rediriger

// 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"
    }
  },

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

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

authRequestConfig.loginHint = "bob@contoso.com"

this.authService.loginRedirect(authRequestConfig);

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

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 :

Vérifiez le nom de domaine de votre fournisseur d’identité externe. Pour plus d’informations, consultez Rediriger la connexion vers un fournisseur social.
Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant.
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.

Fenêtre contextuelle
Rediriger

// 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"
    }
  },

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

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

authRequestConfig.domainHint = "facebook.com";

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    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 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 :

Configurez la personnalisation du langage.
Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
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.

Fenêtre contextuelle
Rediriger

// 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"}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

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

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 :

Configurez l’élément ContentDefinitionParameters.
Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
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.

Fenêtre contextuelle
Rediriger

// 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"}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

// src/app/app.module.ts
MsalModule.forRoot(new PublicClientApplication(msalConfig),
  {
    interactionType: InteractionType.Redirect,
    authRequest: {
      scopes: protectedResources.todoListApi.scopes,
      extraQueryParameters: {"campaignId" : "germany-promotion"}
    }
  },

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 :

Dans votre stratégie personnalisée, définissez le profil technique d’un indicateur de jeton d’ID.
Créez ou utilisez un objet de configuration MSAL PopupRequest ou RedirectRequest existant avec des attributs extraQueryParameters.
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 :

Fenêtre contextuelle
Rediriger

// 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}
    }
  },

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

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

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

this.authService.loginRedirect(authRequestConfig);

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

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/app/auth-config.ts 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 :

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 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 Angular, dans le fichier 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, 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: Configuration = {
  ...
  system: {
    loggerOptions: {
        loggerCallback: (logLevel, message, containsPii) => {  
            console.log(message);
          },
          logLevel: LogLevel.Verbose,
          piiLoggingEnabled: false
      }
  }
  ...
}

Étapes suivantes

Pour savoir plus, consultez Options de configuration de MSAL.js.

Partager via

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

Prérequis

Présélectionner un fournisseur d'identité

Spécifier la langue de l’interface utilisateur

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

Transmission d’indicateur de jeton d’ID

Utiliser un domaine personnalisé

Configuration de la journalisation

Étapes suivantes

Ressources supplémentaires

Partager via

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

Prérequis

Comportement de connexion et de déconnexion

Préremplir le nom de connexion

Présélectionner un fournisseur d'identité

Spécifier la langue de l’interface utilisateur

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

Transmission d’indicateur de jeton d’ID

Utiliser un domaine personnalisé

Configuration de la journalisation

Étapes suivantes

Ressources supplémentaires