reCAPTCHA เวอร์ชัน 2

หน้านี้จะอธิบายวิธีแสดงวิดเจ็ตวิดเจ็ต 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

  1. ระบุฟังก์ชันเรียกกลับของ onload ระบบจะเรียกใช้ฟังก์ชันนี้เมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว

    <script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

  2. แทรกทรัพยากร 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>