come definire la variabile google quando si utilizza l'API javascript di google one tap

Question

Sto seguendo questa documentazione google one tap sign in per implementare google one tap sign-in nella mia app reattiva.

Ho aggiunto il codice seguente al mio componente JSX e ho iniziato a ricevere il prompt di Google per l'accesso:

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

Il problema che sto affrontando è che la funzione di callback non si attiva. Dopo aver cercato una soluzione mi sono imbattuto in questa domanda SO . Dove l'OP ha posto la domanda simile e ha utilizzato la sintassi dell'API JavaScript per mostrare a Google un tocco invece del codice HTML Per seguire la domanda precedente Ho letto questa documentazione Usa l'API JavaScript One Tap . Ma non riesco a capire che da dove proviene la variabile google?

Codice d'esempio:

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

Se qualcuno potesse dirmi che potrebbe risolvere il mio problema di una funzione di callback che non si attiva. Grazie!

Answer 1

Ho trovato una soluzione con l'aiuto del commento pubblicato da Nilesh Patel e questo pacchetto react-google-one-tap-login .

Controllando il codice sorgente nel pacchetto sopra riesco a scoprire che devo farlo

sostituire:

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