วิธีกำหนดตัวแปร google เมื่อใช้ google one tap javascript API

Question

ฉันกำลังติดตามเอกสารนี้google one tap sign in to ใช้ google one tap sign-in in my react app.

ฉันได้เพิ่มโค้ดด้านล่างลงในคอมโพเนนต์ 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 ได้ถามคำถามที่คล้ายกันและใช้ไวยากรณ์ JavaScript API เพื่อแสดง google หนึ่งแตะแทนโค้ด HTML ต้องการทำตามข้างต้นคำถามที่ผมอ่านเอกสารนี้ใช้ API แต่ฉันไม่เข้าใจว่าตัวแปร google มาจากไหน

โค้ดตัวอย่าง:

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

หากมีใครสามารถบอกฉันได้นั่นอาจช่วยแก้ปัญหาของฉันที่ฟังก์ชันเรียกกลับไม่ทำงาน ขอบคุณ!

Answer 1

ฉันได้พบวิธีการแก้ปัญหาด้วยความช่วยเหลือของความคิดเห็นโพสต์โดย Nilesh เทลและแพคเกจนี้ตอบสนอง-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',
  });