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

reCAPTCHA ที่ไม่แสดง

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

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

เชื่อมโยงคำถามกับปุ่มโดยอัตโนมัติ หรือ
เชื่อมโยงปัญหากับปุ่มแบบเป็นโปรแกรม หรือ
สร้างความท้าทายแบบเป็นโปรแกรม

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

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

เชื่อมโยงภารกิจกับปุ่มโดยอัตโนมัติ

วิธีที่ง่ายที่สุดในการใช้วิดเจ็ต reCAPTCHA ที่ไม่แสดงในหน้าเว็บคือการรวมทรัพยากร JavaScript ที่จำเป็นและเพิ่มแอตทริบิวต์ 2-3 รายการในปุ่ม HTML แอตทริบิวต์ที่จำเป็นคือชื่อคลาส "g-recaptcha" คีย์ของเว็บไซต์ในแอตทริบิวต์ data-sitekey และชื่อของ Callback ที่เป็น 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 และสามารถรวมสคริปต์จากจุดใดก็ได้บนหน้าเว็บโดยไม่มีข้อจำกัด

เชื่อมโยงชาเลนจ์กับปุ่มหรือเรียกใช้ชาเลนจ์แบบเป็นโปรแกรม

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

การกำหนดค่า

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

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

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

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

JavaScript API

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