通过gapi.signin2.render按钮的Google OAuth不会在React应用中触发回调 [英] Google OAuth via gapi.signin2.render button not hitting callbacks in react app

问题描述

我使用最新的Google平台网络客户端api(

I have the Google Signin Button properly rendering inside my react component using the gapi.signin2.render method on the latest Google platform web-client api (https://apis.google.com/js/platform.js).

但是，在我生命中，我无法正确调用成功或失败回调.

But, for the life of me, I can't get it to properly call my success or failure callbacks.

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

The button renders, clicking the button opens the account auth window, clicking a Google account closes the window, but no callback.

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
});

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

I have no clue what I'm missing here. Any help is much appreciated!

推荐答案

文档告诉您添加此内容:

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

但是，这不适用于React.我发现从div删除data-onsuccess和class(className)可以解决问题.因此，如果您有这样的事情:

But that won't work with React. I found that removing data-onsuccess and class (className) from the div did the trick. So if you have something like this:

  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可以简单地是这样:

then your jsx for the google button can simply be this:

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

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

note that I removed the class and added id because gapi.signin2.render is looking for an id.

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

The caveat is that now you lose the styling. Unfortunately, addingclassName="g-signin2" back to the div actually breaks the callbacks.

这篇关于通过gapi.signin2.render按钮的Google OAuth不会在React应用中触发回调的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！