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

reCAPTCHA ที่ไม่แสดง

หน้านี้จะอธิบายถึงวิธีการเปิดใช้งานและกำหนดค่า reCAPTCHA ที่ไม่แสดงบนหน้าเว็บของคุณ

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

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

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

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

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

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

การกำหนดค่า

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

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

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

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

JavaScript API

วิธีการ	คำอธิบาย
grecaptcha.render( คอนเทนเนอร์ พารามิเตอร์ ใช้ต่อ )	แสดงผลคอนเทนเนอร์เป็นวิดเจ็ต reCAPTCHA และแสดงผลรหัสของวิดเจ็ตที่สร้างขึ้นใหม่ container องค์ประกอบ HTML ที่จะแสดงวิดเจ็ต reCAPTCHA ระบุรหัสของคอนเทนเนอร์ (สตริง) หรือตัวองค์ประกอบ DOM เอง parameters ออบเจ็กต์ที่มีพารามิเตอร์เป็นคู่คีย์=ค่า เช่น {"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 รหัสวิดเจ็ตที่ไม่บังคับ จะมีค่าเริ่มต้นเป็นวิดเจ็ตแรกที่สร้างขึ้นหากไม่ได้ระบุ

ตัวอย่าง

การแสดงผลอย่างชัดแจ้งหลังโค้ดเรียกกลับขณะโหลด

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