Question

import {Component,Directive,OnInit,NgZone} from 'angular2/core';
declare const gapi:any;
declare const $:any;
@Component({
  selector: 'mysite',
  templateUrl:'./app/template.html'
})
export class Test{ 
    userAuthToken;
    userDisplayName;
    constructor(private zone: NgZone){   
        gapi.load('auth2',this.initnow);

        this.zone.run(() => {
                 console.log(this);
                $.proxy(this.onGoogleLoginSuccess, this);
        });
    }

    initnow(){
        gapi.auth2.init({client_id:'9511021809-qqke9m46imnmrged8u7u66ilj168bi9t.apps.googleusercontent.com'});
    }

     ngAfterViewInit() {
        gapi.signin2.render(
          this.googleLoginButtonId,{
            "onSuccess": this.onGoogleLoginSuccess,
            "scope": "profile",
            "theme": "dark"
        });
    }

    public onGoogleLoginSuccess(loggedInUser) {
        this.userAuthToken = loggedInUser.getAuthResponse().id_token;
        this.userDisplayName = loggedInUser.getBasicProfile().getName();
        console.log("onGoogleLoginSuccess called: ",this.userAuthToken,this.userDisplayName);
  }
}

template.html

<div id="{{googleLoginButtonId}}"></div>

onGoogleLoginSuccess 功能未被调用。任何人都可以建议，这段代码中缺少什么？

我正在尝试将google登录与我的网站集成。但谷歌登录页面消失后没有任何调用。谢谢苏雷什

Answer 1

您忘记在googleLoginButtonId中设置了ID。只需设置它，按钮就可以正常工作。

export class Test{ 
    userAuthToken;
    userDisplayName;
    googleLoginButtonId = 'google_login_button_id';
    ...
}

但是，如果这是你的问题，按钮就不应该出现！所以，如果您确实设置了googleLoginButtonId但忘记在问题中添加它。问题可能出在这一行

$.proxy(this.onGoogleLoginSuccess, this);

我不是jQuery人，但我查了proxy，并在说明中说：

描述：取一个函数并返回一个始终具有特定上下文的新函数。

因此，您需要保存新返回的函数并将其传递给onSuccess回调：

proxyedSignInSuccess;
constructor(private zone: NgZone){
    this.zone.run(() => {
        this.proxyedSignInSuccess = $.proxy(this.onGoogleLoginSuccess, this);
    });
}
...

ngAfterViewInit() {
    gapi.signin2.render(
      this.googleLoginButtonId,{
        "onSuccess": this.proxyedSignInSuccess,
        "scope": "profile",
        "theme": "dark"
    });
}

或者，只是为了确保。也许试试吧：

ngAfterViewInit() {
    gapi.signin2.render(
      this.googleLoginButtonId,{
        "onSuccess": (user) => this.zone.run(() => this.onGoogleLoginSuccess(user)),
        "scope": "profile",
        "theme": "dark"
    });
}

成功的谷歌登录后，角度2不会触发回调功能

1 个答案: