MSAL with Angular2:拒绝在帧中显示，因为它设置了'；X-Frame-Options'；至'；否认'；

您好，我正在使用下面的代码使用AAD b2C登录，它正在重定向到登录页面，并且工作方式类似于如果用户id和APSBOWS是正确的，它将重定向回localhost:4200，而不获取登录详细信息，当我检查控制台的日志时，它显示拒绝在iframe中显示的错误，因为它将iframe选项导致的“X-Frame-Options”设置为“deny”。但是如何解决这个问题，请帮忙

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

从'@angular/core'导入{Injectable}；
导入“../../../node_modules/msal/out/msal”；
///  {
//用于登录重定向的回调
});
}
公共登录（）{
返回此.app.loginPopup（this.applicationConfig.b2cScopes）。然后（idToken=>{
this.app.acquireTokenSilent（this.applicationConfig.b2cScopes）。然后（accessToken=>{
//updateUI（）；
console.log（this.app.getUser（））；
}，错误=>{
this.app.acquireTokenPopup（this.applicationConfig.b2cScopes）。然后（accessToken=>{
console.log（this.app.getUser（））；
//updateUI（）；
}，错误=>{
log（“获取弹出窗口时出错：\n”+错误）；
});
})
}，错误=>{
log（“登录时出错：\n”+错误）；
});
}
公共注销（）{
this.app.logout（）；
}
公共getToken（）{
返回此.app.acquireTokenSilent（此.applicationConfig.graphScopes）
。然后（accessToken=>{
返回accessToken；
}，错误=>{
返回此.app.acquireTokenPopup（此.applicationConfig.graphScopes）
。然后（accessToken=>{
返回accessToken；
}，err=>{
控制台错误（err）；
});
});
}
}

我已经更改了登录功能代码，现在可以正常工作了

`public login() {
    return this.app.loginPopup(this.applicationConfig.graphScopes)
        .then(idToken => {
            const user = this.app.getUser();
            console.log(user);
            if (user) {
                console.log(user);
                return user;
            } else {
                return null;
            }
        }, () => {
            return null;
        });`

---

我在使用angular 5的应用程序中遇到了同样的问题，这是MSAL的问题，因为它在引擎盖下使用iFrame

js使用隐藏的iFrame在后台以静默方式获取和更新令牌。Azure AD将令牌返回到令牌请求中指定的注册重定向uri（默认情况下，这是应用程序的根页面）。由于响应是302，因此会在iframe中加载与重定向uri对应的HTML。通常应用程序的重定向uri是根页面，这会导致它重新加载

他们还解释了如何解决这个问题：

• 为iframe指定不同的html
• 主应用程序文件中的条件初始化

在维基上，他们解释了如何做到这一点