Dies ist im Wesentlichen die gleiche Frage wie Using google sign in button with react, aber die angenommene Antwort löst es nicht in meinem Fall.Mit Google Anmelden Schaltfläche mit reagieren 2
Ich habe eine Komponente reagieren:
var LoginButton = React.createClass({
onSignIn: function(googleUser) {
console.error(" user signed in");
},
componentDidMount: function() {
console.log('component has mounted');
gapi.signin2.render('g-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 200,
'longtitle': true,
'theme': 'dark',
'onsuccess': this.onSignIn
})
},
render: function() {
return (
<div className="g-signin2"/>
);
}
}
Aber während die Anmelde-erfolgreich arbeitet, wird die onSignIn Funktion nie aufgerufen. Tatsächlich gibt es keine der Optionen, die ich für das Rendern der benutzerdefinierten Signin-Schaltfläche angegeben habe (d. H. Die quadratische Form und das dunkle Thema). Daher rate ich aufgrund der <div>
-Klasse eine Standardschaltfläche.
Ich lade gerade die Bibliothek synchron, weil sonst gapi
nicht im Bereich ist, wenn componentDidMount
ausgelöst wird.
Die andere Option, die ich sehe, wäre Googles Empfehlung, <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
zu verwenden und mein Rendering in eine Funktion zu verpacken. Aber dann muss entweder dieses Skript in die Komponente geladen werden, oder ich muss einen Weg finden, dass diese Funktion als Callback in index.html
übergeben wird, von denen keine wie eine gute Lösung scheint.
Wie kann ich die benutzerdefinierte Login-Schaltfläche anstelle der Standardanmeldung gerendert werden?
Dieses Video erklärt Google, Facebook und verlinkt im Login mit reactjs https://youtu.be/9MhLHkf7Ifs. Es könnte jemandem helfen :-) – Prem