ไม่ได้เขียนบทความลงในหมวดนี้มานาน พอดีช่วงนี้ Google reCAPTCHA (กูเกิล รีแคปช่า) ออก API เวอร์ชั่นใหม่ช่วยเรื่องป้องกัน Spam เลยมาเขียนบทความสอนการเอามาใช้งานซักหน่อย ติดตามกันได้เลย...

 

เมื่อไม่นานมานี้ Google ได้ออก เวอร์ชั่นใหม่ ของ Google reCAPTCHA เวอร์ชัน 3 ซึ่งทำให้การป้องกัน Spam ของเว็บไซต์ได้ดีขึ้น และลดภาระต่อผู้ใช้งานเว็บไซต์เราลงไปด้วย โดย Google ใช้หลักการในการวัดและให้คะแนนคนที่เข้ามาใช้งานเว็บไซต์เรา โดยให้ คะแนนเป็น 0.0 - 1.0 ตามความน่าเชื่อถือของ ผู้เข้าใช้งานเว็บ (Client) และทางฝั่งของเว็บไซต์เองสามารถกำหนด หรือระบุเงือนไขได้ว่าจะให้ Client คะแนนเท่าไหร่ใช้เข้าใช้งานหน้าที่เรากำหนดได้ เช่น หน้าสมัครสมาชิก ผู้เข้าใช้งานต้องมีคะแนน 0.5 ขึ้นไป, หน้าค้นหาข้อมูลในเว็บต้องมีคะแนน 0.3 ขึ้นไป เป็นต้น

สำหรับการเริ่มต้นใช้งาน Recaptcha เวอร์ชั่น 3 นั้นก็ไม่ยากขั้นตอนเหมือนกับ เวอร์ชั่น 2 โดยมีขั้นตอนดังนี้

  1. สมัครขอใช้บริการ API ตัวนี้กับทาง Google กันก่อน สำหรับใครมี Account อยุ่แล้วก็ผ่านขั้นตอนนี้ไปได้เลย วิธีการเข้าใช้งาน Google reCAPTCHA ก่อนการเขียน php
  2. เมื่อสมัครเสร็จเรียบร้อย ขอ site key และ secret key มาให้เรียบร้อย ดังภาพ หน้าจอแสดงขอ Key จาก Google Recaptcha
  3. ในส่วนของโค้ด 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 แดงๆ แสดงว่ามีอะไรผิดพลาดนะครับ สอบถามปัญหาได้ที่บอร์ดเรา
    ฟอร์มที่ใส่ recaptcha เวอร์ชั่น 3 แล้ว

  4. ส่วนของโค้ด php ทำงานฝั่ง Server แทนที่ {YOUR_RECAPTCHA_SECRET_KEY} ด้วย Secret key จากข้อ 2
    โดยค่า score ที่เราจะใช้ก็ให้ดูความสำคัญของแต่ละหน้า และ ปริมาณ spam ที่เราเคยได้รับโดยค่า Default ที่แนะนำคือ 0.5 โดยฟังก์ชั่นที่สำคัญที่บน Server ของเราต้องเปิดใช้งานไว้นั้นก็คือ ฟังก์ชั่น ฟังก์ชัน file_get_contents() นั่นเอง
    <?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';  // แจ้งข้อผิดพลาดกลับไปหน้าจอ
        }
            
        }
    ?>
    ผลของจาก ข้อ 3 และกดปุ่ม Send Message จะได้ผลจากข้อ 4 หน้าจอจะประมาณนี้
    ผลของการตัวสอบการป้องกัน Spam จะแสดง scope ให้เห็นว่า Client ที่เข้ามา ได้คะแนนเท่าไหร่

    จะเห็นว่าการใช้งานไม่ยากเลย ก่อนจบ ขอทิ้งท้ายภาพ ประกอบจาก Google รายงาน Request (การเรียกใช้ API ตัวนี้) และ % ของ Spam ที่เจอ ดังภาพ
    ภาพอธิบาย รายงาน Request และ % ของ Request ที่ไม่ปลอดภัย
    จากภาพ จะเห็นว่ามีการร้องขอใช้งาน API ตัวนี้ จากเว็บไซต์เรา 42 ครั้งในรอบ 7 วัน และมีการร้องข้อที่ Google เช็คว่าอาจเป็นอันตราย 2.4% (รายงานที่เห็นที่แต่ละเว็บที่เราเอาไปใช้ % การโดน Spam ก็จะแตกต่างกันไป แต่ถ้า % เยอะมากๆ ก็แสดงว่าเว็บเรากำลังโดนโจมตีหรือพยามโดนสแปมอยู่นั่นเอง พิจารณา เราตัวป้องกันนี้ไปไว้หน้าที่สุ่มเสี่ยงและหน้าที่ทำให้เว็บไซต์เราทำงานหนักๆ ไว้ด้วยก็ดีนะครับ)
    ขอให้ทุกคนสนุกกับการเขียนโปรแกรม

ข้อมูลอ้างอิง : https://www.google.com/recaptcha

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
โดย witsarutt000 พฤ 14 มี.ค. 2024 4:07 pm บอร์ด SQL Knowledge
1
289
พฤ 14 มี.ค. 2024 5:44 pm โดย Sirayu View Topic SQL JOIN: การรวมข้อมูลจากหลายตารางในฐานข้อมูล
PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
โดย witsarutt000 พฤ 14 มี.ค. 2024 11:17 am บอร์ด PHP Knowledge
0
180
พฤ 14 มี.ค. 2024 11:17 am โดย witsarutt000 View Topic PHP การเปลี่ยนแปลงที่สร้างปรากฏการณ์ในโลกของเว็บ
ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
โดย Thanavat_n พ 13 มี.ค. 2024 11:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
5
416
พ 13 มี.ค. 2024 1:34 pm โดย Thanavat_n View Topic ปัญหา Harddisk ขึ้น 100% เวลาเซฟไฟล์ หรือภาพ จะค้่างที่หน้าแท๊บ Expolorer
ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
โดย @Foretoday อ 12 มี.ค. 2024 1:46 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
226
อ 12 มี.ค. 2024 1:46 pm โดย @Foretoday View Topic ตู้รองเท้า ไอเท็มวิเศษช่วยจัดระเบียบคอลเลกชันรองเท้าคู่โปรด
แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
โดย witsarutt000 จ 11 มี.ค. 2024 6:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
177
จ 11 มี.ค. 2024 6:14 pm โดย witsarutt000 View Topic แนะนำสถานที่น่าเที่ยวในจังหวัดชุมพรพร้อมวิธีการเดินทาง
ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
โดย mindphp อ 10 มี.ค. 2024 4:36 am บอร์ด Linux - Web Server
0
272
อ 10 มี.ค. 2024 4:36 am โดย mindphp View Topic ย้าย VM ข้าม Host ด้วย scp กรณีศึกษา Vmware ESXI
IP และ vpn (VMware)
โดย ballmykids อ 10 มี.ค. 2024 2:35 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
230
จ 11 มี.ค. 2024 3:19 pm โดย ballmykids View Topic IP และ vpn (VMware)
แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว
โดย Anonymous ศ 08 มี.ค. 2024 7:02 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
1
190
ศ 08 มี.ค. 2024 8:12 pm โดย mindphp View Topic แบบนี้ต้องทำยังไง ในกรณีที่ Server เดิมเราได้ทำการ Raid 1 กับ HDD 2 ลูกแรกแล้ว