ลงชื่อเข้าใช้ด้วยเอกสารอ้างอิง 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 ข้ามการแตะครั้งเดียวหากคุกกี้ที่ระบุมีค่าที่ไม่ว่างเปล่า
data-nonce สตริงแบบสุ่มสำหรับโทเค็นรหัส
data-context ชื่อและข้อความในข้อความแจ้งของ One Tap
data-moment_callback ชื่อฟังก์ชันของ Listener การแจ้งเตือนสถานะ UI ของข้อความแจ้ง
data-state_cookie_domain หากจำเป็นต้องเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังแอตทริบิวต์นี้เพื่อให้ใช้คุกกี้ที่แชร์รายการเดียว
data-ux_mode ขั้นตอน UX ของปุ่มลงชื่อเข้าใช้ด้วย 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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
string ได้ data-client_id="CLIENT_ID.apps.googleusercontent.com"

ข้อความแจ้งข้อมูลอัตโนมัติ

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

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

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

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

  • โดยต้องตั้งค่า 1 ใน 2 แอตทริบิวต์นี้สำหรับ Google One Tap และปุ่ม Google Sign-In 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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
string ไม่บังคับ 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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
string ไม่บังคับ 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 ขององค์ประกอบคอนเทนเนอร์ หากไม่ได้ตั้งค่าไว้ ข้อความแจ้ง การแตะครั้งเดียวจะปรากฏที่มุมขวาบนของหน้าต่าง โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

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

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

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

ค่าที่ได้จากการใช้ข้อมูล

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

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

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

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

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

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

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

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

การเรียกกลับข้อมูลช่วงเวลา

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

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

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

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

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

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

data-ux_mode

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

ประเภท ต้องระบุ ตัวอย่าง
string ไม่บังคับ 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 ไม่ถูกต้อง การเริ่มต้นโหมด iframe ระดับกลางของ One Tap จะล้มเหลวและหยุดทำงาน

นอกจากนี้ยังรองรับการใช้ไวลด์การ์ดนำหน้าได้ด้วย ตัวอย่างเช่น "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 ที่เป็นสื่อกลางเมื่อผู้ใช้ปิด One Tap ด้วยตนเองโดยแตะปุ่ม "X" ใน UI ของ One Tap ลักษณะการทำงานเริ่มต้นคือ นำ iframe ตัวกลางออกจาก DOM ทันที

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

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

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

data-itp_support

ช่องนี้จะระบุว่าควรเปิดใช้ 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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
string ได้ data-type="icon"

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

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

ธีมข้อมูล

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

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

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

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

data-size

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

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

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

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

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

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

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

ประเภท ต้องระบุ ตัวอย่าง
string ไม่บังคับ 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 ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

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

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

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

การปรับแนวโลโก้

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

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

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

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

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

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

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

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

ภาษาข้อมูล

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

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

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

ประเภท ต้องระบุ ตัวอย่าง
string ไม่บังคับ 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_verified อาจเป็นจริงได้ตามที่ Google ยืนยันผู้ใช้ในตอนแรกเมื่อสร้างบัญชี Google อย่างไรก็ตาม การเป็นเจ้าของบัญชีอีเมลของบุคคลที่สามอาจมีการเปลี่ยนแปลงหลังจากนั้น

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

select_by

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

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

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

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

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