当我使用 Azure static web 应用程序时，为什么 msal-angular `loginPopup` 弹出它自己的页面

Question

当我调用“msal-angular”的 MsalService.loginPopup 时，它自己的页面会像这样弹出。

当我从 customain 登录并尝试从默认域登录时会发生这种情况（这是从 Azure Static Web App 发布的）

import { Inject, Injectable } from '@angular/core';
import { MsalService } from '@azure/msal-angular';
import { LOGIN_REQUEST_TOKEN, LoginRequest, TOKEN_REQUEST_TOKEN, TokenRequest } from './config';
import { defer, from, Observable, of } from 'rxjs';
import { AuthResponse } from 'msal';
import { isIE } from './isIE';

export function checkClientLogin(): boolean {
    return !!localStorage.getItem('isLogin');
}

const extraScopesToConsent = [ 'user.read', 'openid', 'profile' ];

@Injectable()
export class MsalAuthService {

    constructor(
        private msalService: MsalService,
    ) {
    }

    login(): Observable<AuthResponse> {
        return defer(() => {
            if (isIE) {
                return this.msalService.loginRedirect({extraScopesToConsent});
            } else {
                return from(this.msalService.loginPopup({extraScopesToConsent}));
            }
        });
    }

}

Answer 1

当您在代码中使用 msal-angular 并对自己进行身份验证时，会出现另一个弹出窗口，将您重定向到 login.microsoftonline.com。 如您的代码中所述，它在需要弹出和需要重定向时声明。

Azure Static 应用程序支持带有 model 对话框的 loginPopUp。 详细了解 Azure Static Web 应用程序和 ZA559B87068921EEC05086CE548

https://docs.microsoft.com/en-us/azure/static-web-apps/

https://docs.microsoft.com/en-us/azure/devops/extend/develop/using-host-dialog?view=azure-devops

Answer 2

这是一个已知问题，您可以遵循此链接中的一些解决方案： https://github.com/AzureAD/microsoft-authentication-library-for-js/issues/174

基本上，您需要使用如下代码关闭它：

if (window.opener && window.opener !== window) {
  // you are in a popup
  isPopup = true;
}
this.router.events.subscribe(event => {
  if (event instanceof NavigationStart) {
    if (location.hash.includes("id_token")
    || location.hash.includes("access_token")
    || isPopup) {
      // this will close MS login popup
      let config: Configuration = {
        auth: {
          clientId: this.configService.environment.clientId,
          authority: this.configService.environment.authority,              
        }
      };
      new UserAgentApplication(config).loginPopup().then(response => {
        window.close();
      });
    }
  }
})

你可以把它放在app.component.ts的constructor中