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

reCAPTCHA ที่ไม่แสดง

หน้านี้จะอธิบายวิธีเปิดใช้และปรับแต่ง reCAPTCHA ที่ไม่แสดงในหน้าเว็บ

หากต้องการเรียกใช้ reCAPTCHA ที่ไม่แสดง ให้ทําอย่างใดอย่างหนึ่งต่อไปนี้

ผูกคําถามกับปุ่มโดยอัตโนมัติ หรือ
เชื่อมโยงการทดสอบกับปุ่มแบบเป็นโปรแกรม หรือ
เรียกใช้การทดสอบแบบเป็นโปรแกรม

ดูวิธีกําหนดค่า reCAPTCHA ที่ไม่แสดงได้ในการกําหนดค่า เช่น คุณอาจต้องการระบุภาษาหรือตําแหน่งของป้าย

โปรดดูการยืนยันคําตอบของผู้ใช้เพื่อตรวจสอบว่าผู้ใช้แก้ไข CAPTCHA ได้สําเร็จหรือไม่

เชื่อมโยงคําถามกับปุ่มโดยอัตโนมัติ

วิธีที่ง่ายที่สุดในการใช้วิดเจ็ต reCAPTCHA ที่มองไม่เห็นในหน้าเว็บคือการรวมทรัพยากร JavaScript ที่จําเป็นและเพิ่มแอตทริบิวต์บางรายการลงในปุ่ม 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.execut จากเมธอด JavaScript
```
grecaptcha.execute();
```
เมื่อดําเนินการเรียกกลับแล้ว คุณจะสามารถเรียกใช้เมธอด grecaptcha.render จาก JavaScript API
คุณต้องกําหนดฟังก์ชันเรียกกลับสําหรับโหลดก่อนที่ reCAPTCHA API จะโหลด วิธีตรวจสอบว่าไม่มีเงื่อนไขทางการแข่งขัน
- เรียงลําดับสคริปต์ด้วยโค้ดเรียกกลับก่อน ตามด้วย reCAPTCHA
- ใช้พารามิเตอร์ `async` และ `defer` ในแท็ก `script`

การกำหนดค่า

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

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

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

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

JavaScript API

วิธีการ	คำอธิบาย
grecaptcha.render( คอนเทนเนอร์ พารามิเตอร์ ใช้ต่อ )	แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ คอนเทนเนอร์ องค์ประกอบ HTML ที่แสดงวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือองค์ประกอบ DOM เอง พารามิเตอร์ ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์-ค่า เช่น {"sitekey": "your_site_key", "theme": "light"} ดูพารามิเตอร์ grecaptcha.render รับค่า ใช้แอตทริบิวต์ data-* ที่มีอยู่ในองค์ประกอบหากไม่ได้ระบุพารามิเตอร์ที่เกี่ยวข้อง พารามิเตอร์จะมีความสําคัญเหนือกว่าแอตทริบิวต์
grecaptcha.exeน่ารัก( OptiWidget_id )	เรียกใช้การตรวจสอบ reCAPTCHA แบบเป็นโปรแกรม ใช้หาก reCAPTCHA ที่ไม่แสดงอยู่ใน div แทนที่จะเป็นปุ่ม opt_Widget_id รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ระบุ
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>
        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>