BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

Question

我正在为我现在工作的公司的应用程序实施安全性。我正在使用 @azure/msal-angular@2.0.2、@azure/msal-browser@2.16.1。我按照找到的例子 here 并让它在第一个应用程序中工作。我继续为下一个应用程序实现它，它基本上是相同的，只是与不同的 api 对话，但复杂度是相同的。在可能做错事后，我不断收到错误消息：

core.js:6157 ERROR Error: Uncaught (in promise): BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.
BrowserAuthError: interaction_in_progress: Interaction is currently in progress. Please ensure that this interaction has been completed before calling an interactive API.  For more visit: aka.ms/msaljs/browser-errors.

我发现其他几篇文章说要清除缓存、存储等...但是 none 它有效。它所做的只是提示我再次登录，只是用相同的条目填回 sessionStorage，其中包含 msal.442edcf7-9e0c-469b-93fb-daa1839724bd.interaction.status interaction_in_progress 的条目。据我所知，我已经尝试过我发现的一切。 AzureAD 本身的 solution 也不起作用。

我对此很陌生，所以我可能错过了一些简单的事情，如果是这样，我深表歉意。

我的代码可以在下面找到。

Angular版本

11.0.2

app.module.ts

import {
  MsalBroadcastService,
  MsalGuard,
  MsalInterceptor,
  MsalModule, MsalRedirectComponent,
  MsalService
} from "@azure/msal-angular";
import {BrowserCacheLocation, InteractionType, LogLevel, PublicClientApplication} from '@azure/msal-browser';


const isIE = window.navigator.userAgent.indexOf('MSIE ') > -1 || window.navigator.userAgent.indexOf('Trident/') > -1;
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RibonComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    ...,
    MsalModule.forRoot(
      new PublicClientApplication({ // MSAL Configuration
        auth: {
          clientId: "442edcf7-...",
          authority: "https://login.microsoftonline.com/81fa766e-...",
          redirectUri: window.location.origin,
        },
        cache: {
          cacheLocation : BrowserCacheLocation.LocalStorage,
          storeAuthStateInCookie: false, // set to true for IE 11
        },
        system: {
          loggerOptions: {
            loggerCallback: (level: LogLevel, message: string, containsPii: boolean): void => {
              if (containsPii) {
                return;
              }
              switch (level) {
                case LogLevel.Error:
                  console.error(message);
                  return;
                case LogLevel.Info:
                  console.info(message);
                  return;
                case LogLevel.Verbose:
                  console.debug(message);
                  return;
                case LogLevel.Warning:
                  console.warn(message);
                  return;
              }
              },
            piiLoggingEnabled: false
          }
        }
      }), {
        interactionType: InteractionType.Popup, // MSAL Guard Configuration
      }, {
        protectedResourceMap: new Map([
          [ 'http://localhost:8400/', ['api://442edcf7-9e0c-469b-93fb-daa1839724bd/acces_as_user/Acces-user']],
          [ 'https://quality-score-dev-pcq-dev.bravo-apps.volvocars.biz/', ['api://442edcf7-9e0c-469b-93fb-daa1839724bd/acces_as_user/Acces-user']]
        ]),
        interactionType: InteractionType.Redirect // MSAL Interceptor Configuration
      }
    )
  ],
  providers: [
    EnvServiceProvider,
    {
      provide: MatPaginatorIntl,
      useClass: MatPaginatorIntlTranslator
    },
    {
      provide: HTTP_INTERCEPTORS,
      useClass: MsalInterceptor,
      multi: true
    },
    MsalService,
    MsalGuard,
    MsalBroadcastService,
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.ts


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit, OnDestroy{
  title = 'Quality score';

  isIframe = false;
  loginDisplay = false;

  activeUser = '';

  private readonly onDestroy$ = new Subject<void>()

  constructor(
    @Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
    private languageService: LanguageService,
    private authService: MsalService,
    private msalBroadcastService: MsalBroadcastService,
    private location: Location,
    private userService: UserService
  ){}

  ngOnInit(): void {
    const currentPath = this.location.path();
    // Dont perform nav if in iframe or popup, other than for front-channel logout
    this.isIframe = BrowserUtils.isInIframe() && !window.opener && currentPath.indexOf("logout") < 0; // Remove this line to use Angular Universal

    this.msalBroadcastService.inProgress$
      .pipe(
        filter((status: InteractionStatus) => status === InteractionStatus.None),
        takeUntil(this.onDestroy$)
      )
      .subscribe(() => {
        this.setLoginDisplay();
        this.checkAndSetActiveAccount();
      })
  }

  ngOnDestroy() {
    this.onDestroy$.next();
  }

  setLoginDisplay() {
    this.loginDisplay = this.authService.instance.getAllAccounts().length > 0;
  }
  checkAndSetActiveAccount(){
    /**
     * If no active account set but there are accounts signed in, sets first account to active account
     * To use active account set here, subscribe to inProgress$ first in your component
     * Note: Basic usage demonstrated. Your app may require more complicated account selection logic
     */
    let activeAccount = this.authService.instance.getActiveAccount();

    if (!activeAccount && this.authService.instance.getAllAccounts().length > 0) {
      let accounts = this.authService.instance.getAllAccounts();
      this.authService.instance.setActiveAccount(accounts[0]);
    }

    if(activeAccount) {
      this.userService.activeUserName = activeAccount.name;
      this.activeUser = activeAccount.name;
    }
  }

  logout(): void{
    this.authService.logoutRedirect();
  }
}

我真的迷路了，不知道自己做错了什么。据我了解，有一个登录过程被打断了，可能是我离开了登录屏幕，但现在我不知道如何“完成它”或完成这个过程。

更新

我尝试从正在运行的应用程序中复制 LocalStorage 值，然后它开始运行了。刷新有效并且没有出现错误，但是当我注销并提示我再次登录并且我登录后，它又回到了开始。

解决方案更新

我有了突破。如果我将登录类型更改为 Popup 并按此方式处理，则它已修复。我可以毫无问题地登录和注销。但是，如果我随后将其改回重定向，它又会损坏。所以现在我会把它保留在 Popup 上。简单的解决方案，但我没有想到，因为我认为问题也会在那里发生。

Answer 1

“解决方法”修复

使您的登录类型弹出。笨蛋我不去想那个

Answer 2

我无法根据提供的代码判断，但我遇到了类似的问题。最重要的是，我在控制台中收到以下错误：Error: The selector "app-redirect" did not match any elements

这让我想到以下 post：https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/3114#issuecomment-788394239

我按照建议将 <app-redirect></app-redirect> 添加到 index.html 页面 app-root 下面，这似乎解决了两个问题。

BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

BrowserAuthError: interaction_in_progress - Unable to fix, regardles of solutions found

javascript

azure

msal

angular

msal-angular