หน้านี้จะอธิบายวิธีเปิดใช้และปรับแต่ง reCAPTCHA ที่ไม่แสดงในหน้าเว็บ
หากต้องการเรียกใช้ reCAPTCHA ที่ไม่แสดง ให้ทําอย่างใดอย่างหนึ่งต่อไปนี้
- ผูกคําถามกับปุ่มโดยอัตโนมัติ หรือ
- เชื่อมโยงการทดสอบกับปุ่มแบบเป็นโปรแกรม หรือ
- เรียกใช้การทดสอบแบบเป็นโปรแกรม
ดูวิธีกําหนดค่า reCAPTCHA ที่ไม่แสดงได้ในการกําหนดค่า เช่น คุณอาจต้องการระบุภาษาหรือตําแหน่งของป้าย
โปรดดูการยืนยันคําตอบของผู้ใช้เพื่อตรวจสอบว่าผู้ใช้แก้ไข CAPTCHA ได้สําเร็จหรือไม่
เชื่อมโยงคําถามกับปุ่มโดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการใช้วิดเจ็ต reCAPTCHA ที่มองไม่เห็นในหน้าเว็บคือการรวมทรัพยากร JavaScript ที่จําเป็นและเพิ่มแอตทริบิวต์บางรายการลงในปุ่ม HTML แอตทริบิวต์ที่จําเป็นคือชื่อคลาส "g-recaptcha
", คีย์ของเว็บไซต์ในแอตทริบิวต์ data-sitekey
และชื่อโค้ดเรียกกลับ JavaScript สําหรับจัดการ CAPTCHA ในแอตทริบิวต์ data-callback
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script>
function onSubmit(token) {
document.getElementById("demo-form").submit();
}
</script>
</head>
<body>
<form id="demo-form" action="?" method="POST">
<button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
<br/>
</form>
</body>
</html>
สคริปต์ต้องโหลดโดยใช้โปรโตคอล HTTPS และรวมได้ทุกเมื่อจากหน้าใดก็ได้โดยไม่มีข้อจํากัด
เชื่อมโยงคําถามกับปุ่มหรือเรียกใช้ภารกิจแบบเป็นโปรแกรม
คุณสามารถเลื่อนการเชื่อมโยงได้ด้วยการระบุฟังก์ชันเรียกกลับสําหรับโหลด และเพิ่มพารามิเตอร์ในทรัพยากร JavaScript ซึ่งเหมือนกับปัญหา reCAPTCHA ปกติ
เรียกใช้ความท้าทายแบบเป็นโปรแกรม
คุณขอการยืนยัน reCAPTCHA แบบเป็นโปรแกรมได้ผ่านการแสดงภาพใน div ที่มีแอตทริบิวต์ data-size="invisible"
และการเรียกใช้แบบเป็นโปรแกรม
สร้าง div ด้วย
data-size="invisible"
<div class="g-recaptcha" data-sitekey="_your_site_key_" data-callback="onSubmit" data-size="invisible"> </div>
เรียก grecaptcha.execut จากเมธอด JavaScript
grecaptcha.execute();
เมื่อดําเนินการเรียกกลับแล้ว คุณจะสามารถเรียกใช้เมธอด
grecaptcha.render
จาก JavaScript API
การกำหนดค่า
พารามิเตอร์ทรัพยากร JavaScript (api.js)
พารามิเตอร์ | ค่า | คำอธิบาย |
---|---|---|
โหลด | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับที่จะดําเนินการเมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว | |
แสดงผล | โหลด อย่างชัดเจน |
ไม่บังคับ จะแสดงวิดเจ็ตอย่างชัดเจนหรือไม่ ค่าเริ่มต้นคือโหลด ซึ่งจะแสดงวิดเจ็ตในแท็ก g-recaptcha แรกที่พบ |
hl | ดูรหัสภาษา | ไม่บังคับ บังคับให้วิดเจ็ตแสดงผลในภาษาที่กําหนด ตรวจหาภาษาของผู้ใช้โดยอัตโนมัติหากไม่ได้ระบุ |
แอตทริบิวต์แท็ก g-recaptcha และพารามิเตอร์ grecaptcha.render
แอตทริบิวต์แท็ก g-recaptcha | พารามิเตอร์ grecaptcha.render | ค่า | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
คีย์ข้อมูล-เว็บไซต์ | คีย์เว็บไซต์ | คีย์เว็บไซต์ของคุณ | ||
ป้ายข้อมูล | ป้าย | ล่างซ้าย แทรกในบรรทัด | ล่างขวา | ไม่บังคับ เปลี่ยนตําแหน่งของป้าย reCAPTCHA "แทรกในบรรทัด" ช่วยให้คุณวางตําแหน่งเป็น CSS ได้ |
ขนาดข้อมูล | ขนาด | ไม่แสดง | ไม่บังคับ ใช้ในการสร้างวิดเจ็ตที่มองไม่เห็นซึ่งผูกกับ div และเรียกใช้แบบเป็นโปรแกรม | |
ดัชนีแท็บข้อมูล | แท็บแท็บ | 0 | ไม่บังคับ Tabindex ของการท้าทาย หากองค์ประกอบอื่นๆ ในหน้าเว็บใช้ indexindex ก็ควรตั้งค่าเพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น | |
การเรียกคืนข้อมูล | โค้ดเรียกกลับ | ไม่บังคับ ชื่อฟังก์ชันเรียกกลับที่เรียกใช้เมื่อผู้ใช้ส่งคําตอบที่สําเร็จ ระบบจะส่งโทเค็น g-recaptcha-response ไปยังโค้ดเรียกกลับ |
||
การเรียกคืนข้อมูลที่หมดอายุ | การติดต่อกลับที่หมดอายุ | ไม่บังคับ ชื่อฟังก์ชันเรียกกลับที่เรียกใช้เมื่อการตอบกลับ reCAPTCHA หมดอายุและผู้ใช้ต้องยืนยันอีกครั้ง | ||
data-error-callback | error-callback | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับที่จะดําเนินการเมื่อ reCAPTCHA พบข้อผิดพลาด (โดยปกติจะเป็นการเชื่อมต่อเครือข่าย) และจะดําเนินการต่อไม่ได้จนกว่าจะกู้คืนการเชื่อมต่อ หากระบุฟังก์ชันไว้ที่นี่ คุณมีหน้าที่แจ้งให้ผู้ใช้ทราบว่าควรลองอีกครั้ง | ||
แยก | เท็จ | ไม่บังคับ เพื่อให้เจ้าของปลั๊กอินไม่รบกวนการติดตั้ง reCAPTCHA ที่มีอยู่ในหน้าเว็บ หากจริง อินสแตนซ์ reCAPTCHA นี้จะเป็นส่วนหนึ่งของพื้นที่รหัสแยกต่างหาก |
JavaScript API
วิธีการ | คำอธิบาย |
---|---|
grecaptcha.render( คอนเทนเนอร์
พารามิเตอร์
ใช้ต่อ
)
|
แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ คอนเทนเนอร์ องค์ประกอบ HTML ที่แสดงวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM เอง พารามิเตอร์ ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์-ค่า เช่น {"sitekey": "your_site_key", "theme": "light"} ดูพารามิเตอร์ grecaptcha.render รับค่า ใช้แอตทริบิวต์ data-* ที่มีอยู่ในองค์ประกอบหากไม่ได้ระบุพารามิเตอร์ที่เกี่ยวข้อง พารามิเตอร์จะมีความสําคัญเหนือกว่าแอตทริบิวต์ |
grecaptcha.exeน่ารัก( OptiWidget_id
)
|
เรียกใช้การตรวจสอบ reCAPTCHA แบบเป็นโปรแกรม ใช้หาก reCAPTCHA ที่ไม่แสดงอยู่ใน div แทนที่จะเป็นปุ่ม opt_Widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ระบุ |
grecaptcha.รีเซ็ต( OptiWidget_id
)
|
รีเซ็ตวิดเจ็ต reCAPTCHA opt_Widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ระบุ |
grecaptcha.getResponse( OptiWidget_id
)
|
รับการตอบสนองของวิดเจ็ต reCAPTCHA opt_Widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ระบุ |
ตัวอย่าง
การแสดงผลที่ไม่เหมาะสมหลังจากการเรียกกลับเมื่อมีการโหลด
<html>
<head>
<title>reCAPTCHA demo: Explicit render after an onload callback</title>
<script>
var onSubmit = function(token) {
console.log('success!');
};
var onloadCallback = function() {
grecaptcha.render('submit', {
'sitekey' : 'your_site_key',
'callback' : onSubmit
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<input id="submit" type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
การเรียกใช้ภารกิจ reCAPTCHA ที่มองไม่เห็นหลังจากตรวจสอบฝั่งไคลเอ็นต์
<html>
<head>
<script>
function onSubmit(token) {
alert('thanks ' + document.getElementById('field').value);
}
function validate(event) {
event.preventDefault();
if (!document.getElementById('field').value) {
alert("You must add text to the required field");
} else {
grecaptcha.execute();
}
}
function onload() {
var element = document.getElementById('submit');
element.onclick = validate;
}
</script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form>
Name: (required) <input id="field" name="field">
<div id="recaptcha" class="g-recaptcha"
data-sitekey="_your_site_key_"
data-callback="onSubmit"
data-size="invisible"></div>
<button id="submit">submit</button>
</form>
<script>onload();</script>
</body>
</html>