Question

这与Using google sign in button with react基本上是同一个问题，但在我的情况下，接受的答案并没有解决。

我有一个反应组件：

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>的类而呈现默认按钮。

我目前正在同步加载库，因为当gapi被触发时，componentDidMount不在范围内。

我看到的另一个选项是谷歌建议使用<script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>并将我的渲染包装在一个函数中。但是这个脚本必须加载到组件内部，否则我必须找到一种方法，这个函数在index.html中作为回调传递范围，这两个看起来都不是一个好的解决方案。 / p>

如何才能呈现自定义登录按钮而不是默认按钮？

Answer 1

这个黑客现在可以解决这个问题......

在我的index.html中，我在库加载时触发自定义事件：

<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>

我的反应组件现在看起来像这样：

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。

Answer 2

我使用了JQuery，通过componentDidMount方法加载脚本......

componentDidMount: function() {
    $.getScript('https://apis.google.com/js/platform.js')
        .done(() => {
            // execute any gapi calls here...
            gapi.signin2.render('g-signin2', {
                // ... options here ...
            });
        });
},

正如f13ts所说，渲染的<div>应该将“my-signin2”作为id，而不是类。

使用谷歌登录按钮与反应2

2 个答案: