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

Question

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

​

当我从自定义登录，并尝试从默认域(从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静态应用程序支持带有模型对话框的loginPopUp。了解有关Azure静态Web应用程序和模型对话框的更多信息：

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