使用带有反应 2 的谷歌登录按钮

Posted 2023-02-23

【中文标题】使用带有反应 2 的谷歌登录按钮

【英文标题】：Using google sign in button with react 2

【发布时间】：2015-10-16 21:06:41

【问题描述】：

这与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> 的类。

我目前正在同步加载库，否则当componentDidMount 被触发时，gapi 不在作用域内。

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

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

【问题讨论】：

这个视频解释了谷歌、facebook 和链接登录与 reactjs youtu.be/9MhLHkf7Ifs。它可能会帮助某人:-)

【参考方案1】：

这个 hack 现在可以解决问题了...

在我的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。

【讨论】：

这在您需要直接进入由 React 呈现的页面时很有用。谢谢。

我完全按照您提到的方式进行了尝试，但出现'gapi' is not defined 错误。我的代码可以在github.com/hhimanshu/google-login-with-react 获得，你能帮我理解我在哪里犯了错误吗？

【参考方案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，而不是类。