reCAPTCHA เวอร์ชัน 3

reCAPTCHA v3 แสดงคะแนนของแต่ละคําขอโดยไม่รบกวนผู้ใช้ คะแนนจะขึ้นอยู่กับการโต้ตอบกับเว็บไซต์ของคุณ และช่วยให้คุณดําเนินการที่เหมาะสมกับเว็บไซต์ได้ ลงทะเบียนคีย์ reCAPTCHA v3 ในคอนโซลผู้ดูแลระบบ reCAPTCHA

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

ตําแหน่งบนเว็บไซต์ของคุณ

reCAPTCHA เวอร์ชัน 3 จะไม่รบกวนผู้ใช้ คุณจึงเรียกใช้ได้ทุกเมื่อที่ต้องการโดยไม่ส่งผลต่อ Conversion reCAPTCHA จะทํางานได้ดีที่สุดเมื่อมีบริบทมากที่สุดเกี่ยวกับการโต้ตอบกับเว็บไซต์ ซึ่งมาจากการดูทั้งพฤติกรรมที่ถูกกฎหมายและการละเมิด ด้วยเหตุนี้ เราขอแนะนําให้รวมการยืนยัน reCAPTCHA ในแบบฟอร์มหรือการดําเนินการต่างๆ รวมถึงในเบื้องหลังของหน้าสําหรับการวิเคราะห์ด้วย

คุณใช้ reCAPTCHA ในการดําเนินการต่างๆ ได้มากเท่าที่ต้องการในหน้าเดียวกัน

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

วิธีที่ง่ายที่สุดในการใช้ reCAPTCHA v3 ในหน้าเว็บคือการใส่ทรัพยากร JavaScript ที่จําเป็นและเพิ่มแอตทริบิวต์ 2-3 รายการลงในปุ่ม HTML

  1. โหลด JavaScript API

     <script src="https://www.google.com/recaptcha/api.js"></script>
    
  2. เพิ่มฟังก์ชันเรียกกลับเพื่อจัดการโทเค็น

     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
    
  3. เพิ่มแอตทริบิวต์ลงในปุ่ม HTML

    <button class="g-recaptcha" 
            data-sitekey="reCAPTCHA_site_key" 
            data-callback='onSubmit' 
            data-action='submit'>Submit</button>
    

เรียกใช้ปัญหาแบบเป็นโปรแกรม

หากต้องการควบคุมการเรียกใช้ reCAPTCHA ได้มากขึ้น ให้ใช้เมธอด execute ในออบเจ็กต์ grecaptcha โดยในการดําเนินการ คุณต้องเพิ่มพารามิเตอร์ render ลงในโหลดสคริปต์ reCAPTCHA

  1. โหลด JavaScript API ด้วยคีย์เว็บไซต์

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
    
  2. โทรหา grecaptcha.execute ในแต่ละการดําเนินการที่ต้องการปกป้อง

       <script>
          function onClick(e) {
            e.preventDefault();
            grecaptcha.ready(function() {
              grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
                  // Add your logic to submit to your backend server here.
              });
            });
          }
      </script>
    
  3. ส่งโทเค็นไปยังแบ็กเอนด์ทันทีด้วยคําขอยืนยัน

การตีความคะแนน

reCAPTCHA เวอร์ชัน 3 แสดงคะแนน (1.0 มีแนวโน้มที่จะเป็นการโต้ตอบที่ดี 0.0 มีแนวโน้มที่จะเป็นบ็อตอย่างมาก) คุณจะดําเนินการตามตัวแปรในบริบทของเว็บไซต์ได้โดยอิงตามคะแนน เว็บไซต์แต่ละเว็บมีความแตกต่างกัน แต่ด้านล่างนี้เป็นตัวอย่างการใช้คะแนน ในตัวอย่างด้านล่าง ให้ทําตามขั้นตอนเบื้องหลังแทนการบล็อกการเข้าชมเพื่อปกป้องเว็บไซต์ให้ดียิ่งขึ้น

กรณีการใช้งาน คำแนะนำ
หน้าแรก ดูมุมมองที่สอดคล้องกันของการเข้าชมในคอนโซลผู้ดูแลระบบขณะกรองการคัดลอก
login หากเป็นคะแนนต่ํา ต้องมีการตรวจสอบสิทธิ์แบบ 2 ปัจจัยหรือการยืนยันอีเมลเพื่อป้องกันการโจมตีเกี่ยวกับข้อมูลเข้าสู่ระบบ
social จํากัดคําขอของเพื่อนที่ยังไม่ได้ตอบจากผู้ใช้ที่ละเมิดและส่งความคิดเห็นที่มีความเสี่ยงเพื่อดูแล
อีคอมเมิร์ซ เพิ่มยอดขายจริงให้กับบ็อตและระบุธุรกรรมที่มีความเสี่ยง

reCAPTCHA เรียนรู้ด้วยการดูการเข้าชมจริงบนเว็บไซต์ของคุณ ด้วยเหตุนี้ คะแนนในสภาพแวดล้อมทดลองใช้หรือไม่นานหลังจากติดตั้งใช้งานจึงอาจแตกต่างจากเวอร์ชันที่ใช้งานจริง เนื่องจาก reCAPTCHA v3 ไม่รบกวนขั้นตอนของผู้ใช้ คุณสามารถเรียกใช้ reCAPTCHA ได้โดยไม่ต้องดําเนินการใดๆ จากนั้นตัดสินใจเกี่ยวกับเกณฑ์โดยดูจากการเข้าชมในคอนโซลผู้ดูแลระบบ โดยค่าเริ่มต้น คุณสามารถใช้เกณฑ์ที่ 0.5 ได้

การดำเนินการ

reCAPTCHA v3 มาพร้อมคอนเซ็ปต์ใหม่ ได้แก่ การทํางาน เมื่อคุณระบุชื่อการดําเนินการในแต่ละที่ที่คุณใช้ reCAPTCHA คุณจะเปิดใช้ฟีเจอร์ใหม่ต่อไปนี้

  • ข้อมูลแยกย่อยของข้อมูลสําหรับการดําเนินการ 10 อันดับแรกของคุณในคอนโซลผู้ดูแลระบบ
  • การวิเคราะห์ความเสี่ยงแบบปรับอัตโนมัติตามบริบทของการดําเนินการ เนื่องจากพฤติกรรมที่ไม่เหมาะสมอาจแตกต่างกันไป

ที่สําคัญ เมื่อยืนยันการตอบกลับ reCAPTCHA คุณควรตรวจสอบว่าชื่อการกระทําคือชื่อที่คุณคาดหวัง

การตอบกลับการยืนยันเว็บไซต์

ส่งคําขอยืนยันโทเค็นการตอบกลับเช่นเดียวกับ reCAPTCHA v2 หรือ reCAPTCHA ที่มองไม่เห็น

การตอบกลับเป็นออบเจ็กต์ JSON ดังนี้

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

จากคนวงใน

  1. grecaptcha.ready() เรียกใช้ฟังก์ชันของคุณเมื่อไลบรารี reCAPTCHA โหลด เพื่อหลีกเลี่ยงเงื่อนไขการแข่งขันด้วย api.js ให้ใส่ api.js ก่อนสคริปต์ที่เรียกใช้ grecaptcha หรือใช้ backloadback ที่กําหนดด้วย v2 API ต่อไป
  2. ลองดึงดูดการโทรของ execute ไปยังการดําเนินการที่น่าสนใจหรือมีความละเอียดอ่อน เช่น ลงทะเบียน รีเซ็ตรหัสผ่าน ซื้อ หรือ Play
  3. ใช้ https://www.google.com/recaptcha/api.js?trustedtypes=true เพื่อโหลดโค้ดที่ใช้กับประเภทที่เชื่อถือได้