ป้องกัน 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 จะแสดงสัญลักษณ์แบบนี้ที่หน้าที่เราต้องการให้ป้องกันครับ
Originally published at ideagital.com.
