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

Question

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

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

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

我不知道我在这里错过了什么。非常感谢任何帮助!

Answer 1

docs告诉你添加这个:

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

但这不适用于 React。我发现删除 data-onsuccess和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 正在寻找 id .

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