หน้านี้อธิบายวิธีแสดงและปรับแต่งวิดเจ็ต reCAPTCHA v2 ในหน้าเว็บ
หากต้องการแสดงวิดเจ็ต ให้ทำอย่างใดอย่างหนึ่งต่อไปนี้
ดูการกําหนดค่าเพื่อดูวิธีปรับแต่งวิดเจ็ต ตัวอย่างเช่น คุณอาจต้องการระบุภาษาหรือธีมสำหรับวิดเจ็ต
โปรดดูที่การยืนยันคำตอบของผู้ใช้ เพื่อตรวจสอบว่าผู้ใช้แก้ไข CAPTCHA สำเร็จหรือไม่
แสดงผลวิดเจ็ต reCAPTCHA โดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการแสดงผลวิดเจ็ต reCAPTCHA ในหน้าเว็บคือการรวมแหล่งข้อมูล JavaScript ที่จำเป็นและแท็ก g-recaptcha
แท็ก g-recaptcha
เป็นองค์ประกอบ DIV ที่มีชื่อคลาส g-recaptcha
และคีย์เว็บไซต์ในแอตทริบิวต์ data-sitekey
reCAPTCHA demo: Simple page
สคริปต์จะต้องโหลดโดยใช้โปรโตคอล HTTPS และสามารถรวมจาก ชี้ไปที่หน้าเว็บโดยไม่มีข้อจำกัด
แสดงผลวิดเจ็ต reCAPTCHA อย่างชัดแจ้ง
คุณเลื่อนการแสดงผลได้โดยระบุฟังก์ชัน Callback ของ onload และเพิ่มพารามิเตอร์ลงในทรัพยากร JavaScript
ระบุฟังก์ชัน Callback ของ
onload
ระบบจะเรียกฟังก์ชันนี้เมื่อ โหลดทรัพยากร Dependency ทั้งหมดแล้วแทรกทรัพยากร JavaScript โดยตั้งค่าพารามิเตอร์
onload
เป็นชื่อของฟังก์ชัน Callback ของ onload และตั้งค่าพารามิเตอร์render
เป็นexplicit
เมื่อเรียกใช้การเรียกกลับ คุณจะเรียกใช้เมธอด
คุณต้องกำหนดฟังก์ชัน Callback ของgrecaptcha.render
ได้จาก JavaScript API
การกำหนดค่า
พารามิเตอร์ทรัพยากร JavaScript (api.js)
พารามิเตอร์ | ค่า | คำอธิบาย |
---|---|---|
onload |
ไม่บังคับ ชื่อของฟังก์ชัน Callback ที่จะเริ่มทำงานเมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว | |
render |
explicit onload |
ไม่บังคับ แสดงผลวิดเจ็ตอย่างชัดแจ้งหรือไม่ ค่าเริ่มต้นคือ onload ซึ่งจะแสดงผลวิดเจ็ตในแท็ก g-recaptcha รายการแรกที่พบ |
hl |
ดูรหัสภาษา | ไม่บังคับ บังคับให้วิดเจ็ตแสดงผลในบางภาษา ตรวจหาภาษาของผู้ใช้โดยอัตโนมัติหากไม่ได้ระบุ |
แอตทริบิวต์แท็ก g-recaptcha และพารามิเตอร์ grecaptcha.render
แอตทริบิวต์แท็ก g-recaptcha | พารามิเตอร์ grecaptcha.render | ค่า | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
data-sitekey |
sitekey |
คีย์เว็บไซต์ของคุณ | ||
data-theme |
theme |
dark light |
light |
ไม่บังคับ ธีมสีของวิดเจ็ต |
data-size |
size |
compact normal |
normal |
ไม่บังคับ ขนาดของวิดเจ็ต |
data-tabindex |
tabindex |
0 | ไม่บังคับ แท็บอินเด็กซ์ของวิดเจ็ตและความท้าทาย หากองค์ประกอบอื่นๆ ในหน้าเว็บใช้ Tabindex ก็ควรตั้งค่าไว้เพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น | |
data-callback |
callback |
ไม่บังคับ ชื่อของฟังก์ชัน Callback ซึ่งจะทำงานเมื่อผู้ใช้ส่งการตอบกลับที่สำเร็จ ระบบจะส่งโทเค็น g-recaptcha-response ไปยังการเรียกกลับ |
||
data-expired-callback |
expired-callback |
ไม่บังคับ ชื่อของฟังก์ชัน Callback จะทำงานเมื่อการตอบสนอง reCAPTCHA หมดอายุและผู้ใช้ต้องยืนยันอีกครั้ง | ||
data-error-callback |
error-callback |
ไม่บังคับ ชื่อของฟังก์ชัน Callback จะทำงานเมื่อ reCAPTCHA พบข้อผิดพลาด (โดยปกติคือการเชื่อมต่อเครือข่าย) และจะดำเนินการต่อไม่ได้จนกว่าจะกลับมาเชื่อมต่ออีกครั้ง หากคุณระบุฟังก์ชันที่นี่ คุณต้องรับผิดชอบในการแจ้งให้ผู้ใช้ลองอีกครั้ง |
JavaScript API
วิธีการ | คำอธิบาย |
---|---|
grecaptcha.render (คอนเทนเนอร์
พารามิเตอร์
|
แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ container เอลิเมนต์ HTML สำหรับแสดงผลวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือตัวองค์ประกอบ DOM parameters ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์=ค่า เช่น {"sitekey": "your_site_key", "theme": "light"} ดูพารามิเตอร์ grecaptcha.render |
grecaptcha.reset(
|
รีเซ็ตวิดเจ็ต reCAPTCHA opt_widget_id รหัสวิดเจ็ตซึ่งไม่บังคับ จะใช้ค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ |
grecaptcha.getResponse(
|
รับการตอบกลับสำหรับวิดเจ็ต reCAPTCHA opt_widget_id รหัสวิดเจ็ตซึ่งไม่บังคับ จะใช้ค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ |
ตัวอย่าง
การแสดงผลที่ชัดเจนหลังจาก Callback ที่โหลด
reCAPTCHA demo: Explicit render after an onload callback
การแสดงผลที่ชัดเจนสำหรับวิดเจ็ตหลายรายการ
reCAPTCHA demo: Explicit render for multiple widgets