comment définir la variable google lors de l'utilisation de l'API javascript google one tap

Question

Je suis cette documentation. Connectez-vous en un clic pour mettre en œuvre la connexion en un clic dans mon application React.

J'ai ajouté le code ci-dessous à mon composant JSX et j'ai commencé à avoir une invite google pour me connecter:

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

Le problème auquel je suis confronté est que la fonction de rappel ne se déclenche pas. Après avoir cherché une solution, je suis tombé sur cette question SO . Où l'OP a posé la question similaire et utilisé la syntaxe de l'API javascript pour afficher google one tap au lieu du code HTML Pour suivre la question ci-dessus, j'ai lu cette documentation Utilisez l'API JavaScript One Tap . Mais je n'arrive pas à comprendre d'où vient la variable google?

Exemple de code:

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

Si quelqu'un pouvait me dire que cela pourrait résoudre mon problème de fonction de rappel ne se déclenchant pas. Merci!

Answer 1

J'ai trouvé une solution avec l'aide du commentaire posté par Nilesh Patel et ce package react-google-one-tap-login .

En vérifiant le code source dans le package ci-dessus, je parviens à découvrir que je dois

remplacer:

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

avec

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