ลงชื่อเข้าใช้ด้วยเอกสารอ้างอิง 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 Tap
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 การแจ้งเตือนสถานะข้อความแจ้ง
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

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

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

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

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

ประเภท จำเป็น ตัวอย่าง
string ใช่ data-client_id="CLIENT_ID.apps.googleusercontent.com"

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

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

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

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

  • ต้องตั้งค่าหนึ่งในแอตทริบิวต์ 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 ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

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

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

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

ประเภท จำเป็น ตัวอย่าง
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 ตัวกลาง โดย One Tap จะทำงาน ในโหมด 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 ค่าเริ่มต้นคือ "เท็จ" โปรดดูข้อมูลเพิ่มเติมในหน้าย้ายข้อมูลไปยัง FedCM

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

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

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

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

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

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

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

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

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

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

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

data-click_listener

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

  <script>
    function onClickHandler(){
      console.log("Sign in with Google button clicked...")
    }
  </script>
  .....
  <div class="g_id_signin"
      data-size="large"
      data-theme="outline"
      data-click_listener="onClickHandler">
  </div>

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

data-state

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

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

ประเภท จำเป็น ตัวอย่าง
string ไม่บังคับ data-state="button 1"

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

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

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

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

คำขอ HTTP POST ประกอบด้วยข้อมูลต่อไปนี้

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

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

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

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

state

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

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

ปลายทางตัวแฮนเดิลข้อมูลเข้าสู่ระบบของรหัสผ่าน

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

คำขอ HTTP POST ประกอบด้วยข้อมูลต่อไปนี้

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