带有Angular 2的Oauth 2弹出窗口

我正在升级/重写现有的角度应用程序以使用angular2.我的问题是我想在新的弹出窗口中打开OAuth流,一旦OAuth流程完成,使用window.postMessage与OAuth流成功的angular 2应用程序进行通信.

目前我所拥有的角度2服务是

export class ApiService { 
    constructor(private _loggedInService: LoggedInService) {
        window.addEventListener('message', this.onPostMessage, false);
     }

    startOAuthFlow() {
       var options = 'left=100,top=10,;
       window.open('http://site/connect-auth', , options);
    }

    onPostMessage(event) {
      if(event.data.status === "200") {
          // Use an EventEmitter to notify the other components that user logged in
          this._loggedInService.Stream.emit(null);
      }
    }

}

此模板在OAuth流程末尾加载

使用window.addEventListener这样似乎完全打破角度2应用程序,解除引用this.

所以我的问题是我可以使用window.addEventListener或者我不应该使用postMessage与angular2应用程序进行通信吗？

**完整的angular2菜鸟所以任何帮助表示赞赏

我在Github上有一个完整的Angular2 OAuth2骨架应用程序，您可以参考。

它为OAuth2隐式授权使用Auth服务，而后者又使用Window服务来创建弹出窗口。然后，它将监视该窗口中URL上的访问令牌。

您可以在此处访问演示OAuth2 Angular演示代码（使用Webpack）。

这是来自Auth服务的登录例程，它将使您无需查看整个项目就可以了解发生了什么。我在那里为您添加了一些额外的评论。

public doLogin() {
    var loopCount = this.loopCount;
    this.windowHandle = this.windows.createWindow(this.oAuthTokenUrl, 'OAuth2 Login');

    this.intervalId = setInterval(() => {
        if (loopCount-- < 0) { // if we get below 0, it's a timeout and we close the window
            clearInterval(this.intervalId);
            this.emitAuthStatus(false);
            this.windowHandle.close();
        } else { // otherwise we check the URL of the window
            var href:string;
            try {
                href = this.windowHandle.location.href;
            } catch (e) {
                //console.log('Error:', e);
            }
            if (href != null) { // if the URL is not null
                var re = /access_token=(.*)/;
                var found = href.match(re);
                if (found) { // and if the URL has an access token then process the URL for access token and expiration time
                    console.log("Callback URL:", href);
                    clearInterval(this.intervalId);
                    var parsed = this.parse(href.substr(this.oAuthCallbackUrl.length + 1));
                    var expiresSeconds = Number(parsed.expires_in) || 1800;

                    this.token = parsed.access_token;
                    if (this.token) {
                        this.authenticated = true;
                    }

                    this.startExpiresTimer(expiresSeconds);
                    this.expires = new Date();
                    this.expires = this.expires.setSeconds(this.expires.getSeconds() + expiresSeconds);

                    this.windowHandle.close();
                    this.emitAuthStatus(true);
                    this.fetchUserInfo();
                }
            }
        }
    }, this.intervalLength);
}

随时询问您是否有任何疑问或问题来启动和运行该应用程序。