在React中实现谷歌登录错误- <div>标记上的属性``data callback`的值无效

Question

我正在尝试在React中实现google登录。这是我的组件-

import { Fragment, useEffect } from "react";
import { GOOGLE_CLIENT_ID } from "./some-file";

const GoogleSignIn = () => { 

  const googleSignInHandler = response => {
    console.log(response);
  }

  const initGsi = () => { 
    if(window.google) { 
        window.google.accounts.id.initialize({
            client_id: GOOGLE_CLIENT_ID,
            callback: googleSignInHandler
        });
    }
  }

  useEffect(() => {
   initGsi();
  }, []);

  return (
    <Fragment>
      <div
        id="g_id_onload"
        data-client_id={GOOGLE_CLIENT_ID}
        data-context="use"
        data-ux_mode="popup"
        data-auto_prompt="false"
      ></div>

      <div
        className={['g_id_signin', 'gsignin'].join(' ')}
        data-type="standard"
        data-shape="rectangular"
        data-theme="filled_blue"
        data-text="continue_with"
        data-callback={googleSignInHandler}
        data-size="large"
        data-logo_alignment="left"
      ></div>
    </Fragment>
  );
};

export default GoogleSignIn;
`

显然，如果我将data-auto_prompt="true"设置为一键，它就可以工作。但是，我不知道如何让它工作的按钮点击。我真的不想使用npm包，而且它们也是基于传统的Google登录。有什么办法吗？

Answer 1

我花了一个晚上的时间来寻找google one tap的变通方法，我的方法对你很有用。主要的问题是：'react是以字符串的形式传递data-***属性‘，这就是我们面临这些问题的原因。

1. 最简单的方法是创建类组件：

在下面的示例中，我创建了全局函数(customCallback)并将其与回调(data-callback=customCallback)绑定，这是谷歌正在等待的。

​

export class OneTapV2 extends React.Component {
  constructor(props) {
    super(props)
    window.customCallback = this.customCallback
  }

  customCallback(e) {
    console.log('ONE TAP version 2 ', e)
  }

  render() {
    return (
      <div
        id='g_id_onload'
        data-client_id='GOOGLE_ID'
        data-callback='customCallback'
      />
    )
  }
}

​

1. 这种情况适用于其他人，他们无法找到使用oneTap OAuth进行管理的正常方法。各位朋友，请看一下https://developers.google.com/identity/gsi/web/guides/use-one-tap-js-api；他们描述了如何用JS

打开oneTap窗口