หน้านี้ได้รับการแปลโดย Cloud Translation API

ลงชื่อเข้าใช้ด้วยการอ้างอิง 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 เพียงครั้งเดียวเท่านั้น แม้จะใช้หลายโมดูล (เช่น การแตะครั้งเดียว ปุ่มที่ปรับเปลี่ยนในแบบของคุณ การเพิกถอน ฯลฯ) ในหน้าเว็บเดียวกัน
หากคุณเรียกเมธอด 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`	ชื่อและคําในข้อความแจ้งโดยแตะ 1 ครั้ง
`state_cookie_domain`	หากต้องการเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังช่องนี้เพื่อใช้คุกกี้ที่แชร์รายการเดียว
`ux_mode`	ขั้นตอนการลงชื่อเข้าใช้ด้วยปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
`allowed_parent_origin`	ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง การแตะครั้งเดียวจะทํางานในโหมด iframe ระดับกลางหากมีช่องนี้
`intermediate_iframe_close_callback`	ลบล้างลักษณะการทํางานเริ่มต้นของ iframe ระดับกลางเมื่อผู้ใช้ปิด One Tap ด้วยตนเอง
`itp_support`	เปิดใช้ One Tap UX ที่อัปเกรดบนเบราว์เซอร์ ITP

client_id

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

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

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

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

Type	ต้องระบุ	ตัวอย่าง
บูลีน	ไม่บังคับ	`auto_select: true`

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

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

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

login_uri

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

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

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

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

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

Type	ไม่บังคับ	ตัวอย่าง
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

การโทรกลับแบบเนทีฟ

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

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

cancel_on_tap_outside

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

Type	ต้องระบุ	ตัวอย่าง
บูลีน	ไม่บังคับ	`cancel_on_tap_outside: false`

_id_id [parent_parent_id]

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`prompt_parent_id: 'parent_id'`

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

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`nonce: "biaqbm70g23"`

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

บริบท

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`context: "use"`

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

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

โดเมนของคุกกี้

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

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

โหมด X

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`ux_mode: "redirect"`

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

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

ต้นทาง_อนุญาต_ที่อนุญาต

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

Type	ต้องระบุ	ตัวอย่าง
สตริงหรืออาร์เรย์สตริง	ไม่บังคับ	`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:// Scheme ที่ปลอดภัย "*.example.com" จะถือว่าไม่ถูกต้อง

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

ตัวกลาง_iframe_close_callback

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

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

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

Itp_support

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

Type	ต้องระบุ	ตัวอย่าง
บูลีน	ไม่บังคับ	`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() เพื่อปิดข้อความแจ้งของ One Tap แล้วเรียกใช้ช่วงเวลาที่ปิดไป

คําเตือน: เมื่อมีการปิดโอกาส โปรดอย่าลองใช้ผู้ให้บริการข้อมูลประจําตัวรายใดรายหนึ่ง

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

<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) ที่เข้ารหัสแบบ 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

ใช้ช่อง 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 ประเภทของปุ่มที่ใช้กับพร้อมกับเซสชันและสถานะคํายินยอมใช้เพื่อกําหนดค่า

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

ค่าในฟิลด์นี้จะตั้งเป็นประเภทใดประเภทหนึ่งต่อไปนี้

ค่า	คำอธิบาย
`auto`	การลงชื่อเข้าใช้ของผู้ใช้โดยอัตโนมัติกับเซสชันที่มีอยู่ ซึ่งเคยให้คํายินยอมในการแชร์ข้อมูลเข้าสู่ระบบ
`user`	ผู้ใช้ที่มีเซสชันซึ่งเคยให้คํายินยอมก่อนหน้านี้ได้กดปุ่ม "ดําเนินการต่อในฐานะ" แบบแตะครั้งเดียวเพื่อแชร์ข้อมูลรับรอง
`user_1tap`	ผู้ใช้ที่มีเซสชันอยู่แล้วได้กดปุ่ม "ดําเนินการต่อใน" เพื่อมอบคํายินยอมและแชร์ข้อมูลรับรอง ใช้ได้กับ Chrome v75 ขึ้นไปเท่านั้น
`user_2tap`	ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วได้กดปุ่ม "ดําเนินการต่อใน" แบบแตะครั้งเดียวเพื่อเลือกบัญชี จากนั้นกดปุ่มยืนยันในหน้าต่างป๊อปอัปเพื่อ ให้ความยินยอมและแชร์ข้อมูลรับรอง ใช้กับเบราว์เซอร์ที่ไม่ใช่ 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`	ธีมของปุ่ม เช่น โปรดกรอก_สีน้ําเงินหรือสีเติม_สีดํา
`size`	ขนาดปุ่ม เช่น เล็กหรือใหญ่
`text`	ข้อความปุ่ม เช่น "ลงชื่อเข้าใช้ด้วย Google" หรือ "ลงชื่อสมัครใช้ด้วย Google"
`shape`	รูปร่างของปุ่ม เช่น สี่เหลี่ยมผืนผ้าหรือวงกลม
`logo_alignment`	การจัดตําแหน่งโลโก้ Google: ซ้ายหรือกลาง
`width`	ความกว้างของปุ่ม หน่วยเป็นพิกเซล
`locale`	หากตั้งค่า ภาษาของปุ่มจะแสดงผล
`click_listener`	หากตั้งค่าไว้ ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อมีการคลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

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

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

ประเภท

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

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ใช่	`type: "icon"`

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

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

ธีม [theme]

ธีมของปุ่ม ค่าเริ่มต้นคือ outline โปรดดูตารางต่อไปนี้ สําหรับข้อมูลเพิ่มเติม

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`theme: "filled_blue"`

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

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

ขนาด

ขนาดปุ่ม ค่าเริ่มต้นคือ large โปรดดูตารางต่อไปนี้ สําหรับข้อมูลเพิ่มเติม

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`size: "small"`

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

ขนาด
`large`	ปุ่มขนาดใหญ่:
`medium`	ปุ่มขนาดกลาง:
`small`	ปุ่มขนาดเล็ก

ข้อความ

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

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`text: "signup_with"`

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

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

รูปร่าง

รูปร่างของปุ่ม ค่าเริ่มต้นคือ rectangular โปรดดูตารางต่อไปนี้ สําหรับข้อมูลเพิ่มเติม:

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`shape: "rectangular"`

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

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

logo_alignment

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`logo_alignment: "center"`

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

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

ความกว้าง

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

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`width: 400`

ภาษา

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

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

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

Type	ต้องระบุ	ตัวอย่าง
สตริง	ไม่บังคับ	`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...")
  }

ในตัวอย่างข้างต้น ข้อความปุ่มลงชื่อเข้าใช้ด้วย Google ที่คลิก... จะถูกบันทึกลงคอนโซลเมื่อมีการคลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google"

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

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

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

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

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

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 ได้ จะได้รับแจ้งหลังจากโหลด ไลบรารีการลงชื่อเข้าใช้ด้วย Google JavaScript แล้ว

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)

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

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

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

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

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

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

สําเร็จ

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

error

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