ใช้ JavaScript API

หากต้องการ คุณสามารถใช้เฉพาะโค้ด JavaScript เพื่อเรียกใช้ข้อความแจ้งจาก One Tap หรือแสดงผลปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

หากต้องการกําหนดค่าข้อความแจ้งของ One Tap ใน JavaScript คุณต้องเรียกใช้เมธอด initialize() ก่อน จากนั้นเรียกเมธอด prompt() เพื่อแสดง UI ของข้อความแจ้ง ดูข้อมูลโค้ดต่อไปนี้

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

หากต้องการรับการแจ้งเตือนสถานะ UI ของข้อความแจ้ง ให้ระบุฟังก์ชันเรียกกลับให้กับเมธอด prompt() ดูข้อมูลโค้ดต่อไปนี้

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    google.accounts.id.prompt((notification) => {
        if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
            // try next provider if OneTap is not displayed or skipped
        }
    });
  }
</script>

โค้ดตัวอย่างด้านล่างแสดงวิธีแสดงผลทั้ง One Tap และปุ่ม "ลงชื่อเข้าใช้ด้วย Google" ใน JavaScript

<script>
  window.onload = function () {
    google.accounts.id.initialize({
      client_id: 'YOUR_GOOGLE_CLIENT_ID',
      callback: handleCredentialResponse
    });
    const parent = document.getElementById('google_btn');
    google.accounts.id.renderButton(parent, {theme: "filled_blue"});
    google.accounts.id.prompt();
  }
</script>