通过 gapi.signin2.render 按钮的 Google OAuth 未在反应应用程序中点击回调

Posted 2023-02-23

【中文标题】通过 gapi.signin2.render 按钮的 Google OAuth 未在反应应用程序中点击回调

【英文标题】：Google OAuth via gapi.signin2.render button not hitting callbacks in react app

【发布时间】：2017-03-21 16:13:36

【问题描述】：

我使用最新的 Google 平台网络客户端 api (https://apis.google.com/js/platform.js) 上的 gapi.signin2.render 方法在我的 react 组件中正确呈现了 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
);

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

【问题讨论】：

嘿。我对 Angular 有一个非常相似的问题。你有运气吗？

【参考方案1】：

docs 告诉你添加这个：

<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 实际上会中断回调。

【参考方案2】：

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

【讨论】：

localhost 实际上在 Google 文档中用作示例：developers.google.com/identity/sign-in/web/server-side-flow