reCAPTCHA v3 แสดงคะแนนของแต่ละคําขอโดยไม่รบกวนผู้ใช้ คะแนนจะขึ้นอยู่กับการโต้ตอบกับเว็บไซต์ของคุณ และช่วยให้คุณดําเนินการที่เหมาะสมกับเว็บไซต์ได้ ลงทะเบียนคีย์ reCAPTCHA v3 ในคอนโซลผู้ดูแลระบบ reCAPTCHA
หน้านี้จะอธิบายวิธีเปิดใช้และปรับแต่ง reCAPTCHA v3 ในหน้าเว็บ
ตําแหน่งบนเว็บไซต์ของคุณ
reCAPTCHA เวอร์ชัน 3 จะไม่รบกวนผู้ใช้ คุณจึงเรียกใช้ได้ทุกเมื่อที่ต้องการโดยไม่ส่งผลต่อ Conversion reCAPTCHA จะทํางานได้ดีที่สุดเมื่อมีบริบทมากที่สุดเกี่ยวกับการโต้ตอบกับเว็บไซต์ ซึ่งมาจากการดูทั้งพฤติกรรมที่ถูกกฎหมายและการละเมิด ด้วยเหตุนี้ เราขอแนะนําให้รวมการยืนยัน reCAPTCHA ในแบบฟอร์มหรือการดําเนินการต่างๆ รวมถึงในเบื้องหลังของหน้าสําหรับการวิเคราะห์ด้วย
คุณใช้ reCAPTCHA ในการดําเนินการต่างๆ ได้มากเท่าที่ต้องการในหน้าเดียวกัน
เชื่อมโยงคําถามกับปุ่มโดยอัตโนมัติ
วิธีที่ง่ายที่สุดในการใช้ reCAPTCHA v3 ในหน้าเว็บคือการใส่ทรัพยากร JavaScript ที่จําเป็นและเพิ่มแอตทริบิวต์ 2-3 รายการลงในปุ่ม HTML
โหลด JavaScript API
<script src="https://www.google.com/recaptcha/api.js"></script>
เพิ่มฟังก์ชันเรียกกลับเพื่อจัดการโทเค็น
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } </script>
เพิ่มแอตทริบิวต์ลงในปุ่ม HTML
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>
เรียกใช้ปัญหาแบบเป็นโปรแกรม
หากต้องการควบคุมการเรียกใช้ reCAPTCHA ได้มากขึ้น ให้ใช้เมธอด execute
ในออบเจ็กต์ grecaptcha
โดยในการดําเนินการ คุณต้องเพิ่มพารามิเตอร์ render
ลงในโหลดสคริปต์ reCAPTCHA
โหลด JavaScript API ด้วยคีย์เว็บไซต์
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
โทรหา
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>
ส่งโทเค็นไปยังแบ็กเอนด์ทันทีด้วยคําขอยืนยัน
การตีความคะแนน
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
}
จากคนวงใน
grecaptcha.ready()
เรียกใช้ฟังก์ชันของคุณเมื่อไลบรารี reCAPTCHA โหลด เพื่อหลีกเลี่ยงเงื่อนไขการแข่งขันด้วยapi.js
ให้ใส่api.js
ก่อนสคริปต์ที่เรียกใช้ grecaptcha หรือใช้ backloadback ที่กําหนดด้วย v2 API ต่อไป- ลองดึงดูดการโทรของ
execute
ไปยังการดําเนินการที่น่าสนใจหรือมีความละเอียดอ่อน เช่น ลงทะเบียน รีเซ็ตรหัสผ่าน ซื้อ หรือ Play - ใช้
https://www.google.com/recaptcha/api.js?trustedtypes=true
เพื่อโหลดโค้ดที่ใช้กับประเภทที่เชื่อถือได้