我正在为我现在工作的公司的应用程序实现安全性。我正在使用@azure/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d2bfa1b3beffb3bcb5a7beb3a092e0fce2fce0" rel="noreferrer noopener nofollow">[email protected]</a> , @azure/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c8a5bba9a4e5aabaa7bfbbadba88fae6f9fee6f9" rel="noreferrer noopener nofollow">[email protected]</a> 。我按照示例发现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.
我发现其他几篇文章都说要清除缓存、存储等...但都不起作用。它所做的只是提示我再次登录，只是用相同的条目填充 sessionStorage，其中包含 msal.442edcf7-9e0c-469b-93fb-daa1839724bd.interaction.status 的条目。 interaction_in_progress 。据我所知，我已经尝试了我发现的一切。还有solution AzureAD 本身不起作用。
我对此很陌生，所以我可能错过了一些简单的东西，如果是这样，我很抱歉。
我的代码可以在下面找到。
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 上。简单的解决方案，但我没有想到它，因为我认为问题也会发生在那里。
最佳答案
我无法通过提供的代码判断，但我遇到了类似的问题。最重要的是，我在控制台中收到以下错误:Error: The selector "app-redirect" did not match any elements
我添加了<app-redirect></app-redirect>到index.html页面，如下app-root按照建议，这似乎解决了这两个问题。
关于javascript - BrowserAuthError : interaction_in_progress - Unable to fix, 无论找到什么解决方案，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/68726691/