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

Question

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

当我从 customain 登录并尝试从默认域（从 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}));
            }
        });
    }

}

标签： angularazuremsalazure-static-web-app

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