I have an angular app that is integrated with Microsoft single sign on lib azure/msal-browser and azure/msal-angular
my app-routing.module.ts looks like the following:
{
path:'clients',
component: ClientSearchComponent,
data: { title: 'Client Search' },
canActivate: [MsalGuard]
},
{
path: 'clients/:id',
component: ClientDetailsComponent,
resolve: {
tab: ClientDetailsResolver,
headerData: ClientDetailHeaderDataResolver
},
canActivate: [MsalGuard],
children: [
{
path: 'demographics',
component: ClientIdentInfoComponent,
data: { title: 'Client Demographics' },
resolve: { client: ClientIdentInfoResolver },
canDeactivate: [ ClientIdentInfoGuard ],
},
{
path: 'insurances',
component: ClientInsuranceComponent,
data: { title: 'Client Insurances' },
resolve: { insurances: InsuranceInfoResolver },
},
{
path: '',
redirectTo: 'demographics',
pathMatch: 'full'
}
}
I have an external service where users click on a button and gets redirected to another page (not a new tab). After they put in their username and hit submit, the service then redirects them to my application with the following url:
mydomain.com/clients?code=zcwZmVmMDJkYjJmZmQtOGIz_PF84_0be990f3-c9a9-483d-b0ca-f87b327c76b3&state=7f1934f6-4te0-4687-ac81-47316c60efe5
for some reason, my application is not displaying anything, even a console.log('whatever') on the level of the app.component.ts is not showing.
ngOnInit() {
console.log('whatever'); // Not reachable
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.setLoginDisplay();
this.msalBroadcastService.inProgress$
.pipe(
filter((status: InteractionStatus) => status === InteractionStatus.None),
takeUntil(this._destroying$)
)
.subscribe(() => {
this.setLoginDisplay();
this.checkAndSetActiveAccount();
})
}
if I changed the query param code to literally ANTYHING then the app works just fine and it displays the page. Unfortunately, I cannot control the param name code from the third-party app. It seems like my app is having a problem with the query param code if it was passed in the url.
The IPublicClientApplication logger is showing that my app is going into an infinite loop
Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Event callback registered with id: f39e816c-5bc5-4fa5-8629-c440356cfdf5
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - MSAL Guard activated
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - Emitting event: msal:handleRedirectStart
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectStart
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - handleRedirectPromise called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - handleRedirectPromise has been called for the first time, storing the promise
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - handleRedirectPromise called but there is no interaction in progress, returning null.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - Emitting event: msal:handleRedirectEnd
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectEnd
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - BroadcastService - msal:handleRedirectEnd results in setting inProgress to none
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Guard - at least 1 account exists, can activate or load
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - Guard - Hash contains known code response, stopping navigation.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - MSAL Guard activated
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - Emitting event: msal:handleRedirectStart
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Emitting event to callback f39e816c-5bc5-4fa5-8629-c440356cfdf5: msal:handleRedirectStart
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - BroadcastService - msal:handleRedirectStart results in setting inProgress to handleRedirect
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - handleRedirectPromise called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - handleRedirectPromise has been called previously, returning the result from the first call
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - getAllAccounts called
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Guard - at least 1 account exists, can activate or load
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Info - Guard - Hash contains known code response, stopping navigation.
app.module.ts:122 Log Level:::::2
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - Guard - canActivate
app.module.ts:122 Log Level:::::3
app.module.ts:121 Message:::::[Tue, 24 May 2022 18:05:01 GMT] : : @azure/[email protected] : Verbose - MSAL Guard activated
I am using popup not redirect for the auth
my app.module.ts looks like this
export function loggerCallback(logLevel: LogLevel, message: string) {
console.log('Message:::::' message);
console.log('Log Level:::::' logLevel);
}
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: '<clientId>',
authority: 'https://login.microsoftonline.com/<tid>',
redirectUri: '/',
postLogoutRedirectUri: '/'
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: isIE, // set to true for IE 11. Remove this line to use Angular Universal
},
system: {
allowRedirectInIframe: true,
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Verbose,
piiLoggingEnabled: true
}
}
});
}
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
const protectedResourceMap = new Map<string, Array<string>>();
const baseUrl = environment.apiUrl;
protectedResourceMap.set('https://graph.microsoft.com/v1.0/me', ['user.read']);
protectedResourceMap.set(baseUrl, ['<clientId>/.default']);
return {
interactionType: InteractionType.Popup,
protectedResourceMap
};
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Popup,
authRequest: {
scopes: ['clientId/.default']
},
loginFailedRoute: '/unauthorized'
};
}
and the providers array looks like this
providers: [
CdkColumnDef,
{ provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
{
provide: HTTP_INTERCEPTORS,
useClass: MsalInterceptor,
multi: true
},
{
provide: MSAL_INSTANCE,
useFactory: MSALInstanceFactory
},
{
provide: MSAL_GUARD_CONFIG,
useFactory: MSALGuardConfigFactory
},
{
provide: MSAL_INTERCEPTOR_CONFIG,
useFactory: MSALInterceptorConfigFactory
},
MsalService,
MsalGuard,
MsalBroadcastService
],
bootstrap: [AppComponent, MsalRedirectComponent]
Have any of you had this problem before?
CodePudding user response：
I see you're using MSAL, you can set the logger to show more details to see if it's the interceptor that is causing troubles:
export function loggerCallback(logLevel: LogLevel, message: string) {
console.log(message);
}
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {...your auth parms...},
cache: {... your cache parms ...},
system: {
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Debug,
piiLoggingEnabled: true
}
}
});
}
This gave us more insights in what was causing issues with the routing.