หน้านี้จะอธิบายวิธีแสดงวิดเจ็ตวิดเจ็ต reCAPTCHA v2 ในหน้าเว็บ
หากต้องการแสดงวิดเจ็ต ให้ทําอย่างใดอย่างหนึ่งต่อไปนี้
ดูวิธีปรับแต่งวิดเจ็ตได้ที่การกําหนดค่า ตัวอย่างเช่น คุณอาจต้องการระบุภาษาหรือธีมของวิดเจ็ต
โปรดดูการยืนยันคําตอบของผู้ใช้เพื่อตรวจสอบว่าผู้ใช้แก้ไข CAPTCHA ได้สําเร็จหรือไม่
แสดงผลวิดเจ็ต reCAPTCHA โดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการแสดงผลวิดเจ็ต reCAPTCHA ในหน้าเว็บคือการรวมทรัพยากร JavaScript ที่จําเป็นและแท็ก g-recaptcha
แท็ก g-recaptcha
เป็นองค์ประกอบ DIV ที่มีชื่อคลาส g-recaptcha
และคีย์เว็บไซต์ในแอตทริบิวต์ data-sitekey
<html>
<head>
<title>reCAPTCHA demo: Simple page</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
<div class="g-recaptcha" data-sitekey="your_site_key"></div>
<br/>
<input type="submit" value="Submit">
</form>
</body>
</html>
สคริปต์ต้องโหลดโดยใช้โปรโตคอล HTTPS และรวมจากจุดใดก็ได้ในหน้าเว็บโดยไม่มีข้อจํากัด
แสดงวิดเจ็ต reCAPTCHA อย่างชัดเจน
การลดการแสดงผลสามารถทําได้โดยการระบุฟังก์ชันเรียกกลับสําหรับการโหลดและเพิ่มพารามิเตอร์ในทรัพยากร JavaScript
ระบุฟังก์ชันเรียกกลับของ
onload
ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว<script type="text/javascript"> var onloadCallback = function() { alert("grecaptcha is ready!"); }; </script>
แทรกทรัพยากร JavaScript โดยตั้งค่าพารามิเตอร์
onload
เป็นชื่อของฟังก์ชันเรียกกลับสําหรับโหลด และพารามิเตอร์render
เป็นexplicit
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer> </script>
เมื่อดําเนินการเรียกกลับ คุณจะเรียกใช้เมธอด
grecaptcha.render
ได้จาก JavaScript API
การกำหนดค่า
พารามิเตอร์ทรัพยากร JavaScript (api.js)
พารามิเตอร์ | ค่า | คำอธิบาย |
---|---|---|
โหลด | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับที่จะดําเนินการเมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว | |
แสดงผล | โหลด อย่างชัดเจน |
ไม่บังคับ จะแสดงวิดเจ็ตอย่างชัดเจนหรือไม่ ค่าเริ่มต้นคือโหลด ซึ่งจะแสดงวิดเจ็ตในแท็ก g-recaptcha แรกที่พบ |
hl | ดูรหัสภาษา | ไม่บังคับ บังคับให้วิดเจ็ตแสดงผลในภาษาที่กําหนด ตรวจหาภาษาของผู้ใช้โดยอัตโนมัติหากไม่ได้ระบุ |
แอตทริบิวต์แท็ก g-recaptcha และพารามิเตอร์ grecaptcha.render
แอตทริบิวต์แท็ก g-recaptcha | พารามิเตอร์ grecaptcha.render | ค่า | ค่าเริ่มต้น | คำอธิบาย |
---|---|---|---|---|
คีย์ข้อมูล-เว็บไซต์ | คีย์เว็บไซต์ | คีย์เว็บไซต์ของคุณ | ||
ธีมข้อมูล | ธีม [theme] | มืด | ไฟ | ไม่บังคับ ธีมสีของวิดเจ็ต |
ขนาดข้อมูล | ขนาด | กะทัดรัดปกติ | ปกติ | ไม่บังคับ ขนาดของวิดเจ็ต |
ดัชนีแท็บข้อมูล | แท็บแท็บ | 0 | ไม่บังคับ Tabindex ของวิดเจ็ตและชาเลนจ์ หากองค์ประกอบอื่นๆ ในหน้าเว็บใช้ indexindex ก็ควรตั้งค่าเพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น | |
การเรียกคืนข้อมูล | โค้ดเรียกกลับ | ไม่บังคับ ชื่อฟังก์ชันเรียกกลับที่เรียกใช้เมื่อผู้ใช้ส่งคําตอบที่สําเร็จ ระบบจะส่งโทเค็น g-recaptcha-response ไปยังโค้ดเรียกกลับ |
||
การเรียกคืนข้อมูลที่หมดอายุ | การติดต่อกลับที่หมดอายุ | ไม่บังคับ ชื่อฟังก์ชันเรียกกลับที่เรียกใช้เมื่อการตอบกลับ reCAPTCHA หมดอายุและผู้ใช้ต้องยืนยันอีกครั้ง | ||
data-error-callback | error-callback | ไม่บังคับ ชื่อของฟังก์ชันเรียกกลับที่จะดําเนินการเมื่อ reCAPTCHA พบข้อผิดพลาด (โดยปกติจะเป็นการเชื่อมต่อเครือข่าย) และจะดําเนินการต่อไม่ได้จนกว่าจะกู้คืนการเชื่อมต่อ หากระบุฟังก์ชันไว้ที่นี่ คุณมีหน้าที่แจ้งให้ผู้ใช้ทราบว่าควรลองอีกครั้ง |
JavaScript API
วิธีการ | คำอธิบาย |
---|---|
grecaptcha.render( คอนเทนเนอร์
พารามิเตอร์
|
แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ คอนเทนเนอร์ องค์ประกอบ HTML ที่แสดงวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM เอง พารามิเตอร์ ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์-ค่า เช่น {"sitekey": "your_site_key", "theme": "light"} ดูพารามิเตอร์ grecaptcha.render |
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 type="text/javascript">
var onloadCallback = function() {
grecaptcha.render('html_element', {
'sitekey' : 'your_site_key'
});
};
</script>
</head>
<body>
<form action="?" method="POST">
<div id="html_element"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>
การแสดงผลที่ชัดเจนสําหรับวิดเจ็ตหลายรายการ
<html>
<head>
<title>reCAPTCHA demo: Explicit render for multiple widgets</title>
<script type="text/javascript">
var verifyCallback = function(response) {
alert(response);
};
var widgetId1;
var widgetId2;
var onloadCallback = function() {
// Renders the HTML element with id 'example1' as a reCAPTCHA widget.
// The id of the reCAPTCHA widget is assigned to 'widgetId1'.
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'your_site_key',
'theme' : 'light'
});
widgetId2 = grecaptcha.render(document.getElementById('example2'), {
'sitekey' : 'your_site_key'
});
grecaptcha.render('example3', {
'sitekey' : 'your_site_key',
'callback' : verifyCallback,
'theme' : 'dark'
});
};
</script>
</head>
<body>
<!-- The g-recaptcha-response string displays in an alert message upon submit. -->
<form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
<div id="example1"></div>
<br>
<input type="submit" value="getResponse">
</form>
<br>
<!-- Resets reCAPTCHA widgetId2 upon submit. -->
<form action="javascript:grecaptcha.reset(widgetId2);">
<div id="example2"></div>
<br>
<input type="submit" value="reset">
</form>
<br>
<!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
<form action="?" method="POST">
<div id="example3"></div>
<br>
<input type="submit" value="Submit">
</form>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
</script>
</body>
</html>