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

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

องค์ประกอบที่มีรหัส "g_id_onload"

คุณใส่แอตทริบิวต์ข้อมูล "ลงชื่อเข้าใช้ด้วย Google" ไว้ในองค์ประกอบที่มองเห็นได้หรือไม่ปรากฏได้ เช่น <div> และ <span> ข้อกำหนดเพียงอย่างเดียวคือมีการตั้งค่ารหัสองค์ประกอบเป็น g_id_onload อย่าใส่รหัสนี้ในหลายองค์ประกอบ

แอตทริบิวต์ข้อมูล

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

แอตทริบิวต์
data-client_id รหัสไคลเอ็นต์ของแอปพลิเคชัน
data-auto_prompt แสดงการแตะ Google One
data-auto_select เปิดใช้การเลือกอัตโนมัติใน Google One Tap
data-login_uri URL ของปลายทางการเข้าสู่ระบบ
data-callback ชื่อฟังก์ชันของตัวแฮนเดิลโทเค็นรหัส JavaScript
data-native_login_uri URL ของปลายทางเครื่องจัดการข้อมูลรับรองรหัสผ่าน
data-native_callback ชื่อฟังก์ชันของเครื่องจัดการข้อมูลรับรองรหัสผ่าน JavaScript
data-native_id_param ชื่อพารามิเตอร์สำหรับค่า credential.id
data-native_password_param ชื่อพารามิเตอร์สำหรับค่า credential.password
data-cancel_on_tap_outside ควบคุมว่าจะยกเลิกข้อความแจ้งเมื่อผู้ใช้คลิกนอกข้อความแจ้งหรือไม่
data-prompt_parent_id รหัส DOM ขององค์ประกอบคอนเทนเนอร์ข้อความแจ้งของ One Tap
data-skip_prompt_cookie ข้ามการแตะ 1 ครั้งหากคุกกี้ที่ระบุมีค่าที่ไม่ว่างเปล่า
data-nonce สตริงแบบสุ่มสำหรับโทเค็นรหัส
data-context ชื่อและคําในข้อความแจ้งของ One Tap
data-moment_callback ชื่อฟังก์ชันของ Listener การแจ้งเตือนสถานะข้อความแจ้งของข้อความแจ้ง
data-state_cookie_domain หากคุณจำเป็นต้องเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังแอตทริบิวต์นี้เพื่อให้ใช้คุกกี้ที่แชร์รายการเดียว
data-ux_mode ขั้นตอนสำหรับปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
data-allowed_parent_origin ต้นทางที่ได้รับอนุญาตให้ฝัง iframe กลาง แตะครั้งเดียวจะทำงานในโหมด iframe ระดับกลางหากมีแอตทริบิวต์นี้
data-intermediate_iframe_close_callback ลบล้างลักษณะการทำงานเริ่มต้นของ iframe เมื่อผู้ใช้ปิด One Tap ด้วยตนเอง
data-itp_support เปิดใช้ One Tap UX ที่อัปเกรดแล้วในเบราว์เซอร์ ITP
data-login_hint ข้ามการเลือกบัญชีด้วยการให้คำแนะนำผู้ใช้
data-hd จำกัดการเลือกบัญชีตามโดเมน
data-use_fedcm_for_prompt อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้ของผู้ใช้และเป็นสื่อกลางขั้นตอนการลงชื่อเข้าใช้ระหว่างเว็บไซต์ของคุณกับ Google

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

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

รหัสลูกค้าข้อมูล

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง มี data-client_id="CLIENT_ID.apps.googleusercontent.com"

data-auto_prompt

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

ประเภท ต้องระบุ ตัวอย่าง
boolean ไม่บังคับ data-auto_prompt="true"

การเลือกข้อมูลอัตโนมัติ

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

ประเภท ต้องระบุ ตัวอย่าง
boolean ไม่บังคับ data-auto_select="true"

data-login_uri

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

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

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

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

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

ประเภท ไม่บังคับ ตัวอย่าง
URL ค่าเริ่มต้นคือ URI ของหน้าปัจจุบันหรือค่าที่คุณระบุ
จะละเว้นเมื่อตั้งค่า data-ux_mode="popup" และ data-callback		 data-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 ที่จัดการโทเค็นรหัสที่แสดงผล โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ต้องระบุหากไม่ได้ตั้งค่า data-login_uri data-callback="handleToken"

อาจใช้แอตทริบิวต์ data-login_uri และ data-callback อย่างใดอย่างหนึ่ง ซึ่งขึ้นอยู่กับการกำหนดค่าคอมโพเนนต์และโหมด UX ดังต่อไปนี้

  • แอตทริบิวต์ data-login_uri จำเป็นสำหรับปุ่มลงชื่อเข้าใช้ด้วย Google redirect โหมด UX ซึ่งละเว้นแอตทริบิวต์ data-callback

  • ต้องตั้งค่า 1 ใน 2 แอตทริบิวต์นี้สำหรับ Google One Tap และปุ่ม Google ลงชื่อเข้าใช้popupโหมด UX หากตั้งค่าทั้ง 2 แบบ แอตทริบิวต์ data-callback จะมีลำดับความสำคัญสูงกว่า

HTML API ไม่รองรับฟังก์ชัน JavaScript ภายในเนมสเปซ แต่ให้ใช้ฟังก์ชัน JavaScript ส่วนกลางที่ไม่มีเนมสเปซแทน เช่น ใช้ mylibCallback แทน mylib.callback

data-native_login_uri

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-login_uri="https://www.example.com/password_login"

data-native_callback

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-native_callback="handlePasswordCredential"

HTML API ไม่รองรับฟังก์ชัน JavaScript ภายในเนมสเปซ แต่ให้ใช้ฟังก์ชัน JavaScript ส่วนกลางที่ไม่มีเนมสเปซแทน เช่น ใช้ mylibCallback แทน mylib.callback

data-native_id_param

เมื่อส่งข้อมูลเข้าสู่ระบบรหัสผ่านไปยังปลายทางเครื่องจัดการข้อมูลเข้าสู่ระบบรหัสผ่าน คุณจะระบุชื่อพารามิเตอร์สำหรับช่อง credential.id ได้ ชื่อเริ่มต้นคือ email โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
URL ไม่บังคับ data-native_id_param="user_id"

data-native_password_param

เมื่อส่งข้อมูลเข้าสู่ระบบของรหัสผ่านไปยังปลายทางเครื่องจัดการข้อมูลเข้าสู่ระบบรหัสผ่าน คุณจะระบุชื่อพารามิเตอร์สำหรับค่า credential.password ได้ ชื่อเริ่มต้นคือ password ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
URL ไม่บังคับ data-native_password_param="pwd"

data-cancel_on_tap_outside

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

ประเภท ต้องระบุ ตัวอย่าง
boolean ไม่บังคับ data-cancel_on_tap_outside="false"

data-prompt_parent_id

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

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

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-skip_prompt_cookie="SID"

ค่าเน็ต

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

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

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

บริบทของข้อมูล

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

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

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

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

การติดต่อกลับขณะข้อมูล

แอตทริบิวต์นี้เป็นชื่อฟังก์ชันของเครื่องมือฟังการแจ้งเตือนสถานะ UI ข้อความแจ้ง ดูข้อมูลเพิ่มเติมได้จากประเภทข้อมูล PromptMomentNotification

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-moment_callback="logMomentNotification"

HTML API ไม่รองรับฟังก์ชัน JavaScript ภายในเนมสเปซ แต่ให้ใช้ฟังก์ชัน JavaScript ส่วนกลางที่ไม่มีเนมสเปซแทน เช่น ใช้ mylibCallback แทน mylib.callback

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

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

data-ux_mode

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

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

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

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

data-allowed_parent_origin

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

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

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

ประเภทค่า
string URI โดเมนเดียว "https://example.com"
string array รายการ URI โดเมนที่คั่นด้วยคอมมา "https://news.example.com,https://local.example.com"

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

นอกจากนี้ยังรองรับคำนำหน้าที่เป็นไวลด์การ์ดด้วย ตัวอย่างเช่น "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" จึงถือว่าไม่ถูกต้อง

data-intermediate_iframe_close_callback

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

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

ประเภท ต้องระบุ ตัวอย่าง
function ไม่บังคับ data-intermediate_iframe_close_callback="logBeforeClose"

HTML API ไม่รองรับฟังก์ชัน JavaScript ภายในเนมสเปซ แต่ให้ใช้ฟังก์ชัน JavaScript ส่วนกลางที่ไม่มีเนมสเปซแทน เช่น ใช้ mylibCallback แทน mylib.callback

การสนับสนุนข้อมูล ITP

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

ประเภท ต้องระบุ ตัวอย่าง
boolean ไม่บังคับ data-itp_support="true"

data-login_hint

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

โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบของ OpenID Connect สำหรับ login_hint

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

Data-HD

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

โปรดดูข้อมูลเพิ่มเติมในเอกสารประกอบของ OpenID Connect สำหรับ hd

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

data-use_fedcm_for_prompt

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

ประเภท ต้องระบุ ตัวอย่าง
boolean ไม่บังคับ data-use_fedcm_for_prompt="true"

องค์ประกอบที่มีคลาส "g_id_signin"

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

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

แอตทริบิวต์ข้อมูลภาพ

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

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

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

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

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

ประเภทของปุ่ม ค่าเริ่มต้นคือ standard โปรดดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง มี data-type="icon"

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

ประเภท
standard
ปุ่มที่มีข้อความหรือข้อมูลเฉพาะบุคคล
icon
ปุ่มไอคอนที่ไม่มีข้อความ

ธีมข้อมูล

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

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

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

ธีม
outline
ปุ่มมาตรฐานที่มีพื้นหลังสีขาว ปุ่มไอคอนที่มีพื้นหลังสีขาว ปุ่มที่ปรับเปลี่ยนในแบบของคุณบนพื้นหลังสีขาว
ธีมปุ่มมาตรฐาน
filled_blue
ปุ่มมาตรฐานที่มีพื้นหลังสีน้ำเงิน ปุ่มไอคอนที่มีพื้นหลังสีน้ำเงิน ปุ่มที่ปรับเปลี่ยนในแบบของคุณที่มีพื้นหลังสีน้ำเงิน
ธีมปุ่มที่มีสีน้ำเงิน
filled_black
ปุ่มมาตรฐานที่มีพื้นหลังสีดำ ปุ่มไอคอนที่มีพื้นหลังสีดำ ปุ่มที่ปรับเปลี่ยนในแบบของคุณบนพื้นหลังสีดำ
ธีมปุ่มสีดำ

data-size

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

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

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

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

ข้อความข้อมูล

ข้อความปุ่ม ค่าเริ่มต้นคือ signin_with ข้อความของปุ่มไอคอนที่มีแอตทริบิวต์ data-text ต่างกันไม่มีความแตกต่างกัน ข้อยกเว้นเพียงอย่างเดียวคือเมื่อมีการอ่านข้อความสำหรับการเข้าถึงหน้าจอ

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

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

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

ข้อความ
signin_with
ปุ่มมาตรฐานที่มีป้ายกำกับว่า &quot;ลงชื่อเข้าใช้ด้วย Google&quot; ปุ่มไอคอนที่ไม่มีข้อความที่มองเห็นได้
ข้อความบนปุ่มคือ "ลงชื่อเข้าใช้ด้วย Google"
signup_with
ปุ่มมาตรฐานที่มีป้ายกำกับว่า &quot;ลงชื่อสมัครใช้ด้วย Google&quot; ปุ่มไอคอนที่ไม่มีข้อความที่มองเห็นได้
ข้อความบนปุ่มคือ "ลงชื่อสมัครใช้ด้วย Google"
continue_with
ปุ่มมาตรฐานที่มีป้ายกำกับว่า &quot;ดำเนินการต่อด้วย Google&quot; ปุ่มไอคอนที่ไม่มีข้อความที่มองเห็นได้
ข้อความบนปุ่มคือ "ดำเนินการต่อโดยใช้ Google"
signin
ปุ่มมาตรฐานที่มีป้ายกำกับว่า &quot;ลงชื่อเข้าใช้&quot; ปุ่มไอคอนที่ไม่มีข้อความที่มองเห็นได้
ข้อความบนปุ่มคือ "ลงชื่อเข้าใช้"

รูปร่างข้อมูล

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

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

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

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

การปรับแนวโลโก้ของข้อมูล

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

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

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

logo_alignment
left
ปุ่มมาตรฐานที่มีโลโก้ G ทางด้านซ้าย
ปรับแนวโลโก้ Google ชิดซ้าย
center
ปุ่มมาตรฐานที่มีโลโก้ G อยู่ตรงกลาง
จัดกึ่งกลางโลโก้ Google

ความกว้างของข้อมูล

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

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

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

ภาษาข้อมูล

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

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

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

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ data-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"

การผสานรวมฝั่งเซิร์ฟเวอร์

ปลายทางฝั่งเซิร์ฟเวอร์ของคุณต้องจัดการคำขอ HTTP POST ต่อไปนี้

ปลายทางตัวแฮนเดิลโทเค็นรหัส

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

คำขอ HTTP POST มีข้อมูลต่อไปนี้

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

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

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

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": "Eliza",
  "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 และไม่มีการนำมาใช้ซ้ำ ไม่ควรใช้อีเมลเป็นตัวระบุเนื่องจากบัญชี 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 การลงชื่อเข้าใช้โดยอัตโนมัติของผู้ใช้ที่มีเซสชันอยู่ซึ่งเคยให้ความยินยอมในการแชร์ข้อมูลเข้าสู่ระบบ
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 จากนั้นกดปุ่ม "ยืนยัน" เพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ

ปลายทางของเครื่องจัดการข้อมูลเข้าสู่ระบบรหัสผ่าน

ปลายทางของเครื่องจัดการข้อมูลเข้าสู่ระบบรหัสผ่านจะประมวลผลข้อมูลรับรองของรหัสผ่านที่เครื่องมือจัดการข้อมูลเข้าสู่ระบบเนทีฟดึงมา

คำขอ HTTP POST มีข้อมูลต่อไปนี้

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