angular - 带有 MSAL 的 Angular Web 应用程序会出现跨域令牌兑换错误

Question

我正在将 MSAL 与 Angular Web 应用程序一起使用。Azure 门户中的应用程序类型是“Web”。

当我尝试使用单点登录登录时，出现以下错误。一旦用户登录到应用程序，我们必须显示当前用户的用户名。

AADSTS9002326：跨域令牌兑换仅允许用于“单页应用程序”客户端类型。

我不想将应用程序类型更改为“SPA”。

角度版本：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);

        }
    }