如何使用adal.js在另一个SPA（在同一AAD租户中）的iframe中对SPA进行身份验证

我有一个用Angular JS编写的HTML应用程序，我希望允许其他受信任的内部开发人员通过在Angular中创建自己的应用程序来扩展应用程序，这些应用程序托管在不同的端点上。这些扩展希望通过使用

这些应用程序都存在于同一AAD租户中，作为不同的应用程序注册

我们已尝试设置iframe src=”http://localhost:4200“，内部应用程序使用adal.js对AD进行身份验证。直接在浏览器中托管时，此内部应用程序工作正常，但嵌入iframe时会导致：

拒绝在帧中显示“”，因为它将“X-frame-Options”设置为“deny”

我们试图做的是明智的，还是这种方法被视为安全风险

我看到其他人也通过导航到子页面来解决这个问题，但随后您就失去了shell

以下是AngularJS方面的代码：

var iframe = document.querySelector("#myiframe");
iframe.src = ENV.iframeURL + "/?data=" + $routeParams.data;

而且，角度侧的代码更复杂：

自述文件 我已经从Angular应用程序中复制了readme.md文件，因此您可以了解我们在Angular方面所做的工作。Angular应用程序在网页的根目录下运行良好

申请详情 主应用程序中注入了authService，onInit调用applicationInit（）

```

Auth服务是您将在自己的项目中使用的主要部分。 指 有关此工作流的详细信息，请参见

/// <reference path="../../../node_modules/@types/adal/index.d.ts" />

import { Injectable } from '@angular/core';
import { environment } from '../../environments/environment';
import 'expose-loader?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';


@Injectable()
export class AuthService {
  private context: adal.AuthenticationContext = null;

  constructor() {
    let adalSettings = environment.adalSettings;
    let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
    this.context = new createAuthContextFn(adalSettings);
  }

当前用户使用服务的getUser方法：这将向用户返回一个承诺

getUser(): Promise<adal.User> {

    var result = new Promise<adal.User>(
      (resolve, reject) => {
        this.context.getUser((err, user) => {
          if (err)
            resolve(null);
          else
            resolve(user);
        });

      });
    return result;


  }

你有什么建议？是否有我们应该遵循的最佳实践

提前感谢

根据本页，身份管理登录似乎是经过设计而无法在iframe中运行的，从安全角度来看，iframe是有意义的。我将致力于让父窗口和子窗口通过PostMessage相互对话

export const environment = {
  production: false,
  adalSettings: {
    tenant: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    clientId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx',
    redirectUri: 'http://localhost:4200/home',
    postLogoutRedirectUri:'http://localhost:4200',
    expireOffsetSeconds: 300
  }
};

getUser(): Promise<adal.User> {

    var result = new Promise<adal.User>(
      (resolve, reject) => {
        this.context.getUser((err, user) => {
          if (err)
            resolve(null);
          else
            resolve(user);
        });

      });
    return result;


  }

const routes: Routes = [

    {
        path: 'login',
        component: LoginRedirectComponent
    },

    {
        path: 'home',
        component: HomeComponent,
        canActivate: [AuthGuard]
    },
    {
        path: '',
        pathMatch: 'full',
        redirectTo: 'home'
    }

];

//TODO add other client routes - e.g. the data which is being posted in