หน้านี้จะอธิบายถึงวิธีการเปิดใช้งานและกำหนดค่า reCAPTCHA ที่ไม่แสดงบนหน้าเว็บของคุณ
หากต้องการเรียกใช้ reCAPTCHA ที่ไม่แสดง ให้ทำดังนี้
- เชื่อมโยงคำท้ากับปุ่มโดยอัตโนมัติ หรือ
- เชื่อมโยงคำท้ากับปุ่มแบบเป็นโปรแกรม หรือ
- เรียกใช้ชาเลนจ์โดยใช้โปรแกรม
ดูการกำหนดค่าเพื่อเรียนรู้วิธีปรับแต่ง reCAPTCHA ที่ไม่แสดง ตัวอย่างเช่น คุณอาจต้องการระบุภาษาหรือตำแหน่งของป้าย
โปรดดูการยืนยันการตอบกลับของผู้ใช้เพื่อตรวจสอบว่าผู้ใช้แก้ CAPTCHA สำเร็จหรือไม่
เชื่อมโยงคำท้ากับปุ่มโดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการใช้วิดเจ็ต reCAPTCHA ที่ไม่แสดงในหน้าเว็บคือการใส่ทรัพยากร JavaScript ที่จำเป็น และเพิ่มแอตทริบิวต์ 2-3 รายการลงในปุ่ม 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.execute จากเมธอด JavaScript
grecaptcha.execute();
เมื่อมีการเรียกใช้โค้ดเรียกกลับ คุณจะเรียกใช้เมธอด
grecaptcha.render
ได้จาก JavaScript API
การกำหนดค่า
พารามิเตอร์ทรัพยากร JavaScript (api.js)
พารามิเตอร์ | ค่า | คำอธิบาย |
---|---|---|
onload | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับที่จะดำเนินการเมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว | |
แสดงผล | โจ่งแจ้ง เมื่อโหลด |
ไม่บังคับ ต้องการแสดงผลวิดเจ็ตอย่างชัดเจนหรือไม่ ค่าเริ่มต้นเป็น onload ซึ่งจะแสดงผลวิดเจ็ตในแท็ก g-recaptcha แรกที่พบ |
hl | ดูรหัสภาษา | ไม่บังคับ บังคับให้วิดเจ็ตแสดงผลในภาษาใดภาษาหนึ่ง ตรวจหาภาษาของผู้ใช้โดยอัตโนมัติหากไม่ได้ระบุ |
แอตทริบิวต์แท็ก g-recaptcha และพารามิเตอร์ grecaptcha.render
แอตทริบิวต์แท็ก g-recaptcha | พารามิเตอร์ grecaptcha.render | ค่า | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
คีย์เว็บไซต์ข้อมูล | คีย์เว็บไซต์ | คีย์เว็บไซต์ของคุณ | ||
ป้ายข้อมูล | ป้าย | แทรกในบรรทัดด้านล่างขวาล่างซ้าย | ขวาล่าง | ไม่บังคับ เปลี่ยนตำแหน่งป้าย reCAPTCHA "inline" ช่วยให้คุณวางตำแหน่งด้วย CSS ได้ |
data-size | ขนาด | ไม่ปรากฏ | ไม่บังคับ ใช้เพื่อสร้างวิดเจ็ตที่มองไม่เห็นซึ่งผูกกับ div และเรียกใช้แบบเป็นโปรแกรม | |
ดัชนีแท็บข้อมูล | ดัชนีแท็บ | 0 | ไม่บังคับ ดัชนีแท็บของภารกิจ หากองค์ประกอบอื่นๆ ในหน้าเว็บใช้ Tabindex ก็ควรมีการตั้งค่าเพื่อให้ไปยังส่วนต่างๆ ของผู้ใช้ได้ง่ายขึ้น | |
การติดต่อกลับโดยใช้อินเทอร์เน็ต | โค้ดเรียกกลับ | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับ ซึ่งเรียกใช้เมื่อผู้ใช้ส่งการตอบกลับที่สำเร็จ ระบบจะส่งโทเค็น g-recaptcha-response ไปยังโค้ดเรียกกลับของคุณ |
||
data-expired-callback | การติดต่อกลับ-หมดอายุ | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับ ซึ่งจะดำเนินการเมื่อการตอบกลับ reCAPTCHA หมดอายุและผู้ใช้ต้องยืนยันอีกครั้ง | ||
การเรียกกลับข้อผิดพลาดของข้อมูล | การเรียกกลับข้อผิดพลาด | ไม่บังคับ ชื่อฟังก์ชันเรียกกลับซึ่งทำงานเมื่อ reCAPTCHA พบข้อผิดพลาด (โดยปกติจะเป็นการเชื่อมต่อเครือข่าย) และไม่สามารถดำเนินการต่อได้จนกว่าจะกู้คืนการเชื่อมต่อ หากระบุฟังก์ชันที่นี่ คุณมีหน้าที่ต้องแจ้งให้ผู้ใช้ทราบว่าควรลองอีกครั้ง | ||
เป็นแห่งๆ | false | ไม่บังคับ เพื่อให้เจ้าของปลั๊กอินไม่แทรกแซงการติดตั้ง reCAPTCHA ที่มีอยู่ในหน้าเว็บ หากเป็นจริง อินสแตนซ์ reCAPTCHA นี้จะเป็นส่วนหนึ่งของพื้นที่รหัสที่แยกต่างหาก |
JavaScript API
วิธีการ | คำอธิบาย |
---|---|
grecaptcha.render( คอนเทนเนอร์
พารามิเตอร์
ใช้ต่อ
)
|
แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ container องค์ประกอบ HTML ที่จะแสดงวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือตัวองค์ประกอบ DOM เอง parameters ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์=ค่า เช่น {"sitekey": "your_site_key", "theme": "light"} ดูพารามิเตอร์ grecaptcha.render รับค่า ใช้แอตทริบิวต์ data-* ที่มีอยู่แล้วในองค์ประกอบหากไม่ได้ระบุพารามิเตอร์ที่เกี่ยวข้องไว้ พารามิเตอร์จะมีลำดับความสำคัญเหนือกว่าแอตทริบิวต์ |
grecaptcha.execute( opt_widget_id
)
|
เรียกใช้การตรวจสอบ reCAPTCHA แบบเป็นโปรแกรม ใช้เมื่อ reCAPTCHA ที่ไม่แสดงอยู่ใน div แทนที่จะเป็นปุ่ม opt_widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ |
grecaptcha.reset( opt_widget_id
)
|
รีเซ็ตวิดเจ็ต reCAPTCHA opt_widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ |
grecaptcha.getResponse( opt_widget_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>