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

หน้าอ้างอิงนี้อธิบายถึง JavaScript API การลงชื่อเข้าใช้ คุณสามารถใช้ API นี้เพื่อแสดงปุ่ม "One Tap" หรือ "ลงชื่อเข้าใช้ด้วย 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 และปุ่ม"ลงชื่อเข้าใช้ด้วย Google"popup โหมด UX ใช้แอตทริบิวต์นี้
login_uri URL ของปลายทางการเข้าสู่ระบบของคุณ ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" redirect โหมด UX ใช้แอตทริบิวต์นี้
native_callback ฟังก์ชัน JavaScript ที่จัดการข้อมูลรับรองของรหัสผ่าน
cancel_on_tap_outside ยกเลิกข้อความแจ้งหากผู้ใช้คลิกภายนอกข้อความแจ้ง
prompt_parent_id รหัส DOM ขององค์ประกอบคอนเทนเนอร์ของข้อความแจ้งด้วยการแตะครั้งเดียว
nonce สตริงแบบสุ่มสําหรับโทเค็นรหัส
context ชื่อและคําในข้อความแจ้งด้วยการแตะครั้งเดียว
state_cookie_domain หากต้องการเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังช่องนี้เพื่อใช้คุกกี้ที่ใช้ร่วมกันรายการเดียว
ux_mode ขั้นตอนการใช้งาน UX ของปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
allowed_parent_origin ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง แตะครั้งเดียวจะทํางานในโหมด iframe ระดับกลางหากมีช่องนี้
intermediate_iframe_close_callback ลบล้างการทํางานเริ่มต้นของ iframe กลางเมื่อผู้ใช้ปิด One Tap ด้วยตนเอง
itp_support เปิดใช้ One Tap UX ที่อัปเกรดแล้วในเบราว์เซอร์ ITP

client_id

ช่องนี้คือรหัสไคลเอ็นต์ของแอปพลิเคชันของคุณที่พบและสร้างขึ้นใน Google Developers Console โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท จำเป็น ตัวอย่าง
สตริง ได้ client_id: "CLIENT_ID.apps.googleusercontent.com"

เลือกอัตโนมัติ

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

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

โค้ดเรียกกลับ

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

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

เข้าสู่ระบบ

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

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

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

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

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

ต่อไปนี้เป็นตัวอย่างคําขอที่ส่งไปยังปลายทางการเข้าสู่ระบบของคุณ

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

Native_Callback

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

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

ยกเลิก_เปิด_นอกหน้าจอ

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

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

รหัสสินค้าของผู้ปกครอง [Prompt_parent_id]

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

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

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

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

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

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

บริบท

ช่องนี้จะเปลี่ยนชื่อของชื่อและข้อความในข้อความแจ้งด้วยการแตะครั้งเดียว โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

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

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

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

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

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

โหมด X_

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

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

ตารางต่อไปนี้แสดงโหมด UX ที่ใช้ได้ รวมถึงคําอธิบาย

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

ต้นทาง_ที่อนุญาตให้ใช้ได้

ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง "แตะครั้งเดียว" จะทํางานในโหมด 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 ไม่ถูกต้อง การเริ่มต้น One Tap ในโหมด iframe ระหว่างกลางจะล้มเหลวและหยุดทํางาน

intermediate_iframe_close_callback

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

ช่อง intermediate_iframe_close_callback จะมีผลในโหมด iframe ระดับกลางเท่านั้น และจะมีผลกระทบกับ iframe ระดับกลางเท่านั้น แทนที่จะเป็น iframe แบบแตะครั้งเดียว ระบบจะนํา UI ของ One Tap ออกก่อนที่จะมีการเรียกใช้การเรียกกลับ

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

การสนับสนุนด้านไอที

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

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

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

เมธอด google.accounts.id.prompt จะแสดงข้อความแจ้งของ One Tap หรือตัวจัดการข้อมูลเข้าสู่ระบบเริ่มต้นของเบราว์เซอร์ที่มีการเรียกใช้เมธอด 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() การแจ้งเตือนนี้เป็นช่วงเวลาในการแสดงผลใช่ไหม
isDisplayed() การแจ้งเตือนนี้เป็นช่วงเวลาที่แสดงและ UI แสดงขึ้นใช่ไหม
isNotDisplayed() การแจ้งเตือนนี้เป็นช่วงเวลาที่แสดงและ UI ไม่แสดงใช่ไหม
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
isSkippedMoment() การแจ้งเตือนนี้มีไว้สําหรับช่วงเวลาที่ระบบข้ามไปใช่ไหม
getSkippedReason()

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

  • auto_cancel
  • user_cancel
  • tap_outside
  • issuing_failed
isDismissedMoment() การแจ้งเตือนนี้มีไว้สําหรับช่วงเวลาที่ปิดใช่ไหม
getDismissedReason()

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

  • credential_returned
  • cancel_called
  • flow_restarted
getMomentType()

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

  • display
  • skipped
  • dismissed

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

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

ช่อง
credential ช่องนี้คือโทเค็นรหัสที่ส่งคืน
select_by ช่องนี้ตั้งค่าวิธีเลือกข้อมูลรับรอง

ข้อมูลรับรอง

ช่องนี้คือโทเค็นรหัสเป็นสตริง JSON Web Token (JWT) ที่เข้ารหัสฐาน 64

เมื่อถอดรหัส 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

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

กรณีที่ Google เชื่อถือได้

  • email มีส่วนต่อท้าย @gmail.com ซึ่งก็คือบัญชี Gmail
  • email_verified เป็นจริงและตั้งค่า hd แล้ว ซึ่งเป็นบัญชี G Suite

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

เลือกโดย

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

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

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

  • ก่อนแชร์ข้อมูลรับรองของโทเค็นรหัสกับแอป ผู้ใช้จะ

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

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

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

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

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

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

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

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

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

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

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

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

ประเภท

ประเภทปุ่ม ค่าเริ่มต้นคือ 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

แนวการจัดวางโลโก้

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

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

ตารางต่อไปนี้แสดงการจัดข้อความที่เป็นไปได้และคําอธิบาย

แนวการจัดวางโลโก้
left จัดโลโก้ Google ชิดซ้าย
center จัดโลโก้ Google ให้อยู่ตรงกลาง

ความกว้าง

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

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

ประเภท จำเป็น ตัวอย่าง
สตริง ไม่บังคับ width: 400

ภาษา

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

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

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

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

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

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

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

เมื่อผู้ใช้ออกจากระบบเว็บไซต์ คุณต้องเรียกใช้เมธอด 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:

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

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

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

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

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

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

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

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

ช่อง
successful ช่องนี้คือค่าส่งคืนของการเรียกใช้เมธอด
error ช่องนี้จะมีข้อความแสดงข้อผิดพลาดโดยละเอียด

สําเร็จ

ช่องนี้เป็นค่าบูลีนที่ตั้งค่าเป็น "จริง" หากการเรียกใช้เมธอดการเพิกถอนสําเร็จหรือเป็น "เท็จ" เมื่อไม่สําเร็จ

ข้อผิดพลาด

ช่องนี้เป็นค่าสตริงและมีข้อความแสดงข้อผิดพลาดโดยละเอียดหากการเรียกใช้เมธอดเพิกถอนล้มเหลว จะไม่มีการกําหนดความสําเร็จ