background

ป้องกัน Spam บนเว็บของคุณ ด้วย reCAPTCHA

6 months ago ◦ 1,028 Views

ป้องกัน Spam บนเว็บของคุณ ด้วย reCAPTCHA

ป้องกัน Spam บนเว็บของคุณ ด้วย reCAPTCHA

reCAPTCHA พัฒนาโดย Google เพื่อช่วยป้องกันไม่ให้เว็บไซต์โดน Spam จากพวกบอทต่างๆ ที่แฝงตัวเข้ามาโจมตีเว็บไซต์ของเราแบบเงียบๆ

วิธีป้องกันก็คือให้ user เป็นคนยืนยันเลยว่าตัวเองเป็นคน ไม่ใช่บอท โดยจะให้ user เป็นคนตอบคำถามบางอย่างที่บอทไม่สามารถตอบได้ เช่น ให้เลือกรูปที่คล้ายกับรูปตัวอย่างแบบนี้ 


สโลแกนคือ "ยากสำหรับบอท ง่ายสำหรับคน"


เปิดใช้งาน reCAPTCHA

เข้าไปที่เว็บ https://www.google.com/recaptcha (จำเป็นต้องเข้าสู่ระบบโดยใช้บัญชี gmail ของเราก่อน) แล้วคลิกปุ่ม "My reCAPTCHA" 


จะเจอฟอร์มให้ลงทะเบียนเว็บไซต์ของเรา และมี 3 ประเภทให้เลือกครับ

1. reCAPTCHA v2 (มีช่อง checkbox คลิกแล้วให้ user เลือกรูปภาพ)
2. Invisible reCAPTCHA (ทำงานเบื้องหลัง ไม่แสดงให้เห็น)
3. reCAPTCHA Android (สำหรับใช้งานบน Android)

ในที่นี้เลือกเป็น reCAPTCHA v2 ครับ ส่วนช่องโดเมนสามารถใส่โดเมนที่จะใช้งานได้หลายโดเมนนะครับ

เสร็จแล้วเราก็จะได้กุญแจ มาใช้งาน 2 อันคือ Site key ไว้ใช้งานกับฟอร์มและ Secret key ไว้เชื่อมต่อกับ Google (เก็บไว้เป็นความลับด้วยนะครับ) 


การติดตั้งบนเว็บไซต์

ในช่อง Step 1 ให้ Copy โค้ดทั้งสองอัน ไปวางในหน้าเว็บของเราครับ

ในหน้านี้เราอาจเขียนสคริปต์ป้องกันไม่ให้คนกด submit ก่อนใส่ reCAPTCHA โดยการ disabled ปุ่ม submit ไว้ก่อน แล้วเขียน function เปิดใช้ปุ่มเมื่อได้รับ callback จาก reCAPTCHA ก่อนแบบนี้

แล้วก็เพิ่ม data-callback ที่ .g-recaptcha ด้วยนะครับ

ส่วนที่ฝั่ง Server side หรือฝั่งหน้ารับค่าข้อมูลก็ให้เขียนเช็คด้วยว่าพารามิเตอร์ g-recaptcha-response ที่ submit เข้ามาเป็นค่าที่ถูกต้องจริงๆ โดยการ call api ไปหา google ตามตัวอย่างนี้ (เปลี่ยน your_secretekey ด้วยนะ)

$captcha;       
if(isset($_POST['g-recaptcha-response'])){ 
$captcha=$_POST['g-recaptcha-response'];
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=your_secretkey&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);        
}
if($response['success'] == true){
    // Your Code Here
}


การติดตั้งบน Wordpress

มีปลั๊กอินให้ดาวน์โหลดมาติดตั้งได้หลายตัวเลย ขอตัวอย่างแบบ Invisible reCAPTCHA บ้างนะครับ ค้นหาและติดตั้งปลั๊กอินชื่อ Invisible reCaptcha for WordPress นะครับ

คลิกปุ่ม "ใช้งาน" แล้วเข้าไปตั้งค่าโดยคลิกที่เมนู Settings -> Invisible reCaptcha

แล้วใส่ข้อมูล Site Key และ Secrete Key ของเราครับ จะเลือกภาษาหรือตั้งก็ค่าตำแหน่งการแสดงด้วยก็ได้ครับ

และเลือกด้วยว่าจะให้ป้องกันที่หน้าไหนบ้าง

เสร็จแล้ว Invisible reCaptcha จะแสดงสัญลักษณ์แบบนี้ที่หน้าที่เราต้องการให้ป้องกันครับ




#php #wordpress #tutorial #website #recaptcha #security #spam #bot

View count: 1,028
  • avatar
  • Save Pongsiri ศิลปินด้านพัฒนาซอฟต์แวร์ มีเป้าหมายคือพัฒนาตัวเองให้ยืดหยุ่นที่สุด ชอบความเรียบง่าย,ดนตรี,กีฬา และแมว