reactjs - 在 React 错误中实现 Google 登录 - 标签上的 prop `data-callback` 的值无效

Question

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

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

我花了一晚上的时间为谷歌一键寻找解决方法，我的方法对你有用。主要问题:'react 正在通过 data-***作为字符串的属性，这就是我们面临这些问题的原因。

最简单的方法是创建类组件:

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

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'
      />
    )
  }
}

这种情况适用于无法找到如何使用 oneTap OAuth 进行管理的正常方法的其他人。伙计们请看一下 https://developers.google.com/identity/gsi/web/guides/use-one-tap-js-api ;他们描述了如何通过 JS 打开 oneTap 窗口