cómo definir la variable google cuando se usa google one tap javascript API

Question

Estoy siguiendo esta documentación para iniciar sesión en Google One Tap para implementar el inicio de sesión en Google One Tap en mi aplicación React.

Agregué el siguiente código a mi componente JSX y comencé a tener un mensaje de Google para iniciar sesión:

  const handleCredentialResponse = response => {
    console.log('response', response);
  };

return (
    <Fragment>
      <div
        id="g_id_onload"
        data-auto_select = 'false'
        data-client_id={clientId}
        data-callback={(e) => handleCredentialResponse(e)}>
      </div>
    </Fragment>
  );

El problema al que me enfrento es que la función de devolución de llamada no se activa. Después de buscar una solución, me topé con esta pregunta SO . Donde el OP hizo una pregunta similar y usó la sintaxis de la API de JavaScript para mostrar a Google un toque en lugar del código HTML. Para seguir la pregunta anterior, leí esta documentación. Use la API de JavaScript de One Tap . Pero no puedo entender que ¿de dónde viene la variable google?

Código de muestra:

window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt();
  }

Si alguien pudiera decirme, eso podría resolver mi problema de que una función de devolución de llamada no se activa. ¡Gracias!

Answer 1

Encontré una solución con la ayuda del comentario publicado por Nilesh Patel y este paquete react-google-one-tap-login .

Verificando el código fuente en el paquete anterior, me las arreglo para descubrir que tengo que

reemplazar:

 google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.com',
  });

con

 window.google.accounts.id.initialize({
    client_id: CLIENT_ID,
    callback: data => handleCredentialResponse(data),
    state_cookie_domain: 'https://example.com',
  });