Erreurs dans MSAL Angular

BrowserAuthErrors

Interaction_en_cours

Message d’erreur : l’interaction est en cours. Vérifiez que cette interaction a été effectuée avant d’appeler une API interactive.

Cette erreur est levée lorsqu’une API interactive (loginPopup, , loginRedirect, acquireTokenPopupacquireTokenRedirect) est appelée alors qu’une autre API interactive est toujours en cours. Les API `login` et `acquireToken` sont asynchrones ; vous devez donc vous assurer que les promesses qui en résultent sont résolues avant d’invoquer une autre API.

Dans @azure/msal-angular 2 scénarios courants, cela peut se produire :

1. Votre application ne gère pas correctement les redirections. L’erreur se produit ensuite lorsque l’application ou l’utilisateur tente d’appeler une API interactive.
2. Votre application appelle l’une des API ci-dessus sans vérifier d’abord si l’interaction est déjà en cours ailleurs.

Les redirections doivent être gérées soit avec MsalRedirectComponent, soit en appelant handleRedirectObservable(). La non gestion des redirections explicitement avec l’une de ces deux approches entraîne l’erreur ci-dessus. Consultez notre documentation sur les redirections ici pour plus d’informations sur les deux approches.

En outre, toute interaction doit être effectuée après s’être abonné à l’observable inProgress$ et après avoir appliqué un filtre sur InteractionStatus.None. La tentative d’interaction alors qu’une autre est en cours n’est pas prise en charge et entraîne l’erreur ci-dessus. Vérifier la présence de InteractionStatus.None est la façon de s’assurer que cela ne se produise pas. Pour plus d’informations, consultez notre documentation sur les événements .

Pour plus d’informations sur cette erreur, consultez le @azure/msal-browser document d’erreur .

❌ L’exemple suivant génère cette erreur quand un autre composant a déjà appelé une API interactive en cours :

import { Component, OnInit } from '@angular/core';
import { MsalService, MsalBroadcastService, InteractionStatus } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

  constructor(
    private msalBroadcastService: MsalBroadcastService,
    private authService: MsalService
  ) {}

  ngOnInit(): void {
    this.authService.loginRedirect();
  }

✔️ Pour corriger l’exemple précédent, vérifiez qu’aucune autre interaction n’est en cours avant d’appeler loginRedirect:

import { Component, OnInit } from '@angular/core';
import { InteractionStatus } from '@azure/msal-browser';
import { MsalService, MsalBroadcastService } from '@azure/msal-angular';
import { filter } from 'rxjs/operators';

@Component()
export class ExampleComponent implements OnInit {

  constructor(
    private msalBroadcastService: MsalBroadcastService,
    private authService: MsalService
  ) {}

  ngOnInit(): void {
    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
      )
      .subscribe(() => {
        this.authService.loginRedirect();
      })
  }

Procédure de résolution du problème

• Activez la journalisation détaillée et tracez l’ordre des événements. Vérifiez qu’une API interactive n’est pas appelée avant qu’une autre n’ait été résolue.
• Si vous utilisez le flux de redirection, assurez-vous que MsalRedirectComponet est correctement initialisé, ou que handleRedirectObservable est appelé sur chaque page susceptible de faire l’objet d’une redirection.

Si vous ne parvenez pas à déterminer pourquoi cette erreur se produit, ouvrez un ticket et préparez-vous à fournir les informations suivantes :

• Journaux détaillés
• Exemple d’application et/ou d’extraits de code que nous pouvons utiliser pour reproduire le problème
• Actualisez la page. L’erreur disparaît-t-elle ?
• Ouvrez votre application dans un nouvel onglet. L’erreur disparaît-t-elle ?