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

Question

Я слежу за этой документацией. Войдите в систему одним касанием Google, чтобы реализовать вход в систему одним касанием 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-кода. Чтобы ответить на вышеупомянутый вопрос, я прочитал эту документацию. Используйте One Tap JavaScript API . Но я не могу понять, откуда взялась переменная google?

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

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

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

Answer 1

Я нашел решение с помощью комментария, опубликованного Nilesh Patel, и этого пакета response -google-one-tap-login .

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

заменять:

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