ลงชื่อเข้าใช้ด้วยเอกสารอ้างอิง Google JavaScript API

หน้านี้อธิบาย Sign-In JavaScript API คุณสามารถใช้ API นี้ เพื่อแสดงข้อความแจ้งการแตะครั้งเดียวหรือปุ่มลงชื่อเข้าใช้ด้วย Google ในหน้าเว็บ

เมธอด: google.accounts.id.initialize

google.accounts.id.initializeเมธอดจะเริ่มต้นไคลเอ็นต์ลงชื่อเข้าใช้ด้วย Google ตามออบเจ็กต์การกำหนดค่า ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด 

google.accounts.id.initialize(IdConfiguration)

ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.initialize กับฟังก์ชัน onload

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

google.accounts.id.initialize วิธีการนี้จะสร้างอินสแตนซ์ไคลเอ็นต์ของลงชื่อเข้าใช้ด้วย Google ซึ่งโมดูลทั้งหมดในหน้าเว็บเดียวกันสามารถใช้ได้โดยนัย

  • คุณต้องเรียกใช้เมธอด google.accounts.id.initialize เพียงครั้งเดียวแม้ว่าจะใช้โมดูลหลายโมดูล (เช่น One Tap, ปุ่มที่ปรับเปลี่ยนในแบบของคุณ, การเพิกถอน ฯลฯ) ในหน้าเว็บเดียวกัน
  • หากคุณเรียกใช้เมธอด google.accounts.id.initialize หลายครั้ง ระบบจะจดจำและใช้เฉพาะการกำหนดค่าในการเรียกใช้ครั้งล่าสุดเท่านั้น

คุณจะรีเซ็ตการกำหนดค่าทุกครั้งที่เรียกใช้เมธอด google.accounts.id.initialize และเมธอดที่ตามมาทั้งหมดในหน้าเว็บเดียวกันจะใช้การกำหนดค่าใหม่ทันที

ประเภทข้อมูล: IdConfiguration

ตารางต่อไปนี้แสดงฟิลด์และคำอธิบายของIdConfiguration ประเภทข้อมูล

ช่อง
client_id รหัสไคลเอ็นต์ของแอปพลิเคชัน
auto_select เปิดใช้การเลือกอัตโนมัติ
callback ฟังก์ชัน JavaScript ที่จัดการโทเค็นรหัส Google One Tap และปุ่มลงชื่อเข้าใช้ด้วย Google popup โหมด UX ใช้แอตทริบิวต์นี้
login_uri URL ของปลายทางการเข้าสู่ระบบ ปุ่มลงชื่อเข้าใช้ด้วย Google redirect โหมด UX ใช้แอตทริบิวต์นี้
native_callback ฟังก์ชัน JavaScript ที่จัดการข้อมูลเข้าสู่ระบบของรหัสผ่าน
cancel_on_tap_outside ยกเลิกข้อความแจ้งหากผู้ใช้คลิกภายนอกข้อความแจ้ง
prompt_parent_id รหัส DOM ขององค์ประกอบคอนเทนเนอร์ของข้อความแจ้ง One Tap
nonce สตริงแบบสุ่มสำหรับโทเค็นรหัส
context ชื่อและคำในข้อความแจ้ง One Tap
state_cookie_domain หากต้องการเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังช่องนี้เพื่อให้ระบบใช้คุกกี้ที่แชร์รายการเดียว
ux_mode ขั้นตอน UX ของปุ่มลงชื่อเข้าใช้ด้วย Google
allowed_parent_origin ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง ระบบจะเรียกใช้ One Tap ในโหมด iframe ระดับกลางหากมีฟิลด์นี้
intermediate_iframe_close_callback ลบล้างลักษณะการทำงานของ iframe ระดับกลางเริ่มต้นเมื่อผู้ใช้ปิด One Tap ด้วยตนเอง
itp_support เปิดใช้ UX การแตะเพียงครั้งเดียวที่อัปเกรดแล้วในเบราว์เซอร์ ITP
login_hint ข้ามการเลือกบัญชีโดยระบุคำแนะนำสำหรับผู้ใช้
hd จำกัดการเลือกบัญชีตามโดเมน
use_fedcm_for_prompt อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้และเป็นตัวกลางในขั้นตอนการลงชื่อเข้าใช้ระหว่างเว็บไซต์กับ Google
use_fedcm_for_button ฟิลด์นี้จะกำหนดว่าควรใช้ UX ปุ่ม FedCM ใน Chrome หรือไม่ (เดสก์ท็อป M125 ขึ้นไปและ Android M128 ขึ้นไป) ค่าเริ่มต้นคือ false
button_auto_select ว่าจะเปิดใช้ตัวเลือกเลือกอัตโนมัติ สำหรับโฟลว์ปุ่ม FedCM หรือไม่ หากเปิดใช้ ผู้ใช้ที่กลับมาซึ่งมีเซสชัน Google ที่ใช้งานอยู่จะได้รับการลงชื่อเข้าใช้โดยอัตโนมัติ โดยไม่ต้องผ่านข้อความแจ้งตัวเลือกบัญชี ค่าเริ่มต้นคือ false

client_id

ฟิลด์นี้คือรหัสไคลเอ็นต์ของแอปพลิเคชัน ซึ่งจะพบและสร้างได้ใน คอนโซล Google Cloud ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ใช่ client_id: "CLIENT_ID.apps.googleusercontent.com"

auto_select

ฟิลด์นี้จะกำหนดว่าระบบจะแสดงโทเค็นรหัสโดยอัตโนมัติโดยไม่มีการโต้ตอบจากผู้ใช้หรือไม่ เมื่อมีเซสชัน Google เพียงเซสชันเดียวที่อนุมัติแอปของคุณ ก่อนหน้านี้ ค่าเริ่มต้นคือ false ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ auto_select: true

callback

ฟิลด์นี้คือฟังก์ชัน JavaScript ที่จัดการโทเค็นรหัสที่แสดงผลจาก ข้อความแจ้ง One Tap หรือหน้าต่างป๊อปอัป แอตทริบิวต์นี้จำเป็นหากใช้โหมด UX ของ Google One Tap หรือปุ่มลงชื่อเข้าใช้ด้วย Google popup ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
ฟังก์ชัน จำเป็นสำหรับ One Tap และpopupโหมด UX callback: handleResponse

login_uri

แอตทริบิวต์นี้คือ URI ของปลายทางการเข้าสู่ระบบ

ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตสำหรับไคลเอ็นต์ OAuth 2.0 อย่างใดอย่างหนึ่ง ซึ่งคุณกำหนดค่า ไว้ใน Google Cloud Console และต้องเป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง

คุณอาจละเว้นแอตทริบิวต์นี้ได้หากหน้าปัจจุบันเป็นหน้าเข้าสู่ระบบ ซึ่งในกรณีนี้ ระบบจะโพสต์ข้อมูลเข้าสู่ระบบไปยังหน้านี้โดยค่าเริ่มต้น

ระบบจะโพสต์การตอบกลับข้อมูลเข้าสู่ระบบโทเค็นรหัสไปยังปลายทางการเข้าสู่ระบบเมื่อผู้ใช้ คลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และใช้โหมด UX การเปลี่ยนเส้นทาง

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ไม่บังคับ ตัวอย่าง
URL ค่าเริ่มต้นคือ URI ของหน้าปัจจุบันหรือค่าที่คุณระบุ
ใช้เมื่อตั้งค่า ux_mode: "redirect" เท่านั้น		 login_uri: "https://www.example.com/login"

ปลายทางการเข้าสู่ระบบ ต้องจัดการคำขอ POST ที่มีพารามิเตอร์ credential พร้อมค่าโทเค็นรหัสในเนื้อหา

native_callback

ฟิลด์นี้คือชื่อของฟังก์ชัน JavaScript ที่จัดการรหัสผ่าน ข้อมูลเข้าสู่ระบบที่ส่งคืนจากเครื่องมือจัดการข้อมูลเข้าสู่ระบบในตัวของเบราว์เซอร์ ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
ฟังก์ชัน ไม่บังคับ native_callback: handleResponse

cancel_on_tap_outside

ฟิลด์นี้จะกำหนดว่าจะยกเลิกคำขอ One Tap หรือไม่ หากผู้ใช้คลิก ภายนอกข้อความแจ้ง ค่าเริ่มต้นคือ true คุณปิดใช้ได้หากตั้งค่าเป็น false ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ cancel_on_tap_outside: false

prompt_parent_id

แอตทริบิวต์นี้จะตั้งค่ารหัส DOM ขององค์ประกอบคอนเทนเนอร์ หากไม่ได้ตั้งค่าไว้ ระบบจะแสดงข้อความแจ้งแบบแตะครั้งเดียวที่มุมขวาบนของหน้าต่าง ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ prompt_parent_id: 'parent_id'

ค่าที่ได้จากการสุ่ม

ฟิลด์นี้เป็นสตริงแบบสุ่มที่โทเค็นรหัสใช้เพื่อป้องกันการโจมตีแบบเล่นซ้ำ ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ nonce: "biaqbm70g23"

ความยาวของ Nonce จะจำกัดไว้ที่ขนาด JWT สูงสุดที่สภาพแวดล้อมของคุณรองรับ และข้อจำกัดด้านขนาด HTTP ของเบราว์เซอร์และเซิร์ฟเวอร์แต่ละรายการ

บริบท

ฟิลด์นี้จะเปลี่ยนข้อความของชื่อและข้อความที่แสดงในพรอมต์การแตะครั้งเดียว โดยไม่มีผลกับเบราว์เซอร์ ITP ค่าเริ่มต้นคือ signin

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ context: "use"

ตารางต่อไปนี้แสดงบริบททั้งหมดที่ใช้ได้และคำอธิบาย

บริบท
signin "ลงชื่อเข้าใช้"
signup "ลงชื่อสมัครใช้"
use "ใช้"

หากต้องการแสดง One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังช่องนี้เพื่อให้ระบบใช้คุกกี้สถานะที่แชร์รายการเดียว ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ state_cookie_domain: "example.com"

ux_mode

ใช้ช่องนี้เพื่อตั้งค่าโฟลว์ UX ที่ปุ่มลงชื่อเข้าใช้ด้วย Google ใช้ ค่าเริ่มต้นคือ popup แอตทริบิวต์นี้ไม่มีผลต่อ UX ของ One Tap ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ ux_mode: "redirect"

ตารางต่อไปนี้แสดงโหมด UX ที่ใช้ได้และคำอธิบาย

โหมด UX
popup ดำเนินการโฟลว์ UX การลงชื่อเข้าใช้ในหน้าต่างป๊อปอัป
redirect ดำเนินการตามขั้นตอน UX การลงชื่อเข้าใช้โดยการเปลี่ยนเส้นทางทั้งหน้า

allowed_parent_origin

ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง One Tap จะทํางานในโหมด iframe ระดับกลางหากมีช่องนี้ ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริงหรืออาร์เรย์สตริง ไม่บังคับ allowed_parent_origin: "https://example.com"

ตารางต่อไปนี้แสดงประเภทค่าที่รองรับและคำอธิบาย

ประเภทค่า
string URI โดเมนเดียว "https://example.com"
string array อาร์เรย์ของ URI โดเมน ["https://news.example.com", "https://local.example.com"]

นอกจากนี้ยังรองรับคำนำหน้าไวลด์การ์ดด้วย เช่น "https://*.example.com" ตรงกับ example.com และโดเมนย่อยที่ทุกระดับ (เช่น news.example.com, login.news.example.com) สิ่งที่ควรทราบเมื่อใช้ อักขระไวด์การ์ด

  • สตริงรูปแบบต้องไม่ประกอบด้วยไวลด์การ์ดและโดเมนระดับบนสุดเท่านั้น เช่น https://.com และ https://.co.uk ไม่ถูกต้องเนื่องจาก "https://.example.com" ตรงกับ example.com และ โดเมนย่อยทั้งหมด ใช้รายการที่คั่นด้วยคอมมาเพื่อแสดงโดเมน 2 โดเมนที่แตกต่างกัน เช่น "https://example1.com,https://.example2.com" จะตรงกับ โดเมน example1.com, example2.com และ โดเมนย่อยของ example2.com
  • โดเมนไวลด์การ์ดต้องขึ้นต้นด้วยรูปแบบ https:// ที่ปลอดภัย ดังนั้น "*.example.com" จึงถือว่าไม่ถูกต้อง

หากค่าของฟิลด์ allowed_parent_origin ไม่ถูกต้อง การเริ่มต้นโหมด iframe กลางด้วย One Tap จะล้มเหลวและหยุดทำงาน

intermediate_iframe_close_callback

ลบล้างลักษณะการทำงานของ iframe ระดับกลางเริ่มต้นเมื่อผู้ใช้ปิด One Tap ด้วยตนเองโดยแตะปุ่ม "X" ใน UI ของ One Tap ลักษณะการทำงานเริ่มต้นคือการ นำ iframe ระดับกลางออกจาก DOM ทันที

ฟิลด์ intermediate_iframe_close_callback จะมีผลในโหมด iframe ระดับกลางเท่านั้น และจะมีผลเฉพาะกับ iframe ระดับกลางเท่านั้น ไม่ใช่ iframe ของ One Tap ระบบจะนำ UI การแตะครั้งเดียวออกก่อนเรียกใช้การเรียกกลับ

ประเภท ต้องระบุ ตัวอย่าง
ฟังก์ชัน ไม่บังคับ intermediate_iframe_close_callback: logBeforeClose

itp_support

ฟิลด์นี้จะกำหนดว่าจะเปิดใช้ UX การอัปเกรดแบบแตะครั้งเดียว ในเบราว์เซอร์ที่รองรับ Intelligent Tracking Prevention (ITP) หรือไม่ ค่าเริ่มต้นคือ false ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ itp_support: true

login_hint

หากแอปพลิเคชันทราบล่วงหน้าว่าผู้ใช้รายใดควรลงชื่อเข้าใช้ แอปพลิเคชันจะ ให้คำแนะนำในการเข้าสู่ระบบแก่ Google ได้ หากสำเร็จ ระบบจะข้ามการเลือกบัญชี ค่าที่ยอมรับคือค่าฟิลด์ sub ของโทเค็นรหัสหรืออีเมล

ดูข้อมูลเพิ่มเติมได้ที่ช่อง login_hint ในเอกสารประกอบของ OpenID Connect

ประเภท ต้องระบุ ตัวอย่าง
สตริง อีเมล หรือค่าจากฟิลด์โทเค็นรหัส sub ไม่บังคับ login_hint: 'elisa.beckett@gmail.com'

HD

เมื่อผู้ใช้มีหลายบัญชีและควรลงชื่อเข้าใช้ด้วยบัญชี Workspace เท่านั้น ให้ใช้ตัวเลือกนี้เพื่อระบุคำแนะนำชื่อโดเมนให้ Google เมื่อสำเร็จแล้ว บัญชีผู้ใช้ ที่แสดงในระหว่างการเลือกบัญชีจะจำกัดเฉพาะโดเมนที่ระบุ ค่าไวลด์การ์ด: * จะแสดงเฉพาะบัญชี Workspace แก่ผู้ใช้และไม่รวม บัญชีผู้ใช้ทั่วไป (user@gmail.com) ในระหว่างการเลือกบัญชี

ดูข้อมูลเพิ่มเติมได้ที่ช่อง hd ในเอกสารประกอบ OpenID Connect

ประเภท ต้องระบุ ตัวอย่าง
สตริง ชื่อโดเมนที่สมบูรณ์ในตัวเองหรือ * ไม่บังคับ hd: '*'

use_fedcm_for_prompt

อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้และเป็นสื่อกลางในขั้นตอนการลงชื่อเข้าใช้ ระหว่างเว็บไซต์ของคุณกับ Google ค่าเริ่มต้นคือ false ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ use_fedcm_for_prompt: true

use_fedcm_for_button

ฟิลด์นี้จะกำหนดว่าจะใช้ UX ของปุ่ม FedCM ใน Chrome (เดสก์ท็อป M125 ขึ้นไป และ Android M128 ขึ้นไป) หรือไม่ ค่าเริ่มต้นคือ false ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ use_fedcm_for_button: true

button_auto_select

ฟิลด์นี้จะกำหนดว่าจะเปิดใช้ตัวเลือกเลือกอัตโนมัติสำหรับ โฟลว์ปุ่ม FedCM หรือไม่ หากเปิดใช้ไว้ ผู้ใช้ที่กลับมาซึ่งมีเซสชัน Google ที่ใช้งานอยู่ จะได้รับการลงชื่อเข้าใช้โดยอัตโนมัติ โดยไม่ต้องผ่านข้อความแจ้งตัวเลือกบัญชี ค่าเริ่มต้น คือ false คุณต้องเปิดใช้การลงชื่อเข้าใช้ปุ่มอัตโนมัติอย่างชัดเจนในระหว่างการเปิดตัวการเลือกใช้ ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ button_auto_select: true

เมธอด: google.accounts.id.prompt

google.accounts.id.prompt จะแสดงข้อความแจ้งการแตะครั้งเดียวหรือเครื่องมือจัดการข้อมูลเข้าสู่ระบบในตัวของเบราว์เซอร์หลังจากเรียกใช้เมธอด initialize() ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

 google.accounts.id.prompt(/**
 @type{(function(!PromptMomentNotification):void)=} */ momentListener)

โดยปกติแล้ว ระบบจะเรียกใช้เมธอด prompt() เมื่อโหลดหน้าเว็บ เนื่องจากสถานะเซสชันและการตั้งค่าผู้ใช้ในฝั่ง Google UI ของข้อความแจ้ง One Tap อาจไม่แสดง หากต้องการรับการแจ้งเตือนเกี่ยวกับสถานะ UI ในช่วงเวลาต่างๆ ให้ส่งฟังก์ชันเพื่อรับการแจ้งเตือนสถานะ UI

ระบบจะทริกเกอร์การแจ้งเตือนในเวลาต่อไปนี้

  • ช่วงเวลาที่แสดง: เหตุการณ์นี้จะเกิดขึ้นหลังจากเรียกใช้เมธอด prompt() การแจ้งเตือนมีค่าบูลีนเพื่อระบุว่า UI แสดงอยู่หรือไม่

  • ช่วงที่ข้าม: กรณีนี้จะเกิดขึ้นเมื่อมีการปิดข้อความแจ้งแบบแตะครั้งเดียวโดยการยกเลิกอัตโนมัติ การยกเลิกด้วยตนเอง หรือเมื่อ Google ไม่สามารถออกข้อมูลเข้าสู่ระบบ เช่น เมื่อเซสชันที่เลือกได้ออกจากระบบ Google

    ในกรณีเช่นนี้ เราขอแนะนำให้คุณดำเนินการกับผู้ให้บริการข้อมูลประจำตัวรายถัดไป หากมี

  • ช่วงเวลาที่ปิด: เหตุการณ์นี้เกิดขึ้นเมื่อ Google ดึงข้อมูล ข้อมูลเข้าสู่ระบบได้สำเร็จ หรือผู้ใช้ต้องการหยุดขั้นตอนการดึงข้อมูลเข้าสู่ระบบ ตัวอย่างเช่น เมื่อผู้ใช้เริ่มป้อนชื่อผู้ใช้และรหัสผ่านในกล่องโต้ตอบการเข้าสู่ระบบ คุณสามารถเรียกใช้เมธอด google.accounts.id.cancel() เพื่อปิดข้อความแจ้งการแตะหนึ่งครั้งและทริกเกอร์ช่วงเวลาที่ถูกปิดได้

ตัวอย่างโค้ดต่อไปนี้จะใช้ช่วงที่ข้าม

<script>
  window.onload = function () {
    google.accounts.id.initialize(...);
    google.accounts.id.prompt((notification) => {
      if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
        // continue with another identity provider.
      }
    });
  };
</script>

ประเภทข้อมูล: PromptMomentNotification

ตารางต่อไปนี้แสดงรายการเมธอดและคำอธิบายของประเภทข้อมูล PromptMomentNotification

วิธีการ
isDisplayMoment() การแจ้งเตือนนี้เป็นช่วงเวลาที่แสดงหรือไม่

หมายเหตุ: เมื่อ เปิดใช้ FedCM ระบบจะไม่แสดงการแจ้งเตือนนี้ ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM
isDisplayed() การแจ้งเตือนนี้มีไว้สำหรับช่วงเวลาที่แสดงและ UI แสดงอยู่ใช่ไหม

หมายเหตุ: เมื่อ เปิดใช้ FedCM ระบบจะไม่แสดงการแจ้งเตือนนี้ ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM
isNotDisplayed() การแจ้งเตือนนี้เป็นช่วงเวลาที่โฆษณาแสดง และ UI ไม่ได้ แสดงใช่ไหม

หมายเหตุ: เมื่อ เปิดใช้ FedCM ระบบจะไม่แสดงการแจ้งเตือนนี้ ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM
getNotDisplayedReason()

เหตุผลโดยละเอียดที่ UI ไม่แสดง ค่าที่เป็นไปได้มีดังนี้

  • browser_not_supported
  • invalid_client
  • missing_client_id
  • opt_out_or_no_session
  • secure_http_required
  • suppressed_by_user
  • unregistered_origin
  • unknown_reason
หมายเหตุ: เมื่อ เปิดใช้ FedCM ระบบจะไม่รองรับวิธีการนี้ ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM
isSkippedMoment() การแจ้งเตือนนี้สำหรับช่วงที่ข้ามใช่ไหม
getSkippedReason()

เหตุผลโดยละเอียดสำหรับช่วงเวลาที่ข้าม ค่าที่เป็นไปได้มีดังนี้

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
หมายเหตุ: เมื่อ เปิดใช้ FedCM ระบบจะไม่รองรับวิธีการนี้ ดูข้อมูลเพิ่มเติมได้ที่หน้าย้ายข้อมูลไปยัง FedCM
isDismissedMoment() การแจ้งเตือนนี้สำหรับช่วงเวลาที่ถูกปิดไปใช่ไหม
getDismissedReason()

เหตุผลโดยละเอียดในการปิด ค่าที่เป็นไปได้มีดังนี้

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

แสดงผลสตริงสำหรับประเภทช่วงเวลา ค่าที่เป็นไปได้มีดังนี้

  • display
  • skipped
  • dismissed

ประเภทข้อมูล: CredentialResponse

เมื่อเรียกใช้ฟังก์ชัน callback ระบบจะส่งออบเจ็กต์ CredentialResponse เป็นพารามิเตอร์ ตารางต่อไปนี้แสดงช่องที่อยู่ในออบเจ็กต์การตอบกลับของข้อมูลเข้าสู่ระบบ

ช่อง
credential โทเค็นรหัส JWT ที่เข้ารหัสซึ่ง Google ออกให้
select_by วิธีที่ผู้ใช้ลงชื่อเข้าใช้
state ฟิลด์นี้จะกำหนดไว้เฉพาะเมื่อผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ด้วย Google เพื่อลงชื่อเข้าใช้ และมีการระบุแอตทริบิวต์ state ของปุ่ม

ข้อมูล เข้าสู่ระบบ

ฟิลด์นี้คือโทเค็นรหัสในรูปแบบสตริงโทเค็นเว็บ JSON (JWT) ที่เข้ารหัส Base64

เมื่อถอดรหัส JWT จะมีลักษณะดังตัวอย่างต่อไปนี้ 

header
{
  "alg": "RS256",
  "kid": "f05415b13acb9590f70df862765c655f5a7a019e", // JWT signature
  "typ": "JWT"
}
payload
{
  "iss": "https://accounts.google.com", // The JWT's issuer
  "nbf":  161803398874,
  "aud": "314159265-pi.apps.googleusercontent.com", // Your server's client ID
  "sub": "3141592653589793238", // The unique ID of the user's Google Account
  "hd": "gmail.com", // If present, the host domain of the user's GSuite email address
  "email": "elisa.g.beckett@gmail.com", // The user's email address
  "email_verified": true, // true, if Google has verified the email address
  "azp": "314159265-pi.apps.googleusercontent.com",
  "name": "Elisa Beckett",
                            // If present, a URL to user's profile picture
  "picture": "https://lh3.googleusercontent.com/a-/e2718281828459045235360uler",
  "given_name": "Elisa",
  "family_name": "Beckett",
  "iat": 1596474000, // Unix timestamp of the assertion's creation time
  "exp": 1596477600, // Unix timestamp of the assertion's expiration time
  "jti": "abc161803398874def"
}

ฟิลด์ sub คือตัวระบุที่ไม่ซ้ำกันทั่วโลกสำหรับบัญชี Google ใช้ ฟิลด์ sub เป็นตัวระบุสำหรับผู้ใช้เท่านั้น เนื่องจากฟิลด์นี้ไม่ซ้ำกันในบัญชี Google ทั้งหมด และไม่มีการนำกลับมาใช้ใหม่

การใช้ช่อง email, email_verified และ hd จะช่วยให้คุณระบุได้ว่า Google โฮสต์และเป็นผู้มีอำนาจสำหรับอีเมลหรือไม่ ในกรณีที่ Google เป็น ผู้มีอำนาจ เราจะยืนยันว่าผู้ใช้เป็นเจ้าของบัญชีที่ถูกต้อง

กรณีที่ Google เป็นแหล่งข้อมูลที่เชื่อถือได้

  • email มีคำต่อท้ายเป็น @gmail.com แสดงว่าเป็นบัญชี Gmail
  • email_verified เป็นจริงและตั้งค่า hd ไว้ แสดงว่าเป็นบัญชี Google Workspace

ผู้ใช้สามารถลงทะเบียนบัญชี Google ได้โดยไม่ต้องใช้ Gmail หรือ Google Workspace เมื่อ email ไม่มีคำต่อท้าย @gmail.com และไม่มี hd Google จะไม่ถือเป็นแหล่งข้อมูลที่เชื่อถือได้ และขอแนะนำให้ใช้รหัสผ่านหรือวิธีการท้าทายอื่นๆ เพื่อยืนยันตัวตนผู้ใช้ email_verfied อาจเป็นจริงได้เช่นกัน เนื่องจาก Google ได้ยืนยันผู้ใช้ในตอนแรกเมื่อสร้างบัญชี Google แต่การเป็นเจ้าของบัญชีอีเมลของบุคคลที่สามอาจมีการเปลี่ยนแปลงในภายหลัง

ฟิลด์ exp จะแสดงเวลาหมดอายุเพื่อให้คุณยืนยันโทเค็นในฝั่งเซิร์ฟเวอร์ โดยมีอายุ 1 ชั่วโมง สำหรับโทเค็นรหัสที่ได้จากการลงชื่อเข้าใช้ด้วย Google คุณต้องยืนยันโทเค็นก่อนเวลาหมดอายุ อย่าใช้ exp สำหรับการจัดการเซสชัน โทเค็นรหัสที่หมดอายุ ไม่ได้หมายความว่าผู้ใช้ออกจากระบบ แอปของคุณมีหน้าที่รับผิดชอบในการจัดการเซสชันของผู้ใช้

select_by

ตารางต่อไปนี้แสดงค่าที่เป็นไปได้สำหรับฟิลด์ select_by ระบบจะใช้ ประเภทปุ่มที่ใช้ร่วมกับสถานะเซสชันและความยินยอมเพื่อตั้งค่า

  • ผู้ใช้กดปุ่ม One Tap หรือปุ่มลงชื่อเข้าใช้ด้วย Google หรือใช้ กระบวนการลงชื่อเข้าใช้โดยอัตโนมัติแบบไม่ต้องสัมผัส

  • ระบบพบเซสชันที่มีอยู่ หรือผู้ใช้เลือกและลงชื่อเข้าใช้บัญชี Google เพื่อสร้างเซสชันใหม่

  • ก่อนที่จะแชร์ข้อมูลเข้าสู่ระบบโทเค็นรหัสกับแอป ผู้ใช้ต้องดำเนินการอย่างใดอย่างหนึ่งต่อไปนี้

    • กดปุ่มยืนยันเพื่อให้ความยินยอมในการแชร์ข้อมูลเข้าสู่ระบบ หรือ
    • เคยให้ความยินยอมและใช้ "เลือกบัญชี" เพื่อเลือกบัญชี Google

ค่าของช่องนี้จะตั้งค่าเป็นประเภทใดประเภทหนึ่งต่อไปนี้

ค่า คำอธิบาย
auto การลงชื่อเข้าใช้ผู้ใช้ที่มีเซสชันอยู่แล้วโดยอัตโนมัติ ซึ่งผู้ใช้รายดังกล่าวเคยให้ความยินยอมในการแชร์ข้อมูลเข้าสู่ระบบไว้ก่อนหน้านี้ ใช้กับเบราว์เซอร์ที่ไม่รองรับ FedCM เท่านั้น
user ผู้ใช้ที่มีเซสชันอยู่แล้วซึ่งเคยให้ความยินยอมก่อนหน้านี้ กดปุ่ม "ดำเนินการต่อในชื่อ" ของ One Tap เพื่อแชร์ข้อมูลเข้าสู่ระบบ ใช้กับ เบราว์เซอร์ที่ไม่รองรับ FedCM เท่านั้น
fedcm ผู้ใช้กดปุ่ม "ดำเนินการต่อในชื่อ" ของการลงชื่อเข้าใช้ด้วยการแตะเพียงครั้งเดียวเพื่อแชร์ ข้อมูลเข้าสู่ระบบโดยใช้ FedCM ใช้กับเบราว์เซอร์ที่รองรับ FedCM เท่านั้น
fedcm_auto การลงชื่อเข้าใช้ผู้ใช้ที่มีเซสชันอยู่แล้วโดยอัตโนมัติ ซึ่งเคย ให้ความยินยอมในการแชร์ข้อมูลเข้าสู่ระบบโดยใช้ FedCM One Tap ใช้กับเบราว์เซอร์ที่รองรับ FedCM เท่านั้น
user_1tap ผู้ใช้ที่มีเซสชันอยู่แล้วกดปุ่ม "ดำเนินการต่อในชื่อ" ของการแตะครั้งเดียว เพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ ใช้ได้กับ Chrome เวอร์ชัน 75 ขึ้นไปเท่านั้น
user_2tap ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วกดปุ่ม "ดำเนินการต่อในชื่อ" ของการแตะครั้งเดียว เพื่อเลือกบัญชี แล้วกดปุ่มยืนยันใน หน้าต่างป๊อปอัปเพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ ใช้กับ เบราว์เซอร์ที่ไม่ได้อิงตาม Chromium
itp ผู้ใช้ที่มีเซสชันอยู่ซึ่งเคยให้ความยินยอม กด One Tap ในเบราว์เซอร์ ITP
itp_confirm ผู้ใช้ที่มีเซสชันอยู่แล้วกด One Tap ในเบราว์เซอร์ที่ใช้ ITP และกดปุ่ม ยืนยันเพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ
itp_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วซึ่งเคยให้ความยินยอม กดการแตะครั้งเดียวในเบราว์เซอร์ ITP เพื่อเลือกบัญชี Google และแชร์ข้อมูลเข้าสู่ระบบ
itp_confirm_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่ก่อนจะกดการลงชื่อเข้าใช้ด้วยแตะครั้งเดียวในเบราว์เซอร์ ITP เพื่อเลือกบัญชี Google แล้วกดปุ่มยืนยันเพื่อยินยอมและแชร์ข้อมูลเข้าสู่ระบบ
btn ผู้ใช้ที่มีเซสชันอยู่แล้วซึ่งเคยให้ความยินยอม กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และเลือกบัญชี Google จาก "เลือกบัญชี" เพื่อแชร์ข้อมูลเข้าสู่ระบบ
btn_confirm ผู้ใช้ที่มีเซสชันอยู่แล้วกดปุ่มลงชื่อเข้าใช้ด้วย Google และกดปุ่มยืนยันเพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ
btn_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วซึ่งก่อนหน้านี้ได้ให้ความยินยอม กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เพื่อเลือกบัญชี Google และแชร์ข้อมูลเข้าสู่ระบบ
btn_confirm_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่ก่อนจะกดปุ่มลงชื่อเข้าใช้ด้วย Google เพื่อเลือกบัญชี Google แล้วกดปุ่มยืนยัน เพื่อยินยอมและแชร์ข้อมูลเข้าสู่ระบบ

รัฐ

ฟิลด์นี้จะกำหนดไว้เฉพาะเมื่อผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ด้วย Google เพื่อ ลงชื่อเข้าใช้ และมีการระบุแอตทริบิวต์ state ของปุ่มที่คลิก ค่าของช่องนี้คือค่าเดียวกับที่คุณระบุในแอตทริบิวต์ state ของปุ่ม

เนื่องจากปุ่มลงชื่อเข้าใช้ด้วย Google หลายปุ่มแสดงในหน้าเดียวกันได้ คุณจึงกำหนดสตริงที่ไม่ซ้ำกันให้กับแต่ละปุ่มได้ ดังนั้น คุณจึงใช้ฟิลด์ state นี้ เพื่อระบุว่าผู้ใช้คลิกปุ่มใดเพื่อลงชื่อเข้าใช้

เมธอด: google.accounts.id.renderButton

วิธีการ google.accounts.id.renderButton จะแสดงปุ่มลงชื่อเข้าใช้ด้วย Google ในหน้าเว็บ

ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

google.accounts.id.renderButton(
      /** @type{!HTMLElement} */ parent,
      /** @type{!GsiButtonConfiguration} */ options
    )

ประเภทข้อมูล: GsiButtonConfiguration

ตารางต่อไปนี้แสดงฟิลด์และคำอธิบายของ GsiButtonConfiguration ประเภทข้อมูล

แอตทริบิวต์
type ประเภทปุ่ม: ไอคอนหรือปุ่มมาตรฐาน
theme ธีมปุ่ม เช่น filled_blue หรือ filled_black
size ขนาดปุ่ม เช่น เล็กหรือใหญ่
text ข้อความบนปุ่ม เช่น "ลงชื่อเข้าใช้ด้วย Google" หรือ "ลงชื่อสมัครใช้ด้วย Google"
shape รูปร่างของปุ่ม เช่น สี่เหลี่ยมผืนผ้าหรือวงกลม
logo_alignment การจัดโลโก้ Google: ซ้ายหรือตรงกลาง
width ความกว้างของปุ่มในหน่วยพิกเซล
locale หากตั้งค่าไว้ ระบบจะแสดงผลภาษาของปุ่ม
click_listener หากตั้งค่าไว้ ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อมีการคลิกปุ่มลงชื่อเข้าใช้ด้วย Google
state หากตั้งค่าไว้ สตริงนี้จะแสดงพร้อมกับโทเค็นรหัส

ประเภทแอตทริบิวต์

ส่วนต่อไปนี้มีรายละเอียดเกี่ยวกับประเภทของแอตทริบิวต์แต่ละรายการและ ตัวอย่าง

ประเภท

ประเภทปุ่ม ค่าเริ่มต้นคือ standard

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ใช่ type: "icon"

ตารางต่อไปนี้แสดงประเภทปุ่มที่ใช้ได้และ คำอธิบาย

ประเภท
standard
ปุ่มที่มีข้อความหรือข้อมูลที่ปรับเปลี่ยนในแบบของคุณ
icon
ปุ่มไอคอนที่ไม่มีข้อความ

ธีม [theme]

ธีมปุ่ม ค่าเริ่มต้นคือ outline ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ theme: "filled_blue"

ตารางต่อไปนี้แสดงธีมที่ใช้ได้และคำอธิบาย

ธีม
outline
ธีมปุ่มมาตรฐาน
filled_blue
ธีมปุ่มสีน้ำเงิน
filled_black
ธีมปุ่มสีดำ

ขนาด

ขนาดปุ่ม ค่าเริ่มต้นคือ large ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ size: "small"

ตารางต่อไปนี้แสดงขนาดปุ่มที่ใช้ได้และคำอธิบาย

ขนาด
large
ปุ่มมาตรฐานขนาดใหญ่ ปุ่มไอคอนขนาดใหญ่ ปุ่มขนาดใหญ่ที่ปรับเปลี่ยนในแบบของคุณ
ปุ่มขนาดใหญ่
medium
ปุ่มมาตรฐานขนาดกลาง ปุ่มไอคอนขนาดกลาง
ปุ่มขนาดกลาง
small
ปุ่มลงชื่อเข้าใช้ขนาดเล็ก ปุ่มลงชื่อเข้าใช้ขนาดเล็ก
ปุ่มขนาดเล็ก

ข้อความ

ข้อความบนปุ่ม ค่าเริ่มต้นคือ signin_with ปุ่มไอคอนที่มีแอตทริบิวต์ text ต่างกันจะไม่มีความแตกต่างกันในด้านภาพ สำหรับข้อความ มีข้อยกเว้นเฉพาะในกรณีที่อ่านข้อความเพื่อการช่วยเหลือพิเศษบนหน้าจอ

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ text: "signup_with"

ตารางต่อไปนี้แสดงข้อความปุ่มทั้งหมดที่ใช้ได้และคำอธิบาย

ข้อความ
signin_with
ข้อความในปุ่มคือ "ลงชื่อเข้าใช้ด้วย Google"
signup_with
ข้อความในปุ่มคือ "ลงชื่อสมัครใช้ด้วย Google"
continue_with
ข้อความในปุ่มคือ "ดำเนินการต่อด้วย Google"
signin
ข้อความในปุ่มคือ "ลงชื่อเข้าใช้"

รูปร่าง

รูปร่างของปุ่ม ค่าเริ่มต้นคือ rectangular ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ shape: "rectangular"

ตารางต่อไปนี้แสดงรูปร่างปุ่มที่มีและคำอธิบาย

รูปร่าง
rectangular
ปุ่มรูปสี่เหลี่ยมผืนผ้า หากใช้สำหรับปุ่มประเภท icon ค่านี้จะเหมือนกับ square
pill
ปุ่มรูปแคปซูล หากใช้กับปุ่มประเภท icon ค่านี้จะเหมือนกับ circle
circle
ปุ่มรูปวงกลม หากใช้สำหรับปุ่มประเภท standard ค่านี้จะเหมือนกับ pill
square
ปุ่มสี่เหลี่ยมจัตุรัส หากใช้สำหรับปุ่มประเภท standard ค่านี้จะเหมือนกับ rectangular

logo_alignment

การจัดแนวโลโก้ Google ค่าเริ่มต้นคือ left แอตทริบิวต์นี้ ใช้กับปุ่มประเภท standard เท่านั้น ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ logo_alignment: "center"

ตารางต่อไปนี้แสดงการจัดแนวที่ใช้ได้และคำอธิบาย

logo_alignment
left
จัดโลโก้ Google ไปทางซ้าย
center
จัดโลโก้ Google ไว้ตรงกลาง

ความกว้าง

ความกว้างขั้นต่ำของปุ่มในหน่วยพิกเซล ความกว้างสูงสุดคือ 400 พิกเซล

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ width: "400"

ภาษา

ไม่บังคับ แสดงข้อความปุ่มโดยใช้ภาษาที่ระบุ หรือใช้การตั้งค่าเริ่มต้นของบัญชี Google หรือเบราว์เซอร์ของผู้ใช้ เพิ่มพารามิเตอร์ hl และ รหัสภาษาลงในคำสั่ง src เมื่อโหลดไลบรารี เช่น gsi/client?hl=<iso-639-code>

หากไม่ได้ตั้งค่า ระบบจะใช้ภาษาเริ่มต้นของเบราว์เซอร์หรือค่ากำหนดของผู้ใช้เซสชัน Google ดังนั้น ผู้ใช้แต่ละรายอาจเห็นปุ่มที่แปลแล้วในเวอร์ชันที่แตกต่างกัน และอาจมีขนาดแตกต่างกันด้วย

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ locale: "zh_CN"

click_listener

คุณกำหนดฟังก์ชัน JavaScript ที่จะเรียกใช้เมื่อคลิกปุ่มลงชื่อเข้าใช้ด้วย Google ได้โดยใช้แอตทริบิวต์ click_listener

  google.accounts.id.renderButton(document.getElementById("signinDiv"), {
      theme: 'outline',
      size: 'large',
      click_listener: onClickHandler
    });

  
  function onClickHandler(){
    console.log("Sign in with Google button clicked...")
  }

ในตัวอย่างนี้ ระบบจะบันทึกข้อความ Sign in with Google button clicked... ไปยังคอนโซลเมื่อมีการคลิกปุ่มลงชื่อเข้าใช้ด้วย Google

รัฐ

ไม่บังคับ เนื่องจากแสดงปุ่มลงชื่อเข้าใช้ด้วย Google หลายปุ่มในหน้าเดียวกันได้ คุณจึงกำหนดสตริงที่ไม่ซ้ำกันให้กับแต่ละปุ่มได้ สตริงเดียวกันนี้ จะแสดงพร้อมกับโทเค็นรหัส เพื่อให้คุณระบุได้ว่าผู้ใช้คลิกปุ่มใด เพื่อลงชื่อเข้าใช้

ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-state: "button 1"

ประเภทข้อมูล: ข้อมูลเข้าสู่ระบบ

เมื่อเรียกใช้ฟังก์ชัน native_callback ระบบจะส่งออบเจ็กต์ Credential เป็นพารามิเตอร์ ตารางต่อไปนี้แสดงช่องที่มีอยู่ในออบเจ็กต์

ช่อง
id ระบุตัวตนผู้ใช้
password รหัสผ่าน

เมธอด: google.accounts.id.disableAutoSelect

เมื่อผู้ใช้ออกจากระบบเว็บไซต์ คุณต้องเรียกใช้เมธอด google.accounts.id.disableAutoSelect เพื่อบันทึกสถานะในคุกกี้ ซึ่ง ป้องกันไม่ให้เกิดลูปที่ทำให้ UX หยุดทำงาน ดูข้อมูลโค้ดของเมธอดต่อไปนี้

google.accounts.id.disableAutoSelect()

ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.disableAutoSelect กับฟังก์ชัน onSignout()

<script>
  function onSignout() {
    google.accounts.id.disableAutoSelect();
  }
</script>

เมธอด: google.accounts.id.storeCredential

เมธอดนี้เป็น Wrapper สำหรับเมธอด store() ของ API เครื่องมือจัดการข้อมูลเข้าสู่ระบบในตัวของเบราว์เซอร์ จึงใช้ได้เฉพาะในการจัดเก็บข้อมูลเข้าสู่ระบบ รหัสผ่านเท่านั้น ดูตัวอย่างโค้ดของเมธอดต่อไปนี้

google.accounts.id.storeCredential(Credential, callback)

ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.storeCredential กับฟังก์ชัน onSignIn()

<script>
  function onSignIn() {
    let cred = {id: '...', password: '...'};
    google.accounts.id.storeCredential(cred);
  }
</script>

เมธอด: google.accounts.id.cancel

คุณยกเลิกขั้นตอนการแตะครั้งเดียวได้หากนำข้อความแจ้งออกจาก DOM ของผู้ให้บริการที่เกี่ยวข้อง ระบบจะไม่สนใจการดำเนินการยกเลิกหากมีการเลือกข้อมูลเข้าสู่ระบบอยู่แล้ว ดูตัวอย่างโค้ดของเมธอดได้ที่ด้านล่าง

google.accounts.id.cancel()

ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.cancel() กับฟังก์ชัน onNextButtonClicked()

<script>
  function onNextButtonClicked() {
    google.accounts.id.cancel();
    showPasswordPage();
  }
</script>

การเรียกกลับการโหลดไลบรารี: onGoogleLibraryLoad

คุณลงทะเบียนonGoogleLibraryLoadการโทรกลับได้ ระบบจะแจ้งให้ทราบหลังจากโหลดไลบรารี JavaScript ของฟีเจอร์ลงชื่อเข้าใช้ด้วย Google แล้ว

window.onGoogleLibraryLoad = () => {
    ...
};

การเรียกกลับนี้เป็นเพียงทางลัดสำหรับการเรียกกลับของ window.onload ไม่มีความแตกต่างในลักษณะการทำงาน

ตัวอย่างโค้ดต่อไปนี้ใช้ onGoogleLibraryLoad Callback

<script>
  window.onGoogleLibraryLoad = () => {
   google.accounts.id.initialize({
     ...
   });
   google.accounts.id.prompt();
  };
</script>

เมธอด: google.accounts.id.revoke

เมธอด google.accounts.id.revoke จะเพิกถอนการให้สิทธิ์ OAuth ที่ใช้เพื่อแชร์ โทเค็นรหัสสำหรับผู้ใช้ที่ระบุ ดูข้อมูลโค้ดต่อไปนี้ของเมธอด javascript google.accounts.id.revoke(login_hint, callback)

พารามิเตอร์ ประเภท คำอธิบาย
login_hint สตริง อีเมลหรือรหัสที่ไม่ซ้ำของบัญชี Google ของผู้ใช้ รหัสคือพร็อพเพอร์ตี้ sub ของเพย์โหลดข้อมูลเข้าสู่ระบบ
callback ฟังก์ชัน ตัวแฮนเดิล RevocationResponse ที่ไม่บังคับ

ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้เมธอด revoke กับรหัส 

  google.accounts.id.revoke('1618033988749895', done => {
    console.log(done.error);
  });

ประเภทข้อมูล: RevocationResponse

เมื่อเรียกใช้ฟังก์ชัน callback ระบบจะส่งออบเจ็กต์ RevocationResponse เป็นพารามิเตอร์ ตารางต่อไปนี้แสดงช่องที่อยู่ในออบเจ็กต์การตอบกลับการเพิกถอน

ช่อง
successful ฟิลด์นี้คือค่าที่ส่งคืนของการเรียกใช้เมธอด
error ฟิลด์นี้อาจมีข้อความตอบกลับข้อผิดพลาดโดยละเอียด (ไม่บังคับ)

สำเร็จ

ฟิลด์นี้เป็นค่าบูลีนที่ตั้งค่าเป็น "จริง" หากการเรียกเมธอด revoke สำเร็จ หรือ เป็น "เท็จ" หากไม่สำเร็จ

ข้อผิดพลาด

ฟิลด์นี้เป็นค่าสตริงและมีข้อความแสดงข้อผิดพลาดโดยละเอียดหากการเรียกเมธอด revoke ไม่สำเร็จ แต่จะไม่มีการกำหนดค่าหากสำเร็จ