ให้เรตสมาชิก: 5 / 5

ดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งานดาวใช้งาน
 

ไม่ได้เขียนบทความลงในหมวดนี้มานาน พอดีช่วงนี้ 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อะไรบ้างที่คุณต้องรู้เกี่ยวกับการ ‘ซ่อมนาฬิกา’ !
โดย totheworld พฤ 21 ม.ค. 2021 3:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
1
พฤ 21 ม.ค. 2021 3:05 pm โดย totheworld
ขอวิธีบันทึกหน้าจอในนิมบัสโดยที่ไม่ติด URL และสามารถเปลี่ยน Tab ได้
โดย Kannaphat พฤ 21 ม.ค. 2021 1:55 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
2
6
พฤ 21 ม.ค. 2021 2:25 pm โดย Kannaphat
ของวิธีแก้การเขียน Python เเล้วติด UnicodeEncodeError
โดย chakirin.bfds พฤ 21 ม.ค. 2021 11:27 am บอร์ด Programming - C/C++ & java & Python
2
17
พฤ 21 ม.ค. 2021 11:43 am โดย chakirin.bfds
Apple A14 Bionic ที่สุดของ CPU iPhone 12 ดีจริงไหมไปหาคำตอบกัน
โดย Anonymous อ 19 ม.ค. 2021 11:30 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
19
พ 20 ม.ค. 2021 11:53 pm โดย DanielPe
ใช้ <i> ใส่ชื่อ icon ที่จะใช้แล้วไม่แสดงบนหน้าจอ
โดย eange08 อ 19 ม.ค. 2021 7:31 pm บอร์ด HTML CSS
1
13
อ 19 ม.ค. 2021 7:36 pm โดย eange08
สอบถามการดึงค่าใน array ที่ได้จาก api กรมอุตุ
โดย eange08 อ 19 ม.ค. 2021 4:43 pm บอร์ด Programming - PHP
2
28
อ 19 ม.ค. 2021 6:48 pm โดย eange08
เรียกค่า api ของกรมอุตุนิยมวิทยา
โดย eange08 อ 19 ม.ค. 2021 3:32 pm บอร์ด Programming - PHP
2
27
อ 19 ม.ค. 2021 3:54 pm โดย eange08
มาทำความรู้จักส่วนประกอบของเรียงความภาษาอังกฤษ
โดย Kannaphat อ 19 ม.ค. 2021 1:03 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
15
อ 19 ม.ค. 2021 1:03 pm โดย Kannaphat