Google-Authentifizierung Javascript

Question

Ich versuche, eine Implementierung des Google-Login auf unserer Website zu tun. Ich habe die Dokumentation gelesen und eine Anwendung auf der Apis-Konsole eingerichtet.

Ich bevorzuge, dass der Anmeldedialog in einem Popup angezeigt wird und nachdem sich die Benutzer anmelden und die Berechtigungen akzeptieren, dass ich einen Javascript-Rückruf erhalten würde. Dies unterstützt die API auch gemäß der Dokumentation. Also baue ich das unten mit Hilfe der Dokumentation ;-)

Dieser erste Teil lädt das Google Client Skript async und das Init Skript mit der richtigen ClientID und Apikey.

$gp = new googlePlus('@Trustpilot.Web.Social.Google.ClientID', '@Trustpilot.Web.Social.Google.ApiKey'); 
(function() { 
    var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true; 
    po.src = 'https://apis.google.com/js/client.js?onload=googlePlusClientLoad'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s); 
})(); 

Der nächste Teil es der Teil, der das Google-Client-API verwendet. handleClientLoad() wird aufgerufen, wenn die client.js geladen wird. Die Methode überprüft, ob die Verwendung authentifiziert ist. Wenn der Benutzer ist, ist die Idee, dass ich den Benutzer anmelden möchte. Wenn der Benutzer noch nicht authentifiziert ist, wird es eine Schaltfläche geben und wenn Sie auf handleAuthClick() klicken, funktioniert basic genauso wie handleClientLoad(), aber es gibt ein Popup, in dem sich der Benutzer (mit google account) anmelden und Berechtigungen akzeptieren kann . Nach dem Login wird handleAuthResult() aufgerufen, der den Benutzer anmeldet.

function googlePlus(clientId, apiKey) { 
    this.clientId = clientId; 
    this.apiKey = apiKey; 
    this.scopes = 'https://www.googleapis.com/auth/plus.me https://www.googleapis.com/auth/userinfo.email'; 

    /// This method is called when the javascript is loaded async 
    this.handleClientLoad = function() { 
     gapi.client.setApiKey(this.apiKey); 
     window.setTimeout(this.authorize(true), 1); 
    }; 

this.handleAuthResult = function (authResult) { 
    console.log(authResult); 
    if (authResult && !authResult.error) { 
     var token = gapi.auth.getToken(); 
     console.log(token); 
    } 
    else if (authResult && authResult.error) { 
     alert(authResult.error); 
    } 
}; 

this.handleAuthClick = function(event) { 
    this.authorize(false); 
    return false; 
}; 

this.makeApiCall = function() { 
    gapi.client.load('plus', 'v1', function() { 
     var request = gapi.client.plus.people.get({ 
      'userId': 'me' 
     }); 
     request.execute(function (resp) { 
      console.log(resp); 
     }); 
    }); 
}; 

    this.authorize = function (immediate) { 
     gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult()); 
     //gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult()); 
    }; 
} 
var googlePlusClientLoad = function() { 
    $gp.handleClientLoad(); 
}; 

So, jetzt das Problem:

1. Wenn handleClientLoad der Benutzer aufgerufen wird nie authentifiziert wird auch wenn der Benutzer bereits autehnticated hat.
2. Wenn der Benutzer handleAuthClick() verwendet, zeigt das Popup und Login, Berechtigungen und Callback zu handleAuthResult() arbeiten. Aber der Parameter authResult ist immer nichts (sollte etwas zu der Dokumentation passen).
3. Wenn ich mehrere Male versuche, ohne die Seite neu zu laden, kann ich manchmal die makeApiCall() und gapi.auth.getToken() bekommen, um zu arbeiten und die Informationen zu bekommen, die ich brauche.

Answer 1

Es gibt zwei Probleme im Code:

• Der API-Schlüssel nicht erforderlich ist, können Sie ihn entfernen. Sie erhalten das Benutzer-Token über OAuth2 und das ist genug.

• In authorize(), die handleAuthResult Methode wird nicht korrekt aufgerufen, entfernen Sie die Klammer am Ende des Funktionsnamens. Sie möchten die Funktion nicht ausführen, übergeben Sie einfach ihre Referenz. Hier ist, was die authorize Methode aussehen muss:

  gapi.auth.authorize({ client_id: this.clientId, scope: this.scopes, immediate: immediate }, this.handleAuthResult);

Beachten Sie den Unterschied in Klammern.