使用谷歌登录按钮与反应 [英] Using google sign in button with react
问题描述
我正在尝试在反应应用程序中使用谷歌登录。
虽然在应用程序外部使用登录按钮本身很有效,但在自定义SignIn组件中使用它时,我无法按预期工作。
当用户登录时,按钮本身应执行 data-onsuccess
方法。
问题是执行永远不会达到那个方法,即使登录有效。
I'm trying to use the google sign in in a react application.
While using the sign in button as is outside the application itself works great, when using it within a custom SignIn component I can't get it to work as expected.
When the user signs in, the button itself should execute a data-onsuccess
method.
The problem is that the execution never reaches that method even though the sign in works.
我可能错过了一些反应但我真的不能找到它。有帮助吗?在下面找到加载所有内容和组件本身的html。
I'm probably missing some react gotcha but I can't really find it. Any help? Find below the html that loads everything and the component itself.
<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" />
);
}
});
请注意,我没有在此处粘贴不相关的代码;)
Notice that I didn't paste here irrelevant code ;)
推荐答案
尝试在 componentDidMount()
中初始化组件时添加onSuccess回调。
Try adding the onSuccess callback when you initialize the component in componentDidMount()
.
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
});
},
...
来源: https://developers.google.com/identity/sign-in/web/build-button , https://github.com/meta-meta/webapp-template/blob/ 6d3e9c86f5c274656ef799263c84a228bfbe1725 / app / Application / signIn.jsx 。
这篇关于使用谷歌登录按钮与反应的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!