Angular2谷歌签署

时间:2017-03-09 09:58:57

标签: angular typescript google-api gapi angular2-modules

您好我正在尝试使用类型脚本的Angular2通过their guide

向Google添加登录/注销

在Index.html中

 <script src="https://apis.google.com/js/platform.js"></script>

在LoginComponent.ts中

declare const gapi: any;

ngAfterViewInit() {
  gapi.signin2.render(
  this.googleLoginButtonId,
  {"onSuccess": this.onGoogleLoginSuccess,"scope": "profile",
    "theme": "dark"},function (error) {
   console.log(JSON.stringify(error, undefined, 2));
  });

}

      onGoogleLoginSuccess = (loggedInUser) => {
var profile = loggedInUser.getBasicProfile();
       this.auth.LoginSuccess(loggedInUser);
      }

这对我来说很好,但是当loginSuccess我希望在那个时候将视图路由到个人资料页面时我面临的错误如下:

Uncaught TypeError: Cannot read property 'style' of null
    at G_ (cb=gapi.loaded_0:282)
    at H_.<anonymous> (cb=gapi.loaded_0:285)
    at Function.<anonymous> (cb=gapi.loaded_0:155)
    at MessagePort.c.port1.onmessage (cb=gapi.loaded_0:73)

此外,我希望整个登录过程作为服务或模块重用。如何创建整个Google登录操作作为模块或服务

你能给我一个代码片段或工作演示,或者建议我使用任何angular2模块来实现这个目标。

我也尝试过angular2SocialLogin模块,但是当我在git issue

中提到错误时我也会出现错误

请帮帮我。谢谢你。

1 个答案:

答案 0 :(得分:2)

登录成功后,可以通过隐藏登录按钮来修复错误。

 <div id="g-signin2" style="display: none;"></div>

参考this answer

我也跟着这个plunkr example并且和我一起工作