ลงชื่อเข้าใช้ด้วยเอกสารอ้างอิง 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 ชื่อและคำในข้อความแจ้งแบบ One Tap
data-moment_callback ชื่อฟังก์ชันของตัวฟังการแจ้งเตือนสถานะ 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 การเปลี่ยนเส้นทาง

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

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

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

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

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

หากค่าของแอตทริบิวต์ 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 และโดเมนย่อยของ 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

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

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

data-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

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

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

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

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

data-width

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