Hello, I am currently using the code below to log in using AAD B2C. It redirects to the login page and seems to be functioning properly, but when the user ID and password are correct, it redirects back to localhost:4200 without capturing the login details. Upon checking the console logs, I noticed the error message stating 'Refused to display in an iframe because it set 'X-Frame-Options' to 'deny' due to the iframe option. Can anyone offer assistance on how to resolve this issue?
import { Injectable } from '@angular/core';
import '../../../node_modules/msal/out/msal';
/// <reference path="../../../node_modules/msal/out/msal.d.ts"
@Injectable()
export class AuthService {
private applicationConfig: any = {
clientID: 'df7cc9df-8073-4017-a108-85869852',
authority: "https://login.microsoftonline.com/tfp/mylogintest.onmicrosoft.com//B2C_1_SiUpIn",
b2cScopes: ["https://mylogintest.onmicrosoft.com/user.read"],
webApi: 'http://localhost:4200',
};
private app: any;
constructor() {
this.app = new Msal.UserAgentApplication(this.applicationConfig.clientID, this.applicationConfig.authority, (errorDesc, token, error, tokenType) => {
// callback for login redirect
});
}
public login() {
return this.app.loginPopup(this.applicationConfig.b2cScopes).then(idToken => {
this.app.acquireTokenSilent(this.applicationConfig.b2cScopes).then(accessToken => {
// updateUI();
console.log(this.app.getUser());
}, error => {
this.app.acquireTokenPopup(this.applicationConfig.b2cScopes).then(accessToken => {
console.log(this.app.getUser());
// updateUI();
}, error => {
console.log("Error acquiring the popup:\n" + error);
});
})
}, error => {
console.log("Error during login:\n" + error);
});
}
public logout() {
this.app.logout();
}
public getToken() {
return this.app.acquireTokenSilent(this.applicationConfig.graphScopes)
.then(accessToken => {
return accessToken;
}, error => {
return this.app.acquireTokenPopup(this.applicationConfig.graphScopes)
.then(accessToken => {
return accessToken;
}, err => {
console.error(err);
});
});
}
}