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

Question

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

当我从自定义登录并尝试从默认域(从 Azure 静态 Web 应用程序发布)登录时，会发生这种情况

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 静态应用程序支持带有模型对话框的 loginPopUp。了解有关 Azure 静态 Web 应用和模型对话框的更多信息:

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

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