Winkel 2 löst keine Callback-Funktion nach erfolgreich Google Login

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 Funktion nicht aufgerufen zu werden. Kann jemand vorschlagen, was in diesem Code fehlt?

Ich versuche, Google Login mit meiner Website zu integrieren. aber nichts nach google Login-Seite aufgerufen werden verschwinden. danke Suresh

Answer 1

Sie haben vergessen, eine ID in googleLoginButtonId zu setzen. Richte es einfach ein und der Button sollte funktionieren.

Aber, wenn das Ihr Problem war, sollte die Schaltfläche gar nicht erscheinen !! Also, wenn Sie googleLoginButtonId gesetzt haben, aber vergessen, es in Ihrer Frage hinzuzufügen. Das Problem könnte in dieser Linie

$.proxy(this.onGoogleLoginSuccess, this); 

Ich bin kein jQuery Kerl, aber ich sah proxy und es sagt in der Beschreibung:

Beschreibung: nimmt eine Funktion und gibt einen neuen eine, die immer einen bestimmten Kontext haben wird.

So müssen Sie die neue Funktion zurück speichern und an den onSuccess Rückruf übergeben:

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" 
    }); 
} 

Oder nur um sicher zu machen. Vielleicht versuchen Sie stattdessen:

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