So definieren Sie die Variable Google bei Verwendung der Javascript-API von Google One Tap

Dec 10 2020

Ich folge dieser Dokumentation Google One Tap-Anmeldung , um Google One Tap-Anmeldung in meiner Reaktions-App zu implementieren.

Ich habe meiner JSX-Komponente den folgenden Code hinzugefügt und die Google-Eingabeaufforderung zur Anmeldung gestartet:

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

Das Problem, mit dem ich konfrontiert bin, ist, dass die Rückruffunktion nicht ausgelöst wird. Nachdem ich nach einer Lösung gesucht hatte, stieß ich auf diese SO-Frage . Wo das OP die ähnliche Frage gestellt und die JavaScript-API-Syntax verwendet hat, um Google One Tap anstelle von HTML-Code anzuzeigen. Um der obigen Frage zu folgen, habe ich diese Dokumentation gelesen. Verwenden Sie die One Tap JavaScript-API . Aber ich kann nicht verstehen, woher die Variable Google kommt?

Beispielcode:

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

Wenn mir jemand sagen könnte, dass dies mein Problem lösen könnte, dass eine Rückruffunktion nicht ausgelöst wird. Vielen Dank!

Antworten

1 Alwaysalearner Dec 31 2020 at 20:21

Ich habe eine Lösung mit Hilfe von Kommentiert von Nilesh Patel und diesem Paket gefunden reagieren-google-one-tap-Login .

Wenn ich den Quellcode im obigen Paket überprüfe, finde ich heraus, dass ich muss

ersetzen:

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

mit

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