Google One Tap javascript API를 사용할 때 변수 Google을 정의하는 방법

Dec 10 2020

내 반응 앱에서 Google 원탭 로그인 을 구현 하기 위해이 문서 google one tap sign in 을 따르고 있습니다.

내 구성 요소 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>
  );

내가 직면 한 문제는 콜백 함수가 트리거되지 않는다는 것입니다. 해결책을 찾은 후 나는이 질문을 우연히 발견했습니다 . OP가 유사한 질문을하고 javascript API 구문을 사용하여 HTML 코드 대신 Google에 한 번 탭 표시 위의 질문을 따르기 위해이 문서를 읽었습니다. Use the One Tap JavaScript API . 그러나 Google 변수가 어디에서 오는지 이해할 수 없습니다.

샘플 코드 :

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

누군가가 콜백 함수가 트리거되지 않는 문제를 해결할 수 있다고 말할 수 있다면. 감사!

답변

1 Alwaysalearner Dec 31 2020 at 20:21

Nilesh Patel이 게시 한 의견과이 패키지 react-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',
  });