带有 Angular2 的 MSAL：拒绝在框架中显示，因为它将“X-Frame-Options”设置为“拒绝”答案

【问题标题】：MSAL with Angular2 : Refused to display in a frame because it set 'X-Frame-Options' to 'deny'带有 Angular2 的 MSAL：拒绝在框架中显示，因为它将“X-Frame-Options”设置为“拒绝”
【发布时间】：2018-02-08 23:34:39
【问题描述】：

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

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 azure typescript adal msal

【解决方案1】：

我已经更改了登录功能代码，现在可以正常使用了。

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

【讨论】：

【解决方案2】：

我在使用 angular 5 的应用程序中遇到了同样的问题，这是 MSAL 的问题，因为它在后台使用 Iframe。

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

他们还解释了如何解决它：Solution

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

在 wiki 中，他们解释了如何实现这一点。

【讨论】：