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

หน้าข้อมูลอ้างอิงนี้อธิบายเกี่ยวกับแอตทริบิวต์ข้อมูล HTML ของฟีเจอร์ลงชื่อเข้าใช้ด้วย Google คุณสามารถใช้ API เพื่อแสดงข้อความแจ้งแบบแตะครั้งเดียวหรือปุ่มลงชื่อเข้าใช้ด้วย 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 ขององค์ประกอบคอนเทนเนอร์พรอมต์การชำระเงินแบบไม่ต้องสัมผัส
data-skip_prompt_cookie ข้ามการแตะครั้งเดียวหากคุกกี้ที่ระบุมีค่าที่ไม่ใช่ค่าว่าง
data-nonce สตริงแบบสุ่มสําหรับโทเค็นระบุตัวตน
data-context ชื่อและคำในข้อความแจ้งด้วยการแตะเพียงครั้งเดียว
data-moment_callback ชื่อฟังก์ชันของ Listener การแจ้งเตือนสถานะ UI พรอมต์
data-state_cookie_domain หากต้องการเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่งโดเมนหลักไปยังแอตทริบิวต์นี้เพื่อใช้คุกกี้ที่แชร์รายการเดียว
data-ux_mode ขั้นตอน UX ของปุ่มลงชื่อเข้าใช้ด้วย Google
data-allowed_parent_origin ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง One Tap จะทำงานในโหมด iframe ระดับกลางหากมีแอตทริบิวต์นี้
data-intermediate_iframe_close_callback ลบล้างลักษณะการทำงานเริ่มต้นของ iframe ระดับกลางเมื่อผู้ใช้ปิด One Tap ด้วยตนเอง
data-itp_support เปิดใช้ UX แบบแตะครั้งเดียวที่อัปเกรดแล้วในเบราว์เซอร์ ITP
data-login_hint ข้ามการเลือกบัญชีด้วยการให้คำแนะนำผู้ใช้
data-hd จำกัดการเลือกบัญชีตามโดเมน
data-use_fedcm_for_prompt อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้ของผู้ใช้และเป็นสื่อกลางในการลงชื่อเข้าใช้ระหว่างเว็บไซต์ของคุณกับ Google
data-enable_redirect_uri_validation เปิดใช้โฟลว์การเปลี่ยนเส้นทางของปุ่มที่เป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง

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

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

data-client_id

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

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

data-auto_prompt

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

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

data-auto_select

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

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

data-login_uri

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

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

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

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

data-callback

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

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

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

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

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

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

data-prompt_parent_id

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

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

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

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

data-nonce

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

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

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

data-context

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

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

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

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

data-moment_callback

แอตทริบิวต์นี้เป็นชื่อฟังก์ชันของโปรแกรมฟังการแจ้งเตือนสถานะ 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 แอตทริบิวต์นี้ไม่มีผลต่อ One Tap UX ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

ประเภท ต้องระบุ ตัวอย่าง
สตริง ไม่บังคับ 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 ของโดเมนที่คั่นด้วยคอมมา &quot;https://news.example.com,https://local.example.com&quot;

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

นอกจากนี้ ระบบยังรองรับคำนำหน้าไวลด์การ์ดด้วย เช่น "https://*.example.com" จะตรงกับ 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 การชำระเงินแบบไม่ต้องสัมผัสออกก่อนที่จะเรียกใช้การติดต่อกลับ

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

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

data-itp_support

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

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

ข้อมูล-login_hint

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

ดูข้อมูลเพิ่มเติมได้ที่เอกสารประกอบ 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

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

data-enable_redirect_uri_validation

เปิดใช้ขั้นตอนการเปลี่ยนเส้นทางปุ่มที่เป็นไปตามกฎการตรวจสอบ URI การเปลี่ยนเส้นทาง

ประเภท ต้องระบุ ตัวอย่าง
บูลีน ไม่บังคับ data-enable_redirect_uri_validation="true"

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

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

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

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

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

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

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

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

data-type

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

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

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

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

data-theme

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

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

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

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

data-size

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

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

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

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

data-text

ข้อความบนปุ่ม ค่าเริ่มต้นคือ 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; ปุ่มไอคอนที่ไม่มีข้อความที่มองเห็นได้
ข้อความบนปุ่มคือ "ลงชื่อเข้าใช้"

data-shape

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

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

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

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

data-logo_alignment (ข้อมูลโลโก้_alignment)

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

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

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

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

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

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

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

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

data-locale

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

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

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

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

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

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

select_by

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

  • ผู้ใช้กดปุ่ม One Tap หรือลงชื่อเข้าใช้ด้วย 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 เวอร์ชัน 75 ขึ้นไปเท่านั้น
user_2tap ผู้ใช้ที่ไม่มีเซสชันที่มีอยู่กดปุ่ม "ดำเนินการต่อในฐานะ" ของ One Tap เพื่อเลือกบัญชี แล้วกดปุ่มยืนยันในหน้าต่างป๊อปอัปเพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ ใช้กับเบราว์เซอร์ที่ไม่อิงตาม Chromium
btn ผู้ใช้ที่มีเซสชันอยู่แล้วซึ่งเคยให้ความยินยอมได้กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และเลือกบัญชี Google จาก "เลือกบัญชี" เพื่อแชร์ข้อมูลเข้าสู่ระบบ
btn_confirm ผู้ใช้ที่มีเซสชันที่มีอยู่กดปุ่มลงชื่อเข้าใช้ด้วย Google และกดปุ่มยืนยันเพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ
btn_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วและเคยให้ความยินยอม ให้กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เพื่อเลือกบัญชี Google และแชร์ข้อมูลเข้าสู่ระบบ
btn_confirm_add_session ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วให้กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เพื่อเลือกบัญชี Google จากนั้นกดปุ่ม "ยืนยัน" เพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ

รัฐ

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

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

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

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

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

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