jak zdefiniować zmienną google podczas korzystania z google one tap javascript API

Dec 10 2020

Postępuję zgodnie z tą dokumentacją Google, zaloguj się jednym dotknięciem, aby zaimplementować logowanie google jednym dotknięciem w mojej aplikacji React.

Dodałem poniższy kod do mojego komponentu JSX i zacząłem otrzymywać od Google monit o zalogowanie się:

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

Problem polega na tym, że funkcja wywołania zwrotnego nie jest wyzwalana. Szukając rozwiązania, natknąłem się na to pytanie SO . Tam, gdzie OP zadał podobne pytanie i użył składni javascript API, aby wyświetlić Google One Tap zamiast kodu HTML. Aby odpowiedzieć na powyższe pytanie, przeczytałem tę dokumentację. Użyj One Tap JavaScript API . Ale nie jestem w stanie zrozumieć, skąd pochodzi zmienna google?

Przykładowy kod:

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

Gdyby ktoś mógł mi powiedzieć, że mogłoby to rozwiązać mój problem z niedziałającą funkcją wywołania zwrotnego. Dzięki!

Odpowiedzi

1 Alwaysalearner Dec 31 2020 at 20:21

Znalazłem rozwiązanie za pomocą komentarza zamieszczonego przez Nilesh Patel i ten pakiet reaguje na google-one-tap-login .

Sprawdzając kod źródłowy w powyższym pakiecie udaje mi się stwierdzić, że muszę

zastąpić:

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

z

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