Question

我正在升级/重写现有的角度应用以使用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,width=400,height=500';
       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流程结束时加载

<html>
  <head>
    <title>OAuth callback</title>
    <script>
      var POST_ORIGIN_URI = 'localhost:8000';
      var message = {"status": "200", "jwt":"2"};
      window.opener.postMessage(message, POST_ORIGIN_URI);
      window.close();
    </script>
  </head>
</html>

像这样使用window.addEventListener似乎完全打破了角度2应用，解除引用this。

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

**完成angular2 noob所以任何帮助表示赞赏

Answer 1

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

它使用OAh2的Auth服务隐式授权，后者又使用Window服务创建弹出窗口。然后，它会监视URL上访问令牌的窗口。

您可以访问demo OAuth2 Angular code (with Webpack) here。

以下是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);
}

如果您有任何问题或问题，请随时询问应用程序的启动和运行。

Answer 2

所以通过一些调查发现了问题。我正在引用this。这个github wiki帮助我理解了它。

为了解决这个问题，我需要做一些事情。首先，我创建了一个封装了添加eventListener

的服务

import {BrowserDomAdapter} from 'angular2/platform/browser';

export class PostMessageService {
   dom = new BrowserDomAdapter();
   addPostMessageListener(fn: EventListener): void {
     this.dom.getGlobalEventTarget('window').addEventListener('message', fn,false)
   }
}

然后使用此addPostMessageListener我可以在我的其他服务中附加一个函数来触发

constructor(public _postMessageService: PostMessageService,
    public _router: Router) {
    // Set up a Post Message Listener
    this._postMessageService.addPostMessageListener((event) => 
          this.onPostMessage(event)); // This is the important as it means I keep the reference to this

}

然后它按照我期望的方式保持对此

的引用

Answer 3

我认为这是Angular2方式：

（Dart代码，但TS应该非常相似）

@Injectable()
class SomeService {
  DomAdapter dom;
  SomeService(this.dom) {
    dom.getGlobalEventTarget('window').addEventListener("message", fn, false);
  }
}

Answer 4

我多年来一直在摆弄它，但最后，对我来说最强大的方法是将用户重定向到誓言页面

window.location.href = '/auth/logintwitter';

在后端做誓舞（我使用快递），然后重定向回接收前端页......

res.redirect(`/#/account/twitterReturn?userName=${userName}&token=${token}`);

我的解决方案有一些特殊性，例如无论登录类型如何，我都希望在客户端上只使用JsonWebToken，但如果您有兴趣，整个解决方案就在这里。

https://github.com/JavascriptMick/learntree.org

带有Angular 2的Oauth 2弹出窗口

4 个答案: