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 อย่างชัดแจ้ง

คุณเลื่อนการแสดงผลได้โดยระบุฟังก์ชัน Callback ของ onload และเพิ่มพารามิเตอร์ลงในทรัพยากร JavaScript

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

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

  2. แทรกทรัพยากร JavaScript โดยตั้งค่าพารามิเตอร์ onload เป็นชื่อของฟังก์ชัน Callback ของ onload และตั้งค่าพารามิเตอร์ render เป็น explicit

    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>

    เมื่อเรียกใช้การเรียกกลับ คุณจะเรียกใช้เมธอด grecaptcha.render ได้จาก JavaScript API

    คุณต้องกำหนดฟังก์ชัน Callback ของ

การกำหนดค่า

พารามิเตอร์ทรัพยากร 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(
opt_widget_id
) 		รีเซ็ตวิดเจ็ต reCAPTCHA
opt_widget_id
รหัสวิดเจ็ตซึ่งไม่บังคับ จะใช้ค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ
grecaptcha.getResponse(
opt_widget_id
) 		รับการตอบกลับสำหรับวิดเจ็ต reCAPTCHA
opt_widget_id
รหัสวิดเจ็ตซึ่งไม่บังคับ จะใช้ค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ

ตัวอย่าง

การแสดงผลที่ชัดเจนหลังจาก Callback ที่โหลด

<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>