Javascript 使用带有反应的谷歌登录按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31610461/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using google sign in button with react
提问by ThisIsErico
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-onsuccessmethod.
The problem is that the execution never reaches that method even though the sign in works.
我正在尝试在反应应用程序中使用谷歌登录。虽然在应用程序本身之外使用登录按钮效果很好，但在自定义登录组件中使用它时，我无法让它按预期工作。当用户登录时，按钮本身应该执行一个data-onsuccess方法。问题是即使登录有效，执行也永远不会到达该方法。
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.
我可能错过了一些反应问题，但我真的找不到。有什么帮助吗？在加载所有内容和组件本身的 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" />
);
}
});
Notice that I didn't paste here irrelevant code ;)
请注意，我没有在此处粘贴不相关的代码；)
采纳答案by Brad Bumbalough
Try adding the onSuccess callback when you initialize the component in componentDidMount().
初始化组件时，尝试添加 onSuccess 回调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
});
},
...Sources: https://developers.google.com/identity/sign-in/web/build-button, https://github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn.jsx.
来源：https: //developers.google.com/identity/sign-in/web/build-button，https: //github.com/meta-meta/webapp-template/blob/6d3e9c86f5c274656ef799263c84a228bfbe1725/app/Application/signIn。 .jsx。
回答by Max Carroll
I needed to use this in a functional component so thought I would share how I adapted it, I needed to use the useEffectHook which can be used in place of componentDidMount
我需要在一个功能组件中使用它，所以我想我会分享我是如何调整它的，我需要使用可以代替 componentDidMount 的 useEffectHook
useEffect(() => {
window.gapi.signin2.render('g-signin2', {
'scope': 'https://www.googleapis.com/auth/plus.login',
'width': 200,
'height': 50,
'longtitle': true,
'theme': 'dark',
'onsuccess': onSignIn
})
})
回答by AV Paul
Now you can use this React Google LoginNPM package that encapsulates all the setup work. You can just pass options to the component only.
现在您可以使用这个封装了所有设置工作的React Google LoginNPM 包。您只能将选项传递给组件。
import React from 'react';
import ReactDOM from 'react-dom';
import GoogleLogin from 'react-google-login';
// or
import { GoogleLogin } from 'react-google-login';
const responseGoogle = (response) => {
console.log(response);
}
ReactDOM.render(
<GoogleLogin
clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
buttonText="Login"
onSuccess={responseGoogle}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
/>,
document.getElementById('googleButton')
);The code is from the package's documentation.
代码来自包的文档。
