谷歌OAuth通过gapi.signin2.渲染按钮在react app中没有击中回调

Google OAuth via gapi.signin2.render button not hitting callbacks in react app

本文关键字：app react 回调 按钮 通过 OAuth gapi signin2 谷歌      更新时间：2023-09-26

在最新的Google平台web-client api (https://apis.google.com/js/platform.js)上使用gapi.signin2.render方法在我的react组件内正确渲染Google Signin Button。

但是，对于我的生活，我不能让它正确地调用我的成功或失败回调。

按钮呈现，单击按钮打开帐户验证窗口，单击Google帐户关闭窗口，但没有回调。

function myCallback(obj) {
  console.log(obj);
}
gapi.signin2.render('my-signin2', {
  scope: 'https://www.googleapis.com/auth/plus.login',
  width: 200,
  height: 50,
  longtitle: true,
  theme: 'dark',
  onsuccess: myCallback,
  onfailure: myCallback
});

我不知道我错过了什么。任何帮助都非常感激!

文档告诉你添加这个:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

但是这在React中不起作用。我发现从div中去除data-onsuccess和class (className)是有效的。所以如果你有这样的东西:

  useEffect(() => {
    window.gapi.signin2.render('gs2', {
      'scope': 'https://www.googleapis.com/auth/plus.login',
      'width': 200,
      'height': 50,
      'longtitle': true,
      'theme': 'dark',
      'onsuccess': onGoogleSignIn
    });
  }, []);
  const onGoogleSignIn = user => {
    console.log('user', user);
  }

那么Google按钮的JSX可以简单地写成:

<div id="gs2"></div>

请注意，我删除了class并添加了id，因为gapi.signin2.render正在寻找id。

需要注意的是，现在您失去了样式。不幸的是，将className="g-signin2"添加回div实际上会破坏回调。

当您创建客户端ID时，您将url设置为，让我们说'localhost'。现在你运行你的代码，让我们说'localhost:8080'。你的'myCallback'没有运行，因为没有数据从google api返回，数据被发送到你指定的可信url，这是'localhost'。这个想法很简单，请求可以来自任何地方，但是google api将数据发送到您信任的url作为安全步骤，如果请求来自那里，您就可以得到它，如果不是有人试图使用您的客户端ID进行黑客攻击。

相关文章：