Utilizzo del pulsante di accesso di Google con risposta

Sto tentando di utilizzare l'accesso di Google in un'applicazione di risposta. Anche se l'utilizzo del pulsante di accesso è esterno all'applicazione stessa, funziona perfettamente, quando lo si utilizza all'interno di un componente SignIn personalizzato, non riesco a farlo funzionare come previsto. Quando l'utente effettua l'accesso, il pulsante stesso deve eseguire un metodo data-onsuccess. Il problema è che l'esecuzione non raggiunge mai quel metodo anche se l'accesso funziona.Utilizzo del pulsante di accesso di Google con risposta

Probabilmente mi manca qualche reazione, ma non riesco davvero a trovarlo. Qualsiasi aiuto? Trova sotto l'html che carica tutto e il componente stesso.

<head> 
    <meta name="google-signin-scope" content="profile email"> 
    <meta name="google-signin-client_id" content="1234-real-client-id.apps.googleusercontent.com"> 
    <script src="https://apis.google.com/js/platform.js" async defer></script> 
</head> 
<body> 
    <!-- Here is where everything gets displayed --> 
    <div id="app"></div> 

    <!-- The file with the js code --> 
    <script src="/js/main.js"></script> 
</body> 


var SignIn = React.createClass({ 
    onSignIn : function (google_user) { 
     // I want this method to be executed 
    }, 

    render : function() { 
     return (
      <div className="g-signin2" data-onsuccess={this.onSignIn} data-theme="dark" /> 
     ); 
    } 
});

Si noti che non ho incollo qui codice irrilevante;)

fonte

2015-07-24 ThisIsErico

Questo video spiega Google, Facebook e collegato in Login reactjs -https: //youtu.be/9MhLHkf7Ifs – Prem

Prova ad aggiungere la richiamata onSuccess quando si inizializza il componente in componentDidMount().

componentDidMount: function() { 
 
    gapi.signin2.render('g-signin2', { 
 
    'scope': 'https://www.googleapis.com/auth/plus.login', 
 
    'width': 200, 
 
    'height': 50, 
 
    'longtitle': true, 
 
    'theme': 'dark', 
 
    'onsuccess': this. onSignIn 
 
    }); 
 
}, 
 
...

Fonti: https://developers.google.com/identity/sign-in/web/build-button, https://github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx.

fonte

2015-07-24 14:08:10

Che in realtà funziona bene! :) Immagino che reagire non stia davvero aggiungendo l'attributo dati corretto. Grazie mille Brad! – ThisIsErico

Meraviglioso! lieto che abbia aiutato. –

Grazie mille per il collegamento a un commit non a/master o/sviluppare come fanno la maggior parte delle persone. Sei un santo, @BradBumbalough !!!! –

non posso commentare in modo distacco come una risposta ...

sto implementando la stessa cosa e di vedere lo stesso problema. Ho anche aggiunto un cartello fuori link:

<a href="#" onClick={this.signOut}>Sign out</a> 

signOut: function() { 
    console.log("user signing out") 
    var auth2 = gapi.auth2.getAuthInstance(); 
    auth2.signOut().then(function() { 
    console.log('User signed out.'); 
    }); 
},

Il SignOut opere di funzionalità, ma la soluzione attuazione di Brad ottengo:

Uncaught ReferenceError: gapi is not defined

suggerendo che la lib Google non ha ancora caricato in quel punto. È possibile o mi manca qualcosa riguardo alla portata di gapi?

--- EDIT: Ora una domanda standalone: Using google sign in button with react 2

fonte

2015-07-25 17:45:28 amn41

Non so perché ... Funziona bene per me. Assicurati che l'errore venga generato in quel punto. Viene visualizzato il messaggio "Esaurire utente"? Per sicurezza, prova ad aggiungere un timeout di 300 prima di ottenere 'AuthInstance'. – ThisIsErico

Hai async e rinvia per lo script? Forse vale la pena dare un'occhiata a http://stackoverflow.com/questions/31144874/gapi-is-not-defined-google-sign-in-issue-with-gapi-auth2-init – Terry

Utilizzo del pulsante di accesso di Google con risposta

risposta

Problemi correlati