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

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

หน้าอ้างอิงนี้จะอธิบายฟีเจอร์ API ของแอตทริบิวต์การลงชื่อเข้าใช้ด้วย Google HTML คุณใช้ 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 ข้าม One Tap หากคุกกี้ที่ระบุมีค่าที่ไม่ว่างเปล่า
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 เปิดใช้งาน One Tap UX ที่อัปเกรดแล้วในเบราว์เซอร์ ITP

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

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

รหัสลูกค้า

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

ประเภท จำเป็น ตัวอย่าง
สตริง ได้ data-client_id="CLIENT_ID.apps.googleusercontent.com"

ข้อมูลอัตโนมัติอัตโนมัติ [data-auto_prompt]

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

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

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

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

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

data-login_uri

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

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

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

ประเภท ไม่บังคับ ตัวอย่าง
URL ค่าเริ่มต้นจะเป็น URI ของหน้าเว็บปัจจุบัน หรือค่าที่คุณระบุ
จะละเว้นเมื่อตั้งค่า data-ux_mode="popup" และ data-callback
data-login_uri="https://www.example.com/login"

ปลายทางการเข้าสู่ระบบต้องจัดการกับคําขอ POST ที่มีคีย์ credential ที่มีค่าโทเค็นรหัสในส่วนเนื้อหา

ตัวอย่างคําขอที่ส่งไปยังข้อมูลเข้าสู่ระบบของคุณมีดังนี้

POST /login HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded

credential=ID_TOKEN

โค้ดเรียกกลับ

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

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

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

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

  • แอตทริบิวต์ 1 ใน 2 รายการเหล่านี้ต้องตั้งค่าสําหรับ Google One Tap และปุ่ม U-Google popup โหมด UX หากมีการตั้งค่าทั้งคู่ แอตทริบิวต์ 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"

รหัสโปรโตคอลข้อมูล

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

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

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

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

โหนดข้อมูล

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

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

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

บริบทข้อมูล

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

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

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

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

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_

แอตทริบิวต์นี้จะกําหนดโฟลว์ 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 ของโดเมนที่คั่นด้วยเครื่องหมายจุลภาค "https://news.example.com,https://local.example.com"

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

นอกจากนี้ยังรองรับคํานําหน้าไวลด์การ์ดด้วย ตัวอย่างเช่น "https://*.example.com" จะตรงกับ example.com และโดเมนย่อยในทุกระดับ (เช่น news.example.com, login.news.example.com) สิ่งที่ต้องคํานึงถึงเมื่อใช้ไวลด์การ์ดมีดังนี้

  • สตริงรูปแบบต้องไม่ประกอบด้วยไวลด์การ์ดและโดเมนระดับบนสุดเท่านั้น ตัวอย่างเช่น https://*.com และ https://*.co.uk ไม่ถูกต้อง "https://*.example.com" จะตรงกับ example.com และโดเมนย่อยตามที่ระบุไว้ข้างต้น คุณยังใช้รายการที่คั่นด้วยคอมมาเพื่อแสดงโดเมนต่างๆ 2 โดเมนได้อีกด้วย ตัวอย่างเช่น "https://example1.com,https://*.example2.com" จะตรงกับโดเมน example1.com, example2.com และโดเมนย่อยของ example2.com
  • โดเมนไวลด์การ์ดต้องขึ้นต้นด้วย https:// ในรูปแบบที่ปลอดภัย "*.example.com" จะถือว่าไม่ถูกต้อง

data-intermediate_iframe_close_callback

ลบล้างการทํางานเริ่มต้นของ iframe ระดับกลางเมื่อผู้ใช้ปิด 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 โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้

ประเภท จำเป็น ตัวอย่าง
บูลีน ไม่บังคับ data-itp_support="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 ข้อความปุ่มจะแสดงผลเป็นภาษาที่ตั้งค่าไว้ในแอตทริบิวต์นี้

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

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

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

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

ประเภท จำเป็น ตัวอย่าง
สตริง ได้ data-type="icon"

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

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

ธีมข้อมูล

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

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

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

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

ขนาดข้อมูล

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ภาษา

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

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

ประเภท จำเป็น ตัวอย่าง
สตริง ไม่บังคับ data-locale="zh_CN"

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

ปลายทางฝั่งเซิร์ฟเวอร์ของคุณต้องจัดการคําขอ 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"
}

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

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

  • พบเซสชันที่มีอยู่หรือผู้ใช้หรือเลือกลงชื่อเข้าใช้บัญชี Google เพื่อสร้างเซสชันใหม่

  • ก่อนที่จะแชร์ข้อมูลเข้าสู่ระบบของโทเค็นรหัสกับแอป ผู้ใช้จะดําเนินการอย่างใดอย่างหนึ่งก็ได้

    • กดปุ่มยืนยันเพื่อให้สิทธิ์ในการแชร์ข้อมูลรับรอง หรือ
    • ได้ให้คํายินยอมก่อนหน้านี้และใช้ "เลือกบัญชี" เพื่อเลือกบัญชี Google

ค่าของช่องนี้เป็นประเภทใดประเภทหนึ่ง

ค่า คำอธิบาย
auto การลงชื่อเข้าใช้ของผู้ใช้โดยอัตโนมัติด้วยเซสชันที่มีอยู่ซึ่งเคยให้คํายินยอมในการแชร์ข้อมูลเข้าสู่ระบบแล้ว
user ผู้ใช้ที่มีเซสชันเดิมซึ่งเคยให้คํายินยอมอยู่แล้ว แตะปุ่ม One ' ดําเนินการต่อเป็น' เพื่อแชร์ข้อมูลรับรอง
user_1tap ผู้ใช้ที่มีเซสชันอยู่แล้วได้กดปุ่ม One Tap 'ดําเนินการต่อในชื่อ' เพื่อขอความยินยอมและแชร์ข้อมูลรับรอง ใช้กับ Chrome v75 ขึ้นไปเท่านั้น
user_2tap ผู้ใช้ที่ไม่มีเซสชันที่มีอยู่กดปุ่ม One Tap 'ดําเนินการต่อเป็น' เพื่อเลือกบัญชี แล้วกดปุ่มยืนยันในหน้าต่างป๊อปอัปเพื่อให้สิทธิ์และแชร์ข้อมูลรับรอง ใช้กับเบราว์เซอร์ที่ไม่ใช่ Chromium
btn ผู้ใช้ที่มีเซสชันเดิมซึ่งเคยให้คํายินยอม กดปุ่มลงชื่อเข้าใช้ด้วย Google และได้เลือกบัญชี Google จาก 'เลือกบัญชี&#39 เพื่อแชร์ข้อมูลรับรอง
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 วิธีเลือกข้อมูลรับรอง