使用谷歌登录按钮与反应 [英] Using google sign in button with react

查看:396
本文介绍了使用谷歌登录按钮与反应的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试在反应应用程序中使用谷歌登录。
虽然在应用程序外部使用登录按钮本身很有效,但在自定义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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆