登录从Angular应用程序和msal.js重定向Azure AD B2C的用户

我正在尝试使用Angular 4应用程序正确地使用Azure AD B2C进行隐式身份验证.我正在使用msal.js尝试让它工作.我已经检查了非常有限的 official sample code,但它没有实际用途,因为它使用弹出窗口登录,我想要重定向.

我现在拥有的是我在我的应用程序中注入的以下身份验证服务,该服务应该负责所有身份验证.

import { Injectable } from '@angular/core';
import * as Msal from 'msal';

@Injectable()
export class AuthenticationService {

    private tenantConfig = {
        tenant: "example.onmicrosoft.com",clientID: 'redacted (guid of the client),signUpSignInPolicy: "b2c_1_signup",b2cScopes: ["https://example.onmicrosoft.com/demo/read","openid"]
    }

    private authority = "https://login.microsoftonline.com/tfp/" + this.tenantConfig.tenant + "/" + this.tenantConfig.signUpSignInPolicy;

    private clientApplication: Msal.UserAgentApplication;

    constructor() {
        this.clientApplication = new Msal.UserAgentApplication(this.tenantConfig.clientID,this.authority,this.authCallback);
    }

    public login(): void {
        this.clientApplication.loginRedirect(this.tenantConfig.b2cScopes);
    }

    public logout(): void {
        this.clientApplication.logout();
    }

    public isOnline(): boolean {
        return this.clientApplication.getUser() != null;
    }

    public getUser(): Msal.User {
        return this.clientApplication.getUser();
    }

    public getAuthenticationToken(): Promise<string> {
        return this.clientApplication.acquireTokenSilent(this.tenantConfig.b2cScopes)
            .then(token => {
                console.log("Got silent access token: ",token);
                return token;
            }).catch(error => {
                console.log("Could not silently retrieve token from storage.",error);
                return this.clientApplication.acquireTokenPopup(this.tenantConfig.b2cScopes)
                    .then(token => {
                        console.log("Got popup access token: ",token);
                        return token;
                    }).catch(error => {
                        console.log("Could not retrieve token from popup.",error);
                        this.clientApplication.acquireTokenRedirect(this.tenantConfig.b2cScopes);
                        return Promise.resolve("");
                    });
            });
    }

    private authCallback(errorDesc: any,token: any,error: any,tokenType: any) {
        console.log(Callback')

        if (token) {
            console.log("Id token",token);
        }
        else {
            console.log(error + ":" + errorDesc);
        }

        this.getAuthenticationToken();
    }
}

但它不起作用.我正确地获得了ID令牌,并且它是有效的,因此“Id令牌”确实会收到我可以使用的值,但是在有限的时间内.

问题是当我尝试获取身份验证令牌时.对acquireTokenSilent的第一次调用返回一个错误,指出：由于超时,令牌更新操作失败：null.

然后,我得到一个弹出窗口,询问用户名和密码,一段时间后消失,我收到一条错误消息,说用户没有现有会话,请求提示参数的值为’无’.

编辑：

所以,我想我明白了究竟发生了什么,并在一个示例应用程序上重现问题,你可以在这里找到：https://github.com/Gimly/NetCoreAngularAzureB2CMsal

如果从主页连接然后转到fetchData页面(具有天气预报的页面),您可以看到由acquireTokenSilent正确兑换身份验证令牌(打开浏览器控制台以获取所有日志).但是,如果直接在fetchData上刷新页面,您可以看到我描述的相同行为,其中acquireTokenSilent失败并显示有关超时的错误.

我最好的猜测是,出于某种原因,即使getUser返回正确的值,在调用getAuthenticationToken之前msal还没有完全初始化,这就是它完全失败的原因.

现在真正的问题是……在尝试获取令牌之前,如何确保它已完全初始化？