我正在尝试在反应应用程序中使用谷歌登录.虽然在应用程序外部使用登录按钮本身很有效,但在自定义SignIn组件中使用它时,我无法按预期工作.当用户登录时,按钮本身应该执行一个data-onsuccess方法.问题是即使登录工作,执行也永远不会到达该方法.
我可能错过了一些反应但我无法找到它.有帮助吗？在下面找到加载所有内容和组件本身的html.
<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" />
);
}
});
请注意,我没有在这里粘贴不相关的代码;)
我正在尝试使用React 集成Google Sign In(链接).
我发现了一个问题,在过去使用google登录按钮和react 2解决了这个问题
我复制了与上述相同的步骤.在我的index.html手中
<script src="https://apis.google.com/js/platform.js?onload=triggerGoogleLoaded" async defer></script>
<script type="text/javascript">
function triggerGoogleLoaded() {
console.log("google event loaded");
window.dispatchEvent(new Event('google-loaded'));
}
</script>
然后我Component看起来像
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() { …