bagaimana mendefinisikan variabel google saat menggunakan google one tap javascript API

Dec 10 2020

Saya mengikuti dokumentasi ini google sekali ketuk masuk untuk menerapkan masuk sekali ketuk google di aplikasi reaksi saya.

Saya telah menambahkan kode di bawah ini ke JSX komponen saya dan saya mulai mendapatkan perintah google untuk masuk:

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

Masalah yang saya hadapi adalah bahwa fungsi panggilan balik tidak memicu. Setelah mencari solusi, saya menemukan pertanyaan SO ini . Dimana OP telah menanyakan pertanyaan serupa, dan menggunakan sintaks API javascript untuk menampilkan google satu ketukan alih-alih kode HTML Untuk mengikuti pertanyaan di atas saya membaca dokumentasi ini Gunakan API JavaScript Satu Ketukan . Tetapi saya tidak dapat memahami bahwa dari mana asalnya variabel google?

Kode sampel:

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

Jika seseorang dapat memberi tahu saya bahwa itu mungkin menyelesaikan masalah saya tentang fungsi panggilan balik yang tidak terpicu. Terima kasih!

Jawaban

1 Alwaysalearner Dec 31 2020 at 20:21

Saya telah menemukan solusi dengan bantuan komentar yang diposting oleh Nilesh Patel dan paket ini react-google-one-tap-login .

Memeriksa kode sumber dalam paket di atas saya berhasil menemukan bahwa saya harus

menggantikan:

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

dengan

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