I am using MSAL with the angular web app. The application type is 'Web' in the Azure portal.
When I try to login using single sign-on I am getting below error. Once the user logins to the app we have to display the username of the current user.
AADSTS9002326: Cross-origin token redemption is permitted only for the 'Single-Page Application' client-type.
I don't want to change the application type to 'SPA'.
Angular version : 11
app.module.ts
--------------------
mport { MsalInterceptor, MSAL_INSTANCE, MSAL_GUARD_CONFIG, MsalGuardConfiguration, MsalBroadcastService, MsalGuard, MsalService, MSAL_INTERCEPTOR_CONFIG, MsalInterceptorConfiguration } from '@azure/msal-angular';
import { BrowserCacheLocation, InteractionType, IPublicClientApplication, LogLevel, PublicClientApplication } from '@azure/msal-browser';
const isIE = window.navigator.userAgent.indexOf("MSIE ") > -1 || window.navigator.userAgent.indexOf("Trident/") > -1;
export function loggerCallback(logLevel: LogLevel, message: string) {
console.log(message);
}
export function MSALInstanceFactory(): IPublicClientApplication {
return new PublicClientApplication({
auth: {
clientId: 'client id',
redirectUri: window.location.origin,
navigateToLoginRequestUrl: true,
authority: 'https://login.microsoftonline.com/tenant_id/'
},
cache: {
cacheLocation: BrowserCacheLocation.LocalStorage,
storeAuthStateInCookie: false, // set to true for IE 11
},
system: {
loggerOptions: {
loggerCallback,
logLevel: LogLevel.Info,
piiLoggingEnabled: false
},
}
});
}
export function MSALGuardConfigFactory(): MsalGuardConfiguration {
return {
interactionType: InteractionType.Redirect,
authRequest: {
scopes: []
}
};
}
export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration {
return {
interactionType: InteractionType.Redirect,
protectedResourceMap: new Map<string, Array<string>>()
}
}
---
---
providers: [
{
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
],
component.ts
---------------
private readonly onDestroy$ = new Subject<void>();
constructor(
@Inject(MSAL_GUARD_CONFIG) private msalGuardConfig: MsalGuardConfiguration,
private authService: MsalService,
private msalBroadcastService: MsalBroadcastService
) {
}
/*login() {
if (this.msalGuardConfig.authRequest) {
this.authService.loginPopup({ ...this.msalGuardConfig.authRequest } as RedirectRequest);
} else {
this.authService.loginPopup();
}
}*/
login(){
alert(this.msalGuardConfig.interactionType);
// if (this.msalGuardConfig.interactionType === InteractionType.Popup) {
if (this.msalGuardConfig.authRequest){
alert('inside if');
this.authService.loginPopup({...this.msalGuardConfig.authRequest} as PopupRequest)
.subscribe((response: AuthenticationResult) => {
this.authService.instance.setActiveAccount(response.account);
});
} else {
alert('inside else');
this.authService.loginPopup()
.subscribe((response: AuthenticationResult) => {
this.authService.instance.setActiveAccount(response.account);
});
}
//}
}
// public async login() {await this.authService.instance.loginRedirect();}
logout() {
this.authService.logoutPopup();
}
getUser(){
alert(this.authService.instance.getActiveAccount());
}
ngOnDestroy() {
this.onDestroy$.next();
}
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.checkAndSetActiveAccount();
})
}
checkAndSetActiveAccount(){
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]);
}
alert('activeAccount');
alert(activeAccount);
if(activeAccount) {
alert(activeAccount.name);
}
}
