通过gapi.signin2.render按钮的Google OAuth未在React应用程序中触发回调

我使用以下方法在我的反应组件中正确呈现了 Google 登录按钮gapi.signin2.render最新 Google 平台网络客户端 api 上的方法（https://apis.google.com/js/platform.js https://apis.google.com/js/platform.js).

但是，在我的一生中，我无法让它正确调用我的成功或失败回调。

按钮呈现，单击按钮打开帐户身份验证窗口，单击 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
});

我不知道我在这里缺少什么。任何帮助深表感谢！

The docs https://developers.google.com/identity/sign-in/web/sign-in#add_a_google_sign-in_button告诉你添加这个：

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

但这不适用于 React。我发现删除data-onsuccess and class (className） 来自div成功了。所以如果你有这样的事情：

  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 https://developers.google.com/identity/sign-in/web/reference#gapisignin2renderid_options正在寻找一个id.

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