как определить переменную google при использовании google one tap javascript API

Я следую этой документации google one tap войдите , чтобы реализовать вход в Google одним нажатием в моем приложении для реагирования.

Я добавил приведенный ниже код в свой компонент JSX, и у меня появилось приглашение Google для входа:

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

Проблема, с которой я сталкиваюсь, заключается в том, что функция обратного вызова не срабатывает. После поиска решения я наткнулся на этот SO вопрос. Где OP задал аналогичный вопрос и использовал синтаксис API javascript, чтобы показать Google одним касанием вместо HTML-кода. Чтобы ответить на вышеуказанный вопрос, я прочитал эту документацию Используйте JavaScript API One Tap. Но я не могу понять, откуда берется переменная google?

Образец кода:

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

Если бы кто-нибудь мог сказать мне, что это может решить мою проблему с несрабатыванием функции обратного вызова. Спасибо!


reactjs javascript google-signin google-identity google-one-tap
person Alwaysalearner    schedule 10.12.2020    source источник
comment
попробуйте этот пакет-оболочку github.com/MSalmanTariq/react-google-one-tap- войти   -  person Nilesh Patel    schedule 10.12.2020
comment
@NileshPatel Этот пакет кажется новым, немного параноидальным, так как поддержки будет меньше, если я где-то застряну.   -  person Alwaysalearner    schedule 10.12.2020
comment
Получение ошибки с этим пакетом: ReferenceError: окно не определено в useGoogleOneTapLogin (webpack:///./node_modules/react-google-one-tap-login/dist/index.es5.js?:136:17)   -  person Alwaysalearner    schedule 10.12.2020

Ответы (1)


arrow_upward
1
arrow_downward

Я нашел решение с помощью комментария, опубликованного Нилешем Пателем, и этого пакета react- Google-вход в одно касание.

Проверив исходный код в вышеуказанном пакете, мне удалось выяснить, что я должен

заменять:

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

с

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