หน้าอ้างอิงนี้อธิบายเกี่ยวกับ Sign-In JavaScript API คุณใช้ API นี้ได้ เพื่อแสดงข้อความแจ้งด้วยการแตะเพียงครั้งเดียวหรือปุ่มลงชื่อเข้าใช้ด้วย Google ในหน้าเว็บ
วิธีการ: google.accounts.id.initialize
เมธอด google.accounts.id.initialize
จะเริ่มต้นฟีเจอร์ลงชื่อเข้าใช้ด้วย Google
ตามออบเจ็กต์การกำหนดค่า ดูตัวอย่างโค้ดต่อไปนี้ของ
วิธีการ:
google.accounts.id.initialize(IdConfiguration)
ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.initialize
ด้วยฟังก์ชัน onload
:
<script>
window.onload = function () {
google.accounts.id.initialize({
client_id: 'YOUR_GOOGLE_CLIENT_ID',
callback: handleCredentialResponse
});
google.accounts.id.prompt();
};
</script>
เมธอด google.accounts.id.initialize
จะสร้างไคลเอ็นต์ฟีเจอร์ลงชื่อเข้าใช้ด้วย Google
อินสแตนซ์ที่โมดูลทั้งหมดในหน้าเว็บเดียวกันใช้โดยนัยได้
- คุณต้องเรียกใช้เมธอด
google.accounts.id.initialize
เพียงครั้งเดียวเท่านั้น หากคุณใช้หลายโมดูล (เช่น การแตะครั้งเดียว ปุ่มที่ปรับเปลี่ยนในแบบของคุณ การเพิกถอน เป็นต้น) ในหน้าเว็บเดียวกัน - หากคุณเรียกใช้เมธอด
google.accounts.id.initialize
หลายครั้ง เฉพาะการกำหนดค่าในการเรียกครั้งล่าสุดเท่านั้นที่จะมีการจดจำและใช้
คุณได้รีเซ็ตการกำหนดค่าเมื่อใดก็ตามที่เรียกใช้ฟังก์ชัน
google.accounts.id.initialize
เมธอด และวิธีที่ตามมาทั้งหมดรวมอยู่ในเมธอดเดียวกัน
จะใช้การกำหนดค่าใหม่ทันที
ประเภทข้อมูล: IdConfiguration
ตารางต่อไปนี้แสดงช่องและคำอธิบายของ IdConfiguration
ประเภทข้อมูล:
ช่อง | |
---|---|
client_id |
รหัสไคลเอ็นต์ของแอปพลิเคชัน |
auto_select |
เปิดใช้การเลือกอัตโนมัติ |
callback |
ฟังก์ชัน JavaScript ที่จัดการโทเค็นรหัส Google One Tap และ
ปุ่ม "ลงชื่อเข้าใช้ด้วย Google" popup โหมด UX จะใช้สิ่งนี้
|
login_uri |
URL ปลายทางของการเข้าสู่ระบบ ปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
โหมด UX ของ redirect ใช้แอตทริบิวต์นี้ |
native_callback |
ฟังก์ชัน JavaScript ที่จัดการข้อมูลเข้าสู่ระบบของรหัสผ่าน |
cancel_on_tap_outside |
ยกเลิกข้อความแจ้งหากผู้ใช้คลิกภายนอกข้อความแจ้ง |
prompt_parent_id |
รหัส DOM ขององค์ประกอบคอนเทนเนอร์ของข้อความแจ้ง One Tap |
nonce |
สตริงแบบสุ่มสำหรับโทเค็นรหัส |
context |
ชื่อและคำในข้อความแจ้งด้วยการแตะเพียงครั้งเดียว |
state_cookie_domain |
หากคุณต้องการเรียกใช้ One Tap ในโดเมนหลักและโดเมนย่อย ส่งโดเมนหลักไปยังฟิลด์นี้ เพื่อให้คุกกี้ที่แชร์รายการเดียว |
ux_mode |
ขั้นตอน UX ของปุ่มลงชื่อเข้าใช้ด้วย Google |
allowed_parent_origin |
ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง แตะครั้งเดียว จะทำงานในโหมด iframe ระดับกลาง หากมีฟิลด์นี้ |
intermediate_iframe_close_callback |
ลบล้างการทำงานเริ่มต้นของ iframe ระดับกลางเมื่อผู้ใช้ทำด้วยตนเอง ปิด One Tap |
itp_support |
เปิดใช้ One Tap UX ที่อัปเกรดบนเบราว์เซอร์ ITP |
login_hint |
ข้ามการเลือกบัญชีด้วยการให้คำแนะนำผู้ใช้ |
hd |
จำกัดการเลือกบัญชีตามโดเมน |
use_fedcm_for_prompt |
อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้ของผู้ใช้และเป็นสื่อกลาง ขั้นตอนการลงชื่อเข้าใช้ระหว่างเว็บไซต์ของคุณกับ Google |
client_id
ฟิลด์นี้คือรหัสไคลเอ็นต์ของแอปพลิเคชันของคุณ ซึ่งเราค้นพบและสร้างขึ้นใน คอนโซล Google Cloud โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ใช่ | client_id: "CLIENT_ID.apps.googleusercontent.com" |
auto_select
ช่องนี้กำหนดว่าระบบจะส่งคืนโทเค็นรหัสโดยอัตโนมัติโดยไม่มีผู้ใช้หรือไม่
การโต้ตอบเมื่อมีเซสชันของ Google เพียงรายการเดียวที่อนุมัติแอปของคุณ
ก่อนหน้านี้ ค่าเริ่มต้นคือ false
ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ข้อมูล:
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
boolean | ไม่บังคับ | auto_select: true |
Callback
ช่องนี้คือฟังก์ชัน JavaScript ที่จัดการโทเค็นรหัสที่แสดงผลจาก
ข้อความแจ้งของ One Tap หรือหน้าต่างป๊อปอัป ต้องระบุแอตทริบิวต์นี้หาก Google
ระบบจะใช้โหมด UX popup
ด้วยการแตะครั้งเดียวหรือปุ่มลงชื่อเข้าใช้ด้วย Google โปรดดู
ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
ฟังก์ชัน | จำเป็นสำหรับ One Tap และ popup UX Mode |
callback: handleResponse |
login_uri
แอตทริบิวต์นี้คือ URI ของปลายทางการเข้าสู่ระบบ
ค่าต้องตรงกับ URI การเปลี่ยนเส้นทางที่ได้รับอนุญาตรายการใดรายการหนึ่งสำหรับ OAuth ไคลเอ็นต์ 2.0 ที่คุณกำหนดค่าไว้ ในคอนโซล Google Cloud และต้องสอดคล้องกับการตรวจสอบ URI การเปลี่ยนเส้นทาง กฎเกณฑ์
แอตทริบิวต์นี้อาจถูกละไว้หากหน้าปัจจุบันคือหน้าเข้าสู่ระบบของคุณ ในกรณีที่ข้อมูลเข้าสู่ระบบโพสต์ไว้ในหน้านี้โดยค่าเริ่มต้น
การตอบกลับของข้อมูลเข้าสู่ระบบของโทเค็นรหัสมีการโพสต์ไปยังปลายทางการเข้าสู่ระบบของคุณเมื่อผู้ใช้ คลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และใช้โหมด UX เปลี่ยนเส้นทาง
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ไม่บังคับ | ตัวอย่าง |
---|---|---|
URL | ค่าเริ่มต้นคือ URI ของหน้าเว็บปัจจุบัน หรือค่าที่คุณระบุ ใช้เมื่อตั้งค่า ux_mode: "redirect" เท่านั้น |
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
native_callback
ช่องนี้คือชื่อของฟังก์ชัน JavaScript ที่จัดการรหัสผ่าน ข้อมูลเข้าสู่ระบบที่แสดงผลจากเครื่องมือจัดการข้อมูลเข้าสู่ระบบดั้งเดิมของเบราว์เซอร์ โปรดดู ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
ฟังก์ชัน | ไม่บังคับ | native_callback: handleResponse |
cancel_on_tap_outside
ช่องนี้กำหนดว่าจะยกเลิกคำขอ One Tap หรือไม่หากผู้ใช้คลิก
นอกข้อความแจ้ง ค่าเริ่มต้นคือ true
คุณสามารถปิดใช้งานได้หาก
ค่าเป็น false
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
boolean | ไม่บังคับ | cancel_on_tap_outside: false |
prompt_parent_id
แอตทริบิวต์นี้ตั้งค่ารหัส DOM ขององค์ประกอบคอนเทนเนอร์ หากไม่ได้ตั้งค่า พารามิเตอร์ ข้อความแจ้งด้วยการแตะเพียงครั้งเดียวจะปรากฏขึ้นที่มุมขวาบนของหน้าต่าง โปรดดู ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | prompt_parent_id: 'parent_id' |
ค่าที่ได้จากการสุ่ม
ช่องนี้เป็นสตริงแบบสุ่มที่โทเค็นรหัสใช้เพื่อป้องกันการโจมตีซ้ำ โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | nonce: "biaqbm70g23" |
ความยาว Nonce จะจำกัดอยู่ที่ขนาด JWT สูงสุดที่สภาพแวดล้อมของคุณรองรับ และข้อจำกัดขนาด HTTP ของเบราว์เซอร์และเซิร์ฟเวอร์แต่ละรายการ
บริบท
ช่องนี้จะเปลี่ยนข้อความของชื่อและข้อความในพรอมต์ด้วย One Tap โปรดดู ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | context: "use" |
ตารางต่อไปนี้แสดงบริบทและคำอธิบายทั้งหมดที่ใช้ได้
บริบท | |
---|---|
signin |
"ลงชื่อเข้าใช้ด้วย Google" |
signup |
"ลงชื่อสมัครใช้ด้วย Google" |
use |
"ใช้กับ Google" |
state_cookie_domain
หากต้องการแสดง One Tap ในโดเมนหลักและโดเมนย่อย ให้ส่ง โดเมนหลักไปยังฟิลด์นี้เพื่อให้ใช้คุกกี้สถานะที่ใช้ร่วมกันรายการเดียว โปรดดู ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | state_cookie_domain: "example.com" |
ux_mode
ใช้ช่องนี้เพื่อตั้งค่าขั้นตอน UX ที่ใช้โดยปุ่มลงชื่อเข้าใช้ด้วย Google
ค่าเริ่มต้นคือ popup
แอตทริบิวต์นี้ไม่มีผลต่อ One Tap UX โปรดดู
ตารางต่อไปนี้สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | ux_mode: "redirect" |
ตารางต่อไปนี้แสดงโหมด UX ที่พร้อมใช้งานและคำอธิบาย
โหมด UX | |
---|---|
popup |
ดำเนินการขั้นตอนการลงชื่อเข้าใช้ UX ในหน้าต่างป๊อปอัป |
redirect |
ดำเนินการขั้นตอนการลงชื่อเข้าใช้ UX โดยการเปลี่ยนเส้นทางหน้าเว็บแบบเต็ม |
allowed_parent_origin
ต้นทางที่ได้รับอนุญาตให้ฝัง iframe ระดับกลาง One Tap ทำงานอยู่ ในโหมด iframe ระดับกลาง หากมีช่องนี้อยู่ โปรดดูข้อมูลต่อไปนี้ สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
อาร์เรย์สตริงหรือสตริง | ไม่บังคับ | allowed_parent_origin: "https://example.com" |
ตารางต่อไปนี้แสดงประเภทค่าที่รองรับและคำอธิบาย
ประเภทค่า | ||
---|---|---|
string |
URI โดเมนเดียว | "https://example.com" |
string array |
อาร์เรย์ของ URI ของโดเมน | ["https://news.example.com", "https://local.example.com"] |
นอกจากนี้ยังรองรับการใช้ไวลด์การ์ดด้วย เช่น "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"
ถือว่าไม่ถูกต้อง
หากค่าของช่อง allowed_parent_origin
ไม่ถูกต้อง การแตะเพียงครั้งเดียว
การเริ่มต้นโหมด iframe ระดับกลางจะล้มเหลวและหยุดทำงาน
intermediate_iframe_close_callback
ลบล้างการทำงานเริ่มต้นของ iframe ระดับกลางเมื่อผู้ใช้ปิด One ด้วยตนเอง แตะโดยแตะ "X" ใน UI ของ One Tap ลักษณะการทำงานเริ่มต้นคือการ นำ iframe ระดับกลางออกจาก DOM ทันที
ช่อง intermediate_iframe_close_callback
จะมีผลในช่วงกลางเท่านั้น
โหมด iframe และส่งผลต่อ iframe ระดับกลางเท่านั้น แทนที่จะเป็น
iframe ของ One Tap UI ของ One Tap จะถูกนำออกก่อนที่จะมีการเรียกใช้ Callback
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
ฟังก์ชัน | ไม่บังคับ | intermediate_iframe_close_callback: logBeforeClose |
itp_support
ฟิลด์นี้จะกำหนดว่า
One Tap UX ที่อัปเกรด
ควรเปิดใช้งานในเบราว์เซอร์ที่สนับสนุน Intelligent Tracking Prevention
(ITP) ค่าเริ่มต้นคือ false
ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ข้อมูล:
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
boolean | ไม่บังคับ | itp_support: true |
login_hint
หากแอปพลิเคชันของคุณรู้ล่วงหน้าว่าผู้ใช้รายใดควรลงชื่อเข้าใช้ ให้คำแนะนำการเข้าสู่ระบบแก่ Google เมื่อทำสำเร็จ ระบบจะข้ามการเลือกบัญชี ค่าที่ยอมรับ ได้แก่ อีเมลหรือค่าในช่อง sub โทเค็นรหัส
สำหรับข้อมูลเพิ่มเติม โปรดดูที่ช่อง login_hint ใน OpenID Connect เอกสารประกอบ
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง อีเมล หรือค่าจากโทเค็นรหัส
sub |
ไม่บังคับ | login_hint: 'elisa.beckett@gmail.com' |
HD
เมื่อผู้ใช้มีหลายบัญชีและควรลงชื่อเข้าใช้ด้วย Workspace เท่านั้น
ใช้ข้อมูลนี้เพื่อให้คำแนะนำชื่อโดเมนแก่ Google เมื่อทำสำเร็จ ผู้ใช้
บัญชีที่แสดงระหว่างการเลือกบัญชีจะถูกจำกัดไว้เฉพาะโดเมนที่ให้ไว้เท่านั้น
ค่าไวลด์การ์ด: *
เสนอเฉพาะบัญชี Workspace ให้แก่ผู้ใช้และยกเว้น
บัญชีผู้ใช้ทั่วไป (user@gmail.com) ในระหว่างการเลือกบัญชี
สำหรับข้อมูลเพิ่มเติม โปรดดูที่ช่อง hd ในเอกสารประกอบของ ISRC Connect
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง ชื่อโดเมนที่สมบูรณ์ในตัวเองหรือ * | ไม่บังคับ | hd: '*' |
use_fedcm_for_prompt
อนุญาตให้เบราว์เซอร์ควบคุมข้อความแจ้งให้ลงชื่อเข้าใช้ของผู้ใช้และเป็นสื่อกลางในการลงชื่อเข้าใช้ ระหว่างเว็บไซต์กับ Google ค่าเริ่มต้นคือ "เท็จ" โปรดดูย้ายข้อมูลไปยัง FedCM เพื่อดูข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
boolean | ไม่บังคับ | use_fedcm_for_prompt: true |
วิธีการ: google.accounts.id.prompt
เมธอด google.accounts.id.prompt
จะแสดงข้อความแจ้งด้วยการแตะเพียงครั้งเดียวหรือ
เครื่องมือจัดการข้อมูลเข้าสู่ระบบแบบเนทีฟของเบราว์เซอร์หลังจากที่เรียกใช้เมธอด initialize()
ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด
google.accounts.id.prompt(/**
@type{(function(!PromptMomentNotification):void)=} */ momentListener)
โดยปกติแล้ว เราจะเรียกเมธอด prompt()
เมื่อโหลดหน้าเว็บ เนื่องจากเซสชัน
สถานะและการตั้งค่าของผู้ใช้ในฝั่ง Google นั้น UI ข้อความแจ้ง One Tap อาจไม่
แสดงอยู่ หากต้องการรับการแจ้งเตือนเกี่ยวกับสถานะ UI ในช่วงเวลาต่างๆ ให้ส่ง
เพื่อรับการแจ้งเตือนสถานะ UI
การแจ้งเตือนจะเริ่มทำงานในช่วงเวลาต่อไปนี้
- แสดงช่วงเวลา: จะเกิดขึ้นหลังจากเรียกเมธอด
prompt()
จะมีค่าบูลีนเพื่อระบุว่า UI ปรากฏขึ้นหรือไม่ ขณะที่ข้าม: เหตุการณ์นี้จะเกิดขึ้นเมื่อข้อความแจ้งของ One Tap ปิดโดยระบบอัตโนมัติ ยกเลิก ยกเลิกด้วยตนเอง หรือเมื่อ Google ไม่ออกเอกสารรับรองให้ เช่น เมื่อเซสชันที่เลือกออกจากระบบ Google แล้ว
ในกรณีเหล่านี้ เราขอแนะนำให้คุณไปยังข้อมูลประจำตัวถัดไป ผู้ให้บริการเครือข่าย ถ้ามี
ช่วงเวลาที่ปิด: เกิดขึ้นเมื่อ Google เรียกข้อมูล ข้อมูลเข้าสู่ระบบหรือผู้ใช้ต้องการหยุดขั้นตอนการเรียกข้อมูลเข้าสู่ระบบ สำหรับ เช่น เมื่อผู้ใช้เริ่มป้อนชื่อผู้ใช้และรหัสผ่านใน กล่องโต้ตอบการเข้าสู่ระบบ คุณสามารถเรียกใช้เมธอด
google.accounts.id.cancel()
เพื่อปิด ข้อความแจ้งของ One Tap และเรียกใช้ช่วงเวลาที่ปิดไป
ตัวอย่างโค้ดต่อไปนี้ติดตั้งใช้งานช่วงเวลาที่ข้าม
<script>
window.onload = function () {
google.accounts.id.initialize(...);
google.accounts.id.prompt((notification) => {
if (notification.isNotDisplayed() || notification.isSkippedMoment()) {
// continue with another identity provider.
}
});
};
</script>
ประเภทข้อมูล: PromptMomentNotification
ตารางต่อไปนี้แสดงวิธีการและคำอธิบายของ
ประเภทข้อมูล PromptMomentNotification
:
วิธีการ | |
---|---|
isDisplayMoment() |
การแจ้งเตือนนี้สำหรับช่วงเวลาจอแสดงผลใช่ไหม หมายเหตุ: เมื่อ FedCM คือ เปิดใช้ การแจ้งเตือนนี้จึงไม่เริ่มทำงาน โปรดดู ย้ายข้อมูลไปยัง FedCM เพื่อดูข้อมูลเพิ่มเติม |
isDisplayed() |
การแจ้งเตือนนี้สำหรับช่วงเวลาที่แสดงผล และ UI คือ
แสดงอยู่ไหม หมายเหตุ: เมื่อ FedCM คือ เปิดใช้ การแจ้งเตือนนี้จึงไม่เริ่มทำงาน โปรดดู ย้ายข้อมูลไปยัง FedCM เพื่อดูข้อมูลเพิ่มเติม |
isNotDisplayed() |
การแจ้งเตือนนี้สำหรับช่วงเวลาที่แสดงผล และ UI ไม่ใช่
แสดงอยู่ไหม หมายเหตุ: เมื่อ FedCM คือ เปิดใช้ การแจ้งเตือนนี้จึงไม่เริ่มทำงาน โปรดดู ย้ายข้อมูลไปยัง FedCM เพื่อดูข้อมูลเพิ่มเติม |
getNotDisplayedReason() |
เหตุผลโดยละเอียดที่ UI ไม่แสดง รายการต่อไปนี้คือ ค่าที่เป็นไปได้ ได้แก่
|
isSkippedMoment() |
การแจ้งเตือนนี้แสดงในช่วงเวลาที่ถูกข้ามไปหรือไม่ |
getSkippedReason() |
เหตุผลโดยละเอียดของช่วงเวลาที่ข้าม รายการต่อไปนี้คือ ค่าที่เป็นไปได้ ได้แก่
|
isDismissedMoment() |
การแจ้งเตือนนี้เป็นเวลาที่ปิดไปใช่ไหม |
getDismissedReason() |
เหตุผลโดยละเอียดของการปิด การดำเนินการต่อไปนี้สามารถทำได้ มีดังนี้
|
getMomentType() |
แสดงผลสตริงสำหรับประเภทช่วงเวลา การดำเนินการต่อไปนี้สามารถทำได้ มีดังนี้
|
ประเภทข้อมูล: CredentialResponse
เมื่อเรียกใช้ฟังก์ชัน callback
ออบเจ็กต์ CredentialResponse
จะ
เป็นพารามิเตอร์ ตารางต่อไปนี้แสดงฟิลด์ที่มี
ในออบเจ็กต์การตอบสนองของข้อมูลเข้าสู่ระบบ
ช่อง | |
---|---|
credential |
ช่องนี้คือโทเค็นรหัสที่แสดงผล |
select_by |
ช่องนี้จะกำหนดวิธีเลือกข้อมูลเข้าสู่ระบบ |
state |
ระบบจะกำหนดช่องนี้ก็ต่อเมื่อผู้ใช้คลิกปุ่มลงชื่อเข้าใช้ด้วย Google
เพื่อลงชื่อเข้าใช้ และ state ของปุ่ม
ระบุไว้ |
ข้อมูล เข้าสู่ระบบ
ช่องนี้คือโทเค็นรหัสเป็นสตริง JSON Web Token (JWT) ที่เข้ารหัสฐาน 64
วันและเวลา ถอดรหัสแล้ว JWT มีลักษณะดังตัวอย่างต่อไปนี้
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": "Elisa", "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
นี่คือบัญชี Gmailemail_verified
เป็นจริงและตั้งค่าhd
แล้ว นี่คือ Google Workspace ของคุณได้
ผู้ใช้อาจลงทะเบียนบัญชี Google โดยไม่ใช้ Gmail หรือ Google Workspace ได้
เมื่อ email
ไม่มีส่วนต่อท้าย @gmail.com
และ hd
ไม่มีส่วนต่อท้าย Google จะ
แนะนำให้ใช้รหัสผ่านหรือวิธีการอื่นๆ ในการพิสูจน์ไม่ได้
ยืนยันผู้ใช้ email_verfied
อาจเป็นจริงก็ได้ เนื่องจาก Google ยืนยันในตอนแรก
ผู้ใช้เมื่อมีการสร้างบัญชี Google แต่การเป็นเจ้าของ
บัญชีอีเมลของบุคคลอาจเปลี่ยนแปลงไป
ฟิลด์ exp
จะแสดงเวลาหมดอายุเพื่อให้คุณยืนยันโทเค็นใน
ฝั่งเซิร์ฟเวอร์ 1 ชั่วโมง
สำหรับโทเค็นรหัสที่ได้รับจากฟีเจอร์ลงชื่อเข้าใช้ด้วย Google คุณจะต้องยืนยัน
ก่อนหมดอายุ
อย่าใช้ 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 เท่านั้น v75 ขึ้นไป |
user_2tap |
ผู้ใช้ที่ไม่มีเซสชันอยู่กดปุ่ม "ดำเนินการต่อในฐานะ" ด้วย One Tap เพื่อเลือกบัญชี แล้วกดปุ่ม "ยืนยัน" ใน เพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ ใช้กับ เบราว์เซอร์ที่ไม่ใช่ Chromium |
btn |
ผู้ใช้ที่มีเซสชันอยู่แล้วซึ่งเคยให้ความยินยอม กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และเลือกบัญชี Google จาก "เลือกบัญชี" เพื่อแชร์ข้อมูลเข้าสู่ระบบ |
btn_confirm |
ผู้ใช้ที่มีเซสชันอยู่ได้กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" และกดปุ่มยืนยันเพื่อให้ความยินยอมและแชร์เอกสารรับรอง |
btn_add_session |
ผู้ใช้ที่ไม่มีเซสชันที่มีอยู่ซึ่งเคยให้สิทธิ์ไว้ก่อนหน้านี้ ยินยอม กดปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เพื่อเลือกบัญชี Google และแชร์เอกสารรับรอง |
btn_confirm_add_session |
ผู้ใช้ที่ไม่มีเซสชันอยู่แล้วกด "ลงชื่อเข้าใช้ด้วย Google" ก่อน เพื่อเลือกบัญชี Google แล้วกด "ยืนยัน" เพื่อให้ความยินยอมและแชร์ข้อมูลเข้าสู่ระบบ |
รัฐ
ช่องนี้จะกำหนดก็ต่อเมื่อผู้ใช้คลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google" เพื่อ
ลงชื่อเข้าใช้ และระบุแอตทริบิวต์ state
ของปุ่มที่คลิกแล้ว
ของฟิลด์นี้เป็นค่าเดียวกับที่คุณระบุไว้ในส่วน
state
เนื่องจากปุ่มลงชื่อเข้าใช้ด้วย Google หลายปุ่มสามารถแสดงในหน้าเดียวกัน
สามารถกำหนดสตริงที่ไม่ซ้ำกันให้กับแต่ละปุ่ม ดังนั้นช่อง state
นี้
เพื่อระบุว่าผู้ใช้คลิกปุ่มใดเพื่อลงชื่อเข้าใช้
วิธีการ: google.accounts.id.renderButton
เมธอด google.accounts.id.renderButton
จะแสดงผลฟีเจอร์ลงชื่อเข้าใช้ด้วย Google
ในหน้าเว็บของคุณ
ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด
google.accounts.id.renderButton(
/** @type{!HTMLElement} */ parent,
/** @type{!GsiButtonConfiguration} */ options
)
ประเภทข้อมูล: GsiButtonConfiguration
ตารางต่อไปนี้แสดงฟิลด์และคำอธิบายของ
ประเภทข้อมูล GsiButtonConfiguration
:
แอตทริบิวต์ | |
---|---|
type |
ประเภทปุ่ม ได้แก่ ไอคอน หรือปุ่มมาตรฐาน |
theme |
ธีมปุ่ม เช่นfill_blue หรือ filled_black |
size |
ขนาดของปุ่ม เช่น เล็กหรือใหญ่ |
text |
ข้อความบนปุ่ม เช่น "ลงชื่อเข้าใช้ด้วย Google" หรือ "ลงชื่อสมัครใช้ด้วย Google" |
shape |
รูปร่างของปุ่ม เช่น สี่เหลี่ยมผืนผ้าหรือวงกลม |
logo_alignment |
การจัดแนวโลโก้ Google: ชิดซ้ายหรือกึ่งกลาง |
width |
ความกว้างของปุ่ม หน่วยเป็นพิกเซล |
locale |
หากมีการตั้งค่า ระบบจะแสดงภาษาของปุ่ม |
click_listener |
หากตั้งค่าไว้ ฟังก์ชันนี้จะถูกเรียกเมื่อปุ่ม "ลงชื่อเข้าใช้ด้วย Google" คลิกปุ่มแล้ว |
state |
หากตั้งค่าไว้ สตริงนี้จะแสดงผลพร้อมโทเค็นรหัส |
ประเภทแอตทริบิวต์
ส่วนต่อไปนี้มีรายละเอียดเกี่ยวกับแอตทริบิวต์แต่ละประเภท และ
ประเภท
ประเภทปุ่ม ค่าเริ่มต้นคือ standard
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ใช่ | type: "icon" |
ตารางต่อไปนี้แสดงประเภทของปุ่มที่ใช้ได้ และ คำอธิบาย:
ประเภท | |
---|---|
standard |
|
icon |
ธีม [theme]
ธีมปุ่ม ค่าเริ่มต้นคือ outline
โปรดดูตารางต่อไปนี้สำหรับ
ข้อมูลเพิ่มเติม:
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | theme: "filled_blue" |
ตารางต่อไปนี้แสดงธีมที่ใช้ได้และคำอธิบาย
ธีม | |
---|---|
outline |
|
filled_blue |
|
filled_black |
ขนาด
ขนาดของปุ่ม ค่าเริ่มต้นคือ large
โปรดดูตารางต่อไปนี้สำหรับ
ข้อมูลเพิ่มเติม:
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | size: "small" |
ตารางต่อไปนี้แสดงขนาดของปุ่มที่ใช้ได้และคำอธิบาย
ขนาด | |
---|---|
large |
|
medium |
|
small |
ข้อความ
ข้อความบนปุ่ม ค่าเริ่มต้นคือ signin_with
ไม่มีภาพ
ความแตกต่างของข้อความของปุ่มไอคอนที่มีแอตทริบิวต์ text
ต่างกัน
ข้อยกเว้นเพียงอย่างเดียวคือเมื่อมีการอ่านข้อความสำหรับความสามารถเข้าถึงได้ง่ายบนหน้าจอ
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | text: "signup_with" |
ตารางต่อไปนี้แสดงข้อความของปุ่มทั้งหมดและข้อความปุ่ม คำอธิบาย:
ข้อความ | |
---|---|
signin_with |
|
signup_with |
|
continue_with |
|
signin |
รูปร่าง
รูปร่างของปุ่ม ค่าเริ่มต้นคือ rectangular
โปรดดูตารางต่อไปนี้
สำหรับข้อมูลเพิ่มเติม
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | shape: "rectangular" |
ตารางต่อไปนี้แสดงรูปร่างของปุ่มที่ใช้ได้และคำอธิบาย
รูปร่าง | |
---|---|
rectangular |
|
pill |
|
circle |
|
square |
logo_alignment
การจัดแนวโลโก้ Google ค่าเริ่มต้นคือ left
แอตทริบิวต์นี้
ใช้กับปุ่มประเภท standard
เท่านั้น ดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ข้อมูล:
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | logo_alignment: "center" |
ตารางต่อไปนี้แสดงการจัดแนวที่ใช้ได้และคำอธิบาย
logo_alignment | |
---|---|
left |
|
center |
ความกว้าง
ความกว้างของปุ่มต่ำสุดในหน่วยพิกเซล ความกว้างสูงสุดคือ 400 พิกเซล
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | width: "400" |
ภาษา
ไม่บังคับ แสดงข้อความปุ่มโดยใช้ภาษาที่ระบุ มิฉะนั้นจะมีค่าเริ่มต้นเป็น
การตั้งค่าบัญชี Google หรือเบราว์เซอร์ของผู้ใช้ เพิ่มพารามิเตอร์ hl
และ
รหัสภาษาลงในคำสั่ง src ขณะโหลดไลบรารี ตัวอย่างเช่น
gsi/client?hl=<iso-639-code>
.
หากไม่ได้ตั้งค่าไว้ ระบบจะใช้ภาษาเริ่มต้นของเบราว์เซอร์หรือภาษาของผู้ใช้เซสชัน Google ค่ากำหนด ดังนั้น ผู้ใช้แต่ละรายอาจเห็นเวอร์ชัน ปุ่มที่แปลแล้ว และอาจมีขนาดต่างๆ
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | locale: "zh_CN" |
click_listener
คุณกำหนดฟังก์ชัน JavaScript ให้เรียกใช้เมื่อมีการลงชื่อเข้าใช้ด้วย Google ได้
คลิกปุ่มโดยใช้แอตทริบิวต์ click_listener
google.accounts.id.renderButton(document.getElementById("signinDiv"), { theme: 'outline', size: 'large', click_listener: onClickHandler }); function onClickHandler(){ console.log("Sign in with Google button clicked...") }
ในตัวอย่างนี้ ระบบจะบันทึกข้อความลงชื่อเข้าใช้ด้วย Google คลิกปุ่ม... ไปยังคอนโซลเมื่อคลิกปุ่ม "ลงชื่อเข้าใช้ด้วย Google"
รัฐ
ไม่บังคับ เนื่องจากปุ่ม "ลงชื่อเข้าใช้ด้วย Google" หลายปุ่มจะแสดงผลได้เหมือนกัน คุณสามารถกำหนดปุ่มแต่ละปุ่มด้วยสตริงที่ไม่ซ้ำกันได้ สตริงเดียวกัน จะแสดงพร้อมกับโทเค็นรหัส เพื่อให้คุณสามารถระบุผู้ใช้ปุ่มได้ คลิกเพื่อลงชื่อเข้าใช้
โปรดดูข้อมูลเพิ่มเติมในตารางต่อไปนี้
ประเภท | ต้องระบุ | ตัวอย่าง |
---|---|---|
สตริง | ไม่บังคับ | data-state: "button 1" |
ประเภทข้อมูล: ข้อมูลเข้าสู่ระบบ
เมื่อ
native_callback
เรียกใช้ฟังก์ชัน และส่งออบเจ็กต์ Credential
เป็นพารามิเตอร์
ตารางต่อไปนี้แสดงฟิลด์ที่มีอยู่ในออบเจ็กต์
ช่อง | |
---|---|
id |
ระบุผู้ใช้ |
password |
รหัสผ่าน |
เมธอด: google.accounts.id.disableAutoSelect
เมื่อผู้ใช้ออกจากระบบเว็บไซต์ คุณจะต้องเรียกใช้เมธอด
google.accounts.id.disableAutoSelect
เพื่อบันทึกสถานะในคุกกี้ ช่วงเวลานี้
จะทำให้ UX ทำงานอย่างต่อเนื่อง ดูข้อมูลโค้ดต่อไปนี้ของเมธอด
google.accounts.id.disableAutoSelect()
ตัวอย่างโค้ดต่อไปนี้ใช้ google.accounts.id.disableAutoSelect
ที่มีฟังก์ชัน onSignout()
<script>
function onSignout() {
google.accounts.id.disableAutoSelect();
}
</script>
เมธอด: google.accounts.id.storeCredential
เมธอดนี้คือ Wrapper สำหรับเมธอด store()
ของโฆษณาเนทีฟของเบราว์เซอร์
API เครื่องมือจัดการข้อมูลเข้าสู่ระบบ ดังนั้นจึงสามารถใช้เพื่อจัดเก็บรหัสผ่านเท่านั้น
ข้อมูลเข้าสู่ระบบ ดูตัวอย่างโค้ดต่อไปนี้ของเมธอด
google.accounts.id.storeCredential(Credential, callback)
ตัวอย่างโค้ดต่อไปนี้ใช้ google.accounts.id.storeCredential
ที่มีฟังก์ชัน onSignIn()
<script>
function onSignIn() {
let cred = {id: '...', password: '...'};
google.accounts.id.storeCredential(cred);
}
</script>
วิธีการ: google.accounts.id.cancel
คุณยกเลิกขั้นตอนการแตะเพียงครั้งเดียวได้หากนำข้อความแจ้งจากฝ่ายที่เกี่ยวข้องออก DOM ระบบจะละเว้นการดำเนินการยกเลิกหากเลือกข้อมูลเข้าสู่ระบบแล้ว โปรดดู ตัวอย่างโค้ดต่อไปนี้ของเมธอด:
google.accounts.id.cancel()
ตัวอย่างโค้ดต่อไปนี้จะใช้เมธอด google.accounts.id.cancel()
ด้วยฟังก์ชัน onNextButtonClicked()
:
<script>
function onNextButtonClicked() {
google.accounts.id.cancel();
showPasswordPage();
}
</script>
Callback สำหรับโหลดไลบรารี: onGoogleLibraryLoad
คุณลงทะเบียนการติดต่อกลับของ onGoogleLibraryLoad
ได้ ได้รับแจ้งหลังจากป้าย
ในไลบรารี JavaScript ของ Google ที่โหลด:
window.onGoogleLibraryLoad = () => {
...
};
Callback นี้เป็นเพียงทางลัดสำหรับ Callback window.onload
ไม่มี
ความแตกต่างของพฤติกรรมผู้ใช้
ตัวอย่างโค้ดต่อไปนี้ใช้ Callback onGoogleLibraryLoad
<script>
window.onGoogleLibraryLoad = () => {
google.accounts.id.initialize({
...
});
google.accounts.id.prompt();
};
</script>
วิธีการ: google.accounts.id.revoke
เมธอด google.accounts.id.revoke
จะเพิกถอนการให้สิทธิ์ OAuth ที่ใช้แชร์
โทเค็นรหัสสำหรับผู้ใช้ที่ระบุ ดูข้อมูลโค้ดต่อไปนี้ของเมธอด
javascript
google.accounts.id.revoke(login_hint, callback)
พารามิเตอร์ | ประเภท | คำอธิบาย |
---|---|---|
login_hint |
สตริง | อีเมลหรือรหัสที่ไม่ซ้ำกันของบัญชี Google ของผู้ใช้ รหัสคือพร็อพเพอร์ตี้ sub ของ
เพย์โหลดข้อมูลเข้าสู่ระบบ |
callback |
ฟังก์ชัน | เครื่องจัดการ RevocationResponse ที่ไม่บังคับ |
ตัวอย่างโค้ดต่อไปนี้แสดงวิธีใช้เมธอด revoke
กับรหัส
google.accounts.id.revoke('1618033988749895', done => { console.log(done.error); });
ประเภทข้อมูล: RevocationResponse
เมื่อเรียกใช้ฟังก์ชัน callback
ออบเจ็กต์ RevocationResponse
จะ
เป็นพารามิเตอร์ ตารางต่อไปนี้แสดงฟิลด์ที่มี
ในออบเจ็กต์การตอบกลับการเพิกถอน
ช่อง | |
---|---|
successful |
ช่องนี้คือค่าส่งกลับของการเรียกเมธอด |
error |
ช่องนี้ใส่ข้อความตอบกลับข้อผิดพลาดโดยละเอียดหรือไม่ก็ได้ |
สำเร็จ
ช่องนี้เป็นค่าบูลีนที่ตั้งค่าเป็น "จริง" หากการเรียกวิธีการเพิกถอนสำเร็จ หรือ เท็จเมื่อล้มเหลว
ข้อผิดพลาด
ช่องนี้เป็นค่าสตริงและมีข้อความแสดงข้อผิดพลาดโดยละเอียดในกรณีที่ การเรียกเมธอดล้มเหลว ไม่ได้ระบุเมื่อสำเร็จ