2015-07-24 17 views
19

Ich versuche, das Google-Zeichen in einer Anwendung zu verwenden. Bei der Verwendung der Anmelde-Schaltfläche, wie es außerhalb der Anwendung selbst funktioniert, wenn Sie es in einer benutzerdefinierten SignIn-Komponente verwenden, kann ich es nicht wie erwartet funktionieren. Wenn sich der Benutzer anmeldet, sollte der Button selbst eine data-onsuccess Methode ausführen. Das Problem ist, dass die Ausführung diese Methode nie erreicht, obwohl die Anmeldung funktioniert.Mit Google anmelden Schaltfläche mit reagieren

Ich vermisse wahrscheinlich einige reagieren Gotcha, aber ich kann es nicht wirklich finden. Irgendeine Hilfe? Finden Sie unter dem HTML, das alles und die Komponente selbst lädt.

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

Beachten Sie, dass ich nicht hier irrelevant Code und füge ihn haben;)

+0

Dieses Video erklärt Google, Facebook und im Login mit reactjs -https verbunden: //youtu.be/9MhLHkf7Ifs – Prem

Antwort

18

Versuchen Sie, die onSuccess Rückruf hinzugefügt, wenn Sie die Komponente in componentDidMount() initialisieren.

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 
 
    }); 
 
}, 
 
...

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

+0

, die eigentlich ganz gut funktioniert! :) Ich denke, reactive fügt nicht wirklich das richtige Datenattribut hinzu. Vielen Dank Brad! – ThisIsErico

+0

Wunderbar! froh, dass es geholfen hat. –

+0

Vielen Dank für die Verknüpfung zu einem Commit nicht zu/Master oder/entwickeln wie die meisten Menschen tun. Du bist ein Heiliger, @BradBumbalough !!!! –

0

ich nicht so Posting als Antwort kommentieren ...

ich genau die gleiche Sache bin Umsetzung und das gleiche Problem zu sehen. Ich habe auch ein Zeichen aus 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.'); 
    }); 
}, 

Die signout Funktionalität funktioniert, aber die Umsetzung Brads Lösung, die ich erhalten:

Uncaught ReferenceError: gapi is not defined 

darauf hindeutet, dass die Google-lib noch nicht an diesem Punkt geladen ist. Ist das möglich, oder fehlt mir etwas über den Umfang von Gapi?

--- EDIT: Jetzt eine eigenständige Frage: Using google sign in button with react 2

+0

Nicht sicher, warum ... Es funktioniert gut für mich. Stellen Sie sicher, dass der Fehler an diesem Punkt ausgelöst wird. Wird die Meldung "Benutzer abmelden" angezeigt? Um sicherzugehen, versuchen Sie, ein Timeout von 300 hinzuzufügen, bevor Sie die 'AuthInstance' erhalten. – ThisIsErico

+0

Haben Sie Async und verschieben Sie das Skript? Vielleicht lohnt sich ein Blick auf http://stackoverflow.com/questions/31144874/gapi-is-not-defined-google-sign-in-issue-with-gapi-auth2-init – Terry

Verwandte Themen