ให้เรตสมาชิก: 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

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
B - บริษัท approve ประวัติที่ส่งมาสมัครเเล้ว เเต่ยังแสดงสถานะเดิมอยู่
โดย thatsawan อ 26 พฤษภาคม 2020 6:27 pm บอร์ด Odoojob.com - Tester
0
4
อ 26 พฤษภาคม 2020 6:27 pm โดย thatsawan
อยากทราบวิธีการแก้ไข ภาษาไทยกลายอักษรแปลกๆ
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 4:35 pm บอร์ด Programming - PHP
1
22
จ 25 พฤษภาคม 2020 5:43 pm โดย thatsawan
อยากทราบวิธีการ แบบคอลัมเป็น 3 คอลีม โดยใช้ tag <dl>
โดย Ittichai_chupol จ 25 พฤษภาคม 2020 11:56 am บอร์ด HTML CSS
1
28
จ 25 พฤษภาคม 2020 2:42 pm โดย thatsawan
บันทึกประชุม มารียา ซีฟู้ดส์
โดย thatsawan จ 25 พฤษภาคม 2020 11:40 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
1
จ 25 พฤษภาคม 2020 11:40 am โดย thatsawan
10 สุดยอดสตรีทฟู้ดในแอฟริกาตะวันตก
โดย Anonymous อ 24 พฤษภาคม 2020 9:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
42
จ 25 พฤษภาคม 2020 8:03 pm โดย ขุนพล ตั้นตระกูล
ข้อมูลสำหรับทำระบบ
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดดความคืบหน้า / Progress - มารียา ซีฟู้ดส์
โดย mindphp อ 24 พฤษภาคม 2020 4:07 am บอร์ด มารียา ซีฟู้ดส์ (Main)
0
3
อ 24 พฤษภาคม 2020 4:07 am โดย mindphp
อัพเดด Template เว็บไซต์ FDD (V2)
โดย mindphp อ 24 พฤษภาคม 2020 3:51 am บอร์ด FDD (Main)
0
1
อ 24 พฤษภาคม 2020 3:51 am โดย mindphp
R - ปรับกราฟฟิก ของเว็บ FDD
โดย mindphp อ 24 พฤษภาคม 2020 3:50 am บอร์ด FDD (Main)
0
2
อ 24 พฤษภาคม 2020 3:50 am โดย mindphp
ความคืบหน้า / Progress
โดย mindphp อ 24 พฤษภาคม 2020 3:46 am บอร์ด FDD (Main)
1
3
อ 26 พฤษภาคม 2020 8:18 am โดย mindphp
VDO - SP Page builder
โดย numtan5839 ศ 22 พฤษภาคม 2020 6:27 pm บอร์ด SP Page Builder Thai Edition - Manual & VDO & เทคนิคการใช้งาน
1
7
ศ 22 พฤษภาคม 2020 7:00 pm โดย mindphp
วิธีการใช้ Google Tasks แอพจัดการบันทึกสิ่งที่ต้องทำ
โดย sirirat ศ 22 พฤษภาคม 2020 11:04 am บอร์ด Share Knowledge
0
62
ศ 22 พฤษภาคม 2020 11:04 am โดย sirirat
งานประจำวันที่ 22 พฤษภาคม 2563
โดย sirirat ศ 22 พฤษภาคม 2020 10:10 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
1
15
ศ 22 พฤษภาคม 2020 11:22 am โดย numtan5839
สรุปการเรียนรู้ประจำวัน 21/05/63
โดย sirirat ศ 22 พฤษภาคม 2020 10:08 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
ศ 22 พฤษภาคม 2020 10:08 am โดย sirirat
รายงานความคืบหน้า / Process
โดย mindphp ศ 22 พฤษภาคม 2020 1:07 am บอร์ด SP Page Builder Thai Edition (Main)
1
3
ศ 22 พฤษภาคม 2020 1:34 am โดย mindphp
ส่ง site map ให้ google แต่ไม่โชว์ในเมนูบนเว็บเรา จะมีผลอะไรกับเว็บไหมครับ
โดย toonytoony2004 พฤ 21 พฤษภาคม 2020 10:17 pm บอร์ด Joomla Development
6
94
ส 23 พฤษภาคม 2020 10:56 pm โดย toonytoony2004
B - เวลาของบอร์ดไม่ตรงเวลาไทย
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:19 pm บอร์ด Odoojob.com - Tester
0
2
พฤ 21 พฤษภาคม 2020 5:19 pm โดย thatsawan
(Close)B - ข้อความแนะนำตัว ของผู้สมัครไม่แสดงใน บริษัทที่เปิดรับ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:18 pm บอร์ด Odoojob.com - Tester
2
5
อ 26 พฤษภาคม 2020 6:22 pm โดย thatsawan
R - [email Formart-หาคน] เเจ้งเมื่อมีคนสมัครงานใน Odoojob
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:12 pm บอร์ด Odoojob.com - Manual & Content
0
1
พฤ 21 พฤษภาคม 2020 5:12 pm โดย thatsawan
B - บริษัทหาคน ต้องการเปลี่ยน Email รับสมัครงานหาทางเข้าไม่เจอ
โดย thatsawan พฤ 21 พฤษภาคม 2020 5:07 pm บอร์ด Odoojob.com - Tester
0
3
พฤ 21 พฤษภาคม 2020 5:07 pm โดย thatsawan