หน้านี้ได้รับการแปลโดย Cloud Translation API

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

ระบุฟังก์ชัน Callback ของ onload ระบบจะเรียกฟังก์ชันนี้เมื่อ ทรัพยากร Dependency โหลดเสร็จแล้ว
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
แทรกทรัพยากร JavaScript โดยตั้งค่าพารามิเตอร์ onload เป็นชื่อของฟังก์ชัน Callback onload และพารามิเตอร์ render เป็น explicit
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
เมื่อมีการเรียกใช้ Callback คุณจะเรียกใช้เมธอด grecaptcha.render จาก JavaScript API ได้
คุณต้องกำหนดฟังก์ชัน Callback onload ก่อนที่ reCAPTCHA API จะโหลด วิธีตรวจสอบว่าไม่มีเงื่อนไข ด้านการแข่งขัน
- สั่งซื้อสคริปต์ให้มี Callback ก่อนแล้วตามด้วย reCAPTCHA
- ใช้พารามิเตอร์ async และ defer ในแท็ก "script"

การกำหนดค่า

พารามิเตอร์ทรัพยากร JavaScript (api.js)

พารามิเตอร์	ค่า	คำอธิบาย
onload		ไม่บังคับ ชื่อของฟังก์ชัน Callback ที่จะเริ่มทำงานเมื่อโหลดทรัพยากร Dependency ทั้งหมดแล้ว
แสดงผล	ตอนโหลด ที่ชัดเจน	ไม่บังคับ ระบุว่าจะแสดงวิดเจ็ตอย่างชัดเจนหรือไม่ ค่าเริ่มต้นจะเป็น onload ซึ่งจะแสดงวิดเจ็ตในแท็ก `g-recaptcha` แรกที่พบ
hl	ดูรหัสภาษา	ไม่บังคับ บังคับให้วิดเจ็ตแสดงผลในบางภาษา ตรวจหาภาษาของผู้ใช้โดยอัตโนมัติหากไม่ได้ระบุ

แอตทริบิวต์แท็ก g-recaptcha และพารามิเตอร์ grecaptcha.render

แอตทริบิวต์แท็ก g-recaptcha	พารามิเตอร์ grecaptcha.render	ค่า	ค่าเริ่มต้น	คำอธิบาย
คีย์เว็บไซต์ข้อมูล	คีย์เว็บไซต์			คีย์เว็บไซต์ของคุณ
ธีมข้อมูล	ธีม [theme]	แสงเข้ม	ไฟ	ไม่บังคับ ธีมสีของวิดเจ็ต
data-size	ขนาด	กะทัดรัดปกติ	ปกติ	ไม่บังคับ ขนาดของวิดเจ็ต
ดัชนีแท็บข้อมูล	ดัชนีแท็บ		0	ไม่บังคับ ดัชนีแท็บของวิดเจ็ตและชาเลนจ์ หากองค์ประกอบอื่นๆ ในหน้าเว็บใช้ Tabindex ก็ควรตั้งค่าไว้เพื่อให้ผู้ใช้ไปยังส่วนต่างๆ ได้ง่ายขึ้น
Data Callback	Callback			ไม่บังคับ ชื่อของฟังก์ชัน Callback ซึ่งจะทำงานเมื่อผู้ใช้ส่งการตอบกลับที่สำเร็จ ระบบจะส่งโทเค็น `g-recaptcha-response` ไปยัง Callback ของคุณ
การติดต่อกลับที่หมดอายุของข้อมูล	การติดต่อกลับที่หมดอายุ			ไม่บังคับ ชื่อของฟังก์ชัน Callback จะทำงานเมื่อการตอบสนอง reCAPTCHA หมดอายุและผู้ใช้ต้องยืนยันอีกครั้ง
การติดต่อกลับข้อผิดพลาดเกี่ยวกับข้อมูล	การติดต่อกลับข้อผิดพลาด			ไม่บังคับ ชื่อของฟังก์ชัน Callback จะทำงานเมื่อ reCAPTCHA พบข้อผิดพลาด (โดยปกติคือการเชื่อมต่อเครือข่าย) และจะดำเนินการต่อไม่ได้จนกว่าจะกลับมาเชื่อมต่ออีกครั้ง หากคุณระบุฟังก์ชันที่นี่ คุณมีหน้าที่แจ้งให้ผู้ใช้ทราบว่าควรลองอีกครั้ง

JavaScript API

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