ไม่ได้เขียนบทความลงในหมวดนี้มานาน พอดีช่วงนี้ Google reCAPTCHA (กูเกิล รีแคปช่า) ออก API เวอร์ชั่นใหม่ช่วยเรื่องป้องกัน Spam เลยมาเขียนบทความสอนการเอามาใช้งานซักหน่อย ติดตามกันได้เลย...
เมื่อไม่นานมานี้ Google ได้ออก เวอร์ชั่นใหม่ ของ Google reCAPTCHA เวอร์ชัน 3 ซึ่งทำให้การป้องกัน Spam ของเว็บไซต์ได้ดีขึ้น และลดภาระต่อผู้ใช้งานเว็บไซต์เราลงไปด้วย โดย Google ใช้หลักการในการวัดและให้คะแนนคนที่เข้ามาใช้งานเว็บไซต์เรา โดยให้ คะแนนเป็น 0.0 - 1.0 ตามความน่าเชื่อถือของ ผู้เข้าใช้งานเว็บ (Client) และทางฝั่งของเว็บไซต์เองสามารถกำหนด หรือระบุเงือนไขได้ว่าจะให้ Client คะแนนเท่าไหร่ใช้เข้าใช้งานหน้าที่เรากำหนดได้ เช่น หน้าสมัครสมาชิก ผู้เข้าใช้งานต้องมีคะแนน 0.5 ขึ้นไป, หน้าค้นหาข้อมูลในเว็บต้องมีคะแนน 0.3 ขึ้นไป เป็นต้น
สำหรับการเริ่มต้นใช้งาน Recaptcha เวอร์ชั่น 3 นั้นก็ไม่ยากขั้นตอนเหมือนกับ เวอร์ชั่น 2 โดยมีขั้นตอนดังนี้
- สมัครขอใช้บริการ API ตัวนี้กับทาง Google กันก่อน สำหรับใครมี Account อยุ่แล้วก็ผ่านขั้นตอนนี้ไปได้เลย วิธีการเข้าใช้งาน Google reCAPTCHA ก่อนการเขียน php
- เมื่อสมัครเสร็จเรียบร้อย ขอ site key และ secret key มาให้เรียบร้อย ดังภาพ
- ในส่วนของโค้ด HTML, PHP ตามตัวอย่างจะเป็นฟอร์มส่งข้อมูล สามารถนำไปใช้ได้กับ ฟอร์มสมัครสมาชิก, ฟอร์มค้นหาข้อมูล, ฟอร์มส่งเมล หรืออื่นๆ ตามที่ Porject ท่านต้องการ ตัวอย่างโค้ดส่วนของฟอร์ม HTML แทนที่ {YOUR_RECAPTCHA_SITE_KEY} ด้วย site key จากข้อ 2
<html itemscope="" itemtype="http://schema.org/WebPage" lang="en-TH"> <head> <title>ทดลองใช้ Google reCAPTCHA v3</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"> <script src="https://www.google.com/recaptcha/api.js?render={YOUR_RECAPTCHA_SITE_KEY}"></script> <script> grecaptcha.ready(function () { grecaptcha.execute('{YOUR_RECAPTCHA_SITE_KEY}', { action: 'contact' }).then(function (token) { var recaptchaResponse = document.getElementById('recaptchaResponse'); recaptchaResponse.value = token; }); }); </script> </head> <body> <section class="section"> <div class="container"> <div class="columns"> <div class="column is-half"> <form method="POST"> <h1 class="title"> ตัวอย่างการใช้ Google reCAPTCHA v3 (เวอร์ชั่น 3) </h1> <div class="field"> <label class="label">Name</label> <div class="control"> <input type="text" name="name" class="input" placeholder="Name" required> </div> </div> <div class="field"> <label class="label">Message</label> <div class="control"> <textarea name="message" class="textarea" placeholder="Message" required></textarea> </div> </div> <div class="field is-grouped"> <div class="control"> <button type="submit" class="button is-link">Send Message</button> </div> </div> <input type="hidden" name="recaptcha_response_check" id="recaptchaResponse"> </form> </div> </div> </div> </section> </body> </html>
ถ้าไม่มีอะไรผิดพลาดจะได้ผลตามตัวอย่างรูปต่อไปนี้ สังเกตตรงมุมขวาด้านล่างจะมี ไอคอนของ ตัวเช็ค spam ของ Google recaptcha เวอร์ชั่น 3 โชว์มาให้เห็น ถ้ามี Error แดงๆ แสดงว่ามีอะไรผิดพลาดนะครับ สอบถามปัญหาได้ที่บอร์ดเรา
- ส่วนของโค้ด php ทำงานฝั่ง Server แทนที่ {YOUR_RECAPTCHA_SECRET_KEY} ด้วย Secret key จากข้อ 2
โดยค่า score ที่เราจะใช้ก็ให้ดูความสำคัญของแต่ละหน้า และ ปริมาณ spam ที่เราเคยได้รับโดยค่า Default ที่แนะนำคือ 0.5 โดยฟังก์ชั่นที่สำคัญที่บน Server ของเราต้องเปิดใช้งานไว้นั้นก็คือ ฟังก์ชั่น ฟังก์ชัน file_get_contents() นั่นเอง
ผลของจาก ข้อ 3 และกดปุ่ม Send Message จะได้ผลจากข้อ 4 หน้าจอจะประมาณนี้<?php if ($_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['recaptcha_response_check'])) { $recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify'; $recaptcha_secret = '{YOURRECAPTCHASECRET_KEY}'; $recaptcha_response = $_POST['recaptcha_response_check']; // Make and decode POST request: $recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response); // เรียกใช้งาน recaptcha API ของ Google $recaptcha = json_decode($recaptcha); // แปลงค่ากลับมาเป็น object print_r($recaptcha); // เช็คตรวจสอบผลเพื่อที่งานของเรา if ($recaptcha->score >= 0.5) { echo 'ผ่านการตรวจสอบ spam'; // TODO งานที่ต้องทำ } else { echo 'ไม่ผ่านการตรวจสอบ Spame'; // แจ้งข้อผิดพลาดกลับไปหน้าจอ } } ?>
จะเห็นว่าการใช้งานไม่ยากเลย ก่อนจบ ขอทิ้งท้ายภาพ ประกอบจาก Google รายงาน Request (การเรียกใช้ API ตัวนี้) และ % ของ Spam ที่เจอ ดังภาพ
จากภาพ จะเห็นว่ามีการร้องขอใช้งาน API ตัวนี้ จากเว็บไซต์เรา 42 ครั้งในรอบ 7 วัน และมีการร้องข้อที่ Google เช็คว่าอาจเป็นอันตราย 2.4% (รายงานที่เห็นที่แต่ละเว็บที่เราเอาไปใช้ % การโดน Spam ก็จะแตกต่างกันไป แต่ถ้า % เยอะมากๆ ก็แสดงว่าเว็บเรากำลังโดนโจมตีหรือพยามโดนสแปมอยู่นั่นเอง พิจารณา เราตัวป้องกันนี้ไปไว้หน้าที่สุ่มเสี่ยงและหน้าที่ทำให้เว็บไซต์เราทำงานหนักๆ ไว้ด้วยก็ดีนะครับ)
ขอให้ทุกคนสนุกกับการเขียนโปรแกรม
ข้อมูลอ้างอิง : https://www.google.com/recaptcha