reCAPTCHA เวอร์ชัน 3

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

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

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

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

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

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

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

  1. โหลด JavaScript API

     <script src="https://www.google.com/recaptcha/api.js"></script>

  2. เพิ่มฟังก์ชัน Callback เพื่อจัดการโทเค็น

     <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 v3 แสดงคะแนน (1.0 คือการโต้ตอบที่ดี 0.0 น่าจะเป็นบ็อตอย่างมาก) คุณสามารถใช้การดำเนินการที่เปลี่ยนแปลงได้ตามบริบทของเว็บไซต์ ทั้งนี้ขึ้นอยู่กับคะแนนของคุณ ทุกเว็บไซต์ ต่างกันไป แต่ด้านล่างนี้คือตัวอย่างบางส่วนของวิธีที่เว็บไซต์ใช้คะแนนดังกล่าว ตามตัวอย่างด้านล่าง ดู ทำงานอยู่เบื้องหลังแทนการบล็อกการเข้าชมเพื่อปกป้องเว็บไซต์ให้ดีขึ้น

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

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 หรือใช้ต่อไป onload Callback ที่กำหนดด้วย v2 API
  2. ลองดึงดูดคำกระตุ้นให้ดำเนินการ execute ที่น่าสนใจหรือมีความละเอียดอ่อน เช่น ลงทะเบียน รีเซ็ตรหัสผ่าน ซื้อ หรือเล่น
  3. ใช้ https://www.google.com/recaptcha/api.js?trustedtypes=true เพื่อ โหลดโค้ดที่เข้ากันได้กับประเภทที่เชื่อถือได้