Autenticazione Google javascript

Question

Sto provando a eseguire un'implementazione del login google sul nostro sito web. Ho letto la documentazione e ho installato un'applicazione nella console di apis.

Preferisco che il dialogo di registrazione sia mostrato in un popup e dopo che gli utenti hanno effettuato l'accesso e accettato le autorizzazioni otterrei un callback javascript. Questo api supporta anche secondo la documentazione. Così creo il seguito con l'aiuto della documentazione ;-)

Questa prima parte è caricare lo script del client di google async e lo script di init con il clientid e l'API corretti.

$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); 
})(); 

La parte successiva è la parte che utilizza il client API di Google. handleClientLoad() viene chiamato quando viene caricato il client.js. Il metodo controlla se l'uso è autenticato. Se l'utente è, l'idea è che voglio accedere all'utente. Se l'utente non è già autenticato, ci sarà un pulsante e quando si fa clic su handleAuthClick() viene chiamato, fa di base lo stesso di handleClientLoad() ma ci sarà un popup dove l'utente effettua il login (con account google) e accetta i permessi . Dopo il login, viene chiamato handleAuthResult() che accede all'utente.

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

Così ora al problema:

1. Quando handleClientLoad viene chiamato l'utente non viene mai autenticato anche se l'utente ha già autehnticated.
2. Se l'utente utilizza handleAuthClick() il popup mostra e login, permessi e il callback per gestireAuthResult() funziona. Ma il parametro authResult è sempre nulla (dovrebbe essere qualcosa che si avvicina alla documentazione).
3. Se provo più volte senza ricaricare la pagina, a volte posso fare in modo che makeApiCall() e gapi.auth.getToken() funzionino e ottengano le informazioni di cui ho bisogno.

Answer 1

Ci sono due questioni nel codice:

• La chiave API non è necessario, è possibile rimuoverlo. Ottieni il token utente tramite OAuth2 e questo è sufficiente.

• Nel authorize(), il metodo handleAuthResult non è stato chiamato correttamente, rimuovere la parentesi alla fine del nome della funzione. Non vuoi eseguire la funzione, basta passare il suo riferimento. Ecco ciò che il metodo authorize deve apparire come:

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

nota la differenza tra parentesi.