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

Question

您好，我正在使用以下代码使用 AAD b2C 登录，它正在重定向到登录页面，并且如果用户 ID 和 apsswords 正确，它会重定向回 localhost:4200 而不会获取登录详细信息，当我检查控制台的日志时，它显示错误 Refused to display in a iframe because it set 'X-Frame-Options' to 'deny' 这是由于 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);
                    });
            });
    }
}

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

Answer 2

我在使用 angular 5 的应用程序中遇到了同样的问题，这是 MSAL 的一个问题，因为它在底层使用了 Iframes。

MSAL.js uses hidden iframes to acquire and renew tokens silently in the background. Azure AD returns the token back to the registered redirect_uri specified in the token request(by default this is the app's root page). Since the response is a 302, it results in the HTML corresponding to the redirect_uri getting loaded in the iframe. Usually the app's redirect_uri is the root page and this causes it to reload.

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

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

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

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

MSAL with Angular2 : Refused to display in a frame because it set 'X-Frame-Options' to 'deny'

azure

typescript

adal

msal

angular