This is essentially the same question as Using google sign in button with react but the accepted answer does not solve it in my case.
I have a react component:
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"/>
);
}
}
But while the sign-in works successfully, the onSignIn function is never called. In fact none of the options I specify for rendering the custom signin button are present (i.e. the square shape and dark theme), so I guess it's rendering a default button because of the <div>
's class.
I'm currently loading the library synchronously because otherwise gapi
is not in scope when componentDidMount
is triggered.
The other option I see would be google's recommendation of using <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
and wrapping my render in a function. But then either this script has to be loaded inside the component, or else I have to find a way that this function is in scope to be passed as a callback in index.html
, neither of which seem like a good solution.
How can I get the custom login button to be rendered instead of the default one?
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…