Login redirects user using Azure AD B2C from Angular app and msal.js

Question

I am trying to get an Angular 4 app to properly perform implicit authentication using Azure AD B2C. I use msal.js to try to get it to work. I checked a very limited official code sample , but it has no real use, as it uses a popup to login, and I want to do a redirect.

Now I have the following authentication service that I insert into my application and this should take care of all authentication.

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();
    }
}

But it does not work. I use the ID token correctly, and it is valid, so the "Id token" gets a value that I can use, but for a limited time.

, . , acquireTokenSilent , : Token renewal operation failed due to timeout: null.

, , User does not have an existing session and request prompt parameter has a value of 'None'..

Edit:

, , , , : https://github.com/Gimly/NetCoreAngularAzureB2CMsal

, fetchData ( ), , acquireTokenSilent ( , ). fetchData, , , acquireTokenSilent .

, , , getUser , msal , getAuthenticationToken, .

... , , ?

Answer 1

, , , :

1) msal.js, , , acquireTokenSilent() , . ( , dev- ). . GitHub .

2) URI , URL URI , , URI .

, , .

Answer 2

MSAL js, TokenRedirect TokenPopup.