Question

您好我使用下面的代码登录使用AAD b2C，它正在重定向到登录页面并且工作就像用户ID和apsswords是正确的那样它重定向回localhost：4200而没有获取登录详细信息，当我检查控制台的日志，它显示错误拒绝显示在iframe中，因为它将'X-Frame-Options'设置为'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的问题，因为它在引擎盖下使用了iframe。

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

他们还解释了解决方法：Solution

为iframe指定其他html。
您的主应用程序文件中的条件初始化。

他们在Wiki中解释了如何实现这一目标。

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

2 个答案: