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

หน้านี้อธิบาย API แอตทริบิวต์ข้อมูล HTML ของการลงชื่อเข้าใช้ด้วย Google คุณสามารถใช้ API เพื่อแสดงข้อความแจ้งการแตะครั้งเดียวหรือปุ่มลงชื่อเข้าใช้ด้วย Google ในหน้าเว็บ

องค์ประกอบที่มีรหัส "g_id_onload"

คุณสามารถใส่แอตทริบิวต์ข้อมูลการลงชื่อเข้าใช้ด้วย Google ในองค์ประกอบที่มองเห็นได้หรือมองไม่เห็น เช่น <div> และ <span> ข้อกำหนดเพียงอย่างเดียวคือต้องตั้งค่ารหัสองค์ประกอบ เป็น g_id_onload อย่าวางรหัสนี้ในองค์ประกอบหลายรายการ

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

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

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

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

data-client_id

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

data-auto_prompt

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

data-auto_select

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

data-login_uri

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

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

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

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

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

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

data-callback

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

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

data-native_callback

แอตทริบิวต์นี้คือชื่อของฟังก์ชัน JavaScript ที่จัดการรหัสผ่าน ข้อมูลเข้าสู่ระบบที่ส่งคืนจากเครื่องมือจัดการข้อมูลเข้าสู่ระบบในตัวของเบราว์เซอร์ หากคุณตั้งค่าแอตทริบิวต์ data-native_login_uri หรือแอตทริบิวต์ data-native_callback ไลบรารี JavaScript จะกลับไปใช้เครื่องมือจัดการข้อมูลเข้าสู่ระบบในตัว เมื่อไม่มีเซสชัน Google คุณไม่ได้รับอนุญาตให้ตั้งค่าทั้ง data-native_callback และ data-native_login_uri ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

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

data-native_id_param

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

data-native_password_param

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

data-cancel_on_tap_outside

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

data-prompt_parent_id

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

data-skip_prompt_cookie

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

data-nonce

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

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

data-context

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

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

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

data-moment_callback

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

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

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

data-state_cookie_domain

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

data-ux_mode

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

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

data-allowed_parent_origin

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

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

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

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

data-itp_support

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

data-login_hint

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

ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ OpenID Connect สำหรับ login_hint

data-hd

เมื่อผู้ใช้มีหลายบัญชีและควรลงชื่อเข้าใช้ด้วยบัญชี Workspace เท่านั้น ให้ใช้ตัวเลือกนี้เพื่อระบุคำแนะนำชื่อโดเมนให้ Google เมื่อสำเร็จแล้ว บัญชีผู้ใช้ ที่แสดงในระหว่างการเลือกบัญชีจะจำกัดเฉพาะโดเมนที่ระบุ ค่าไวลด์การ์ด: * จะแสดงเฉพาะบัญชี Workspace แก่ผู้ใช้และไม่รวม บัญชีผู้ใช้ทั่วไป ([email protected]) ในระหว่างการเลือกบัญชี

ดูข้อมูลเพิ่มเติมได้ในเอกสารประกอบ OpenID Connect สำหรับ hd

data-use_fedcm_for_prompt

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

data-use_fedcm_for_button

ฟิลด์นี้จะกำหนดว่าจะใช้ UX ของปุ่ม FedCM ใน Chrome (เดสก์ท็อป M125 ขึ้นไป และ Android M128 ขึ้นไป) หรือไม่ ค่าเริ่มต้นคือ false ดูข้อมูลเพิ่มเติมได้ในตารางต่อไปนี้

data-button_auto_select

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

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

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

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

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

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

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

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

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

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

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

ประเภท
standard
icon

data-theme

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

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

ธีม
outline
filled_blue
filled_black

data-size

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

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

ขนาด
large
medium
small

data-text

ข้อความบนปุ่ม ค่าเริ่มต้นคือ signin_with ปุ่มไอคอนที่มีแอตทริบิวต์ data-text แตกต่างกันไม่มีความแตกต่างด้านภาพสำหรับข้อความ มีข้อยกเว้นเฉพาะในกรณีที่อ่านข้อความเพื่อการช่วยเหลือพิเศษของหน้าจอ เท่านั้น

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

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

ข้อความ
signin_with
signup_with
continue_with
signin

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

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

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

รูปร่าง
rectangular
pill
circle
square

data-logo_alignment

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

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

logo_alignment
left
center

data-width

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

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

data-locale

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

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

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

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>

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

data-state

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

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

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

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

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

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

ตัวอย่างคำขอไปยังปลายทางการเข้าสู่ระบบ

POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
Cookie: g_csrf_token=<RANDOM_STRING>
Host: www.example.com

credential=<JWT_ENCODED_ID_TOKEN>&g_csrf_token=<RANDOM_STRING>

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

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

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

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": "[email protected]", // 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 ทั้งหมด และไม่มีการนำกลับมาใช้ใหม่

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

g_csrf_token

โทเค็นสถานะป้องกันการปลอมแปลง นี่คือโทเค็นการปลอมแปลงคำขอแบบข้ามเว็บไซต์ (CSRF) ที่สร้างโดยไลบรารี gsi/client ระบบจะรวมค่าแบบสุ่มไว้ทั้งในรูปแบบคุกกี้และพารามิเตอร์คำขอในเนื้อหาของเพย์โหลด POST หากค่าทั้ง 2 รายการนี้ไม่ตรงกันเมื่อประมวลผลคำขอในเซิร์ฟเวอร์ ระบบจะถือว่าคำขอไม่ถูกต้อง

select_by

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

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

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

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

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

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

รัฐ

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

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

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

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

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