问题描述
这与将google登录按钮与react ,但就我而言,可接受的答案无法解决.
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.
我有一个反应成分:
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"/>
);
}
}
但是,即使登录成功完成,也不会调用onSignIn函数.实际上,我为渲染自定义登录按钮指定的所有选项均不存在(即正方形和深色主题),所以我猜由于<div>
的类,它正在渲染默认按钮.
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.
我当前正在同步加载库,因为否则触发componentDidMount
时gapi
不在范围内.
I'm currently loading the library synchronously because otherwise gapi
is not in scope when componentDidMount
is triggered.
我看到的另一个选项是Google建议使用<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
并将我的渲染包装在函数中.但是,要么要么必须将此脚本加载到组件内部,要么我必须找到一种方法,使该函数在范围内作为index.html
中的回调传递,这两种方法都不是很好的解决方案.
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?
推荐答案
此hack现在可以解决问题了...
This hack does the trick for now...
在我的index.html
中,当库加载时触发一个自定义事件:
In my index.html
I trigger a custom event when the library loads:
<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
<script type="text/javascript">
function triggerGoogleLoaded() {
window.dispatchEvent(new Event('google-loaded'));
}
</script>
和我的react组件现在看起来像这样:
and my react component now looks like this :
var LoginButton = React.createClass({
onSignIn: function(googleUser) {
console.log("user signed in"); // plus any other logic here
},
renderGoogleLoginButton: function() {
console.log('rendering google signin button')
gapi.signin2.render('my-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'light',
'onsuccess': this.onSignIn
})
},
componentDidMount: function() {
window.addEventListener('google-loaded',this.renderGoogleLoginButton);
},
render: function() {
let displayText = "Sign in with Google";
return (
<div id="my-signin2"></div>
);
}
});
请注意,渲染的<div>
具有"my-signin2"作为id
而不是class
.
note that the rendered <div>
has "my-signin2" as an id
not a class
.
这篇关于在React 2中使用Google登录按钮的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!