วิธีติดตั้ง Google reCAPTCHA บนฟอร์มเว็บ v2 และ v3

nutjari

6 พ.ย. 2024 — 2 min read

Google reCAPTCHA เป็นเครื่องมือที่ช่วยป้องกันสแปมหรือบอทเข้าสู่ระบบเว็บไซต์ โดยให้ผู้ใช้ตรวจสอบตนเองว่าเป็นมนุษย์หรือไม่ ด้วย reCAPTCHA โดยปัจจุบันมีเวอร์ชันล่าสุด (v2 และ v3) การป้องกันนี้ถูกพัฒนาเพื่อลดการรบกวนผู้ใช้และให้ระบบทำงานได้อย่างแม่นยำ ในบทความนี้ เราจะมาแนะนำวิธีการติดตั้ง reCAPTCHA บนฟอร์มเว็บ และสรุปข้อแตกต่างระหว่าง reCAPTCHA v2 กับ v3

ความแตกต่างระหว่าง Google reCAPTCHA v2 และ v3

reCAPTCHA v2

ผู้ใช้ต้องทำการยืนยันด้วยการคลิก "I'm not a robot" หรือแก้ไขภาพปริศนา
สามารถตั้งค่าให้แสดง Checkbox reCAPTCHA หรือ Invisible reCAPTCHA ซึ่งจะทำงานโดยอัตโนมัติโดยไม่ต้องมีการตอบกลับจากผู้ใช้
ให้ประสบการณ์ผู้ใช้ที่เข้าใจง่าย แต่เพิ่มขั้นตอนการใช้งานเล็กน้อย

reCAPTCHA v3

ไม่ต้องให้ผู้ใช้คลิกหรือทำการยืนยันใด ๆ
ทำงานโดยการวิเคราะห์พฤติกรรมของผู้ใช้ในเบื้องหลัง และให้คะแนนการใช้ (score) ว่าผู้ใช้เป็นบอทหรือไม่ (ค่าคะแนนอยู่ระหว่าง 0.0-1.0)
การใช้งาน v3 จะเหมาะสำหรับฟอร์มที่ต้องการประสบการณ์ที่ราบรื่นและไม่รบกวนผู้ใช้งาน

ขั้นตอนการติดตั้ง Google reCAPTCHA v2

ลงทะเบียนเว็บไซต์ใน Google reCAPTCHA Console
- ไปที่ Google reCAPTCHA Admin Console
- สร้าง Site Key และ Secret Key สำหรับ reCAPTCHA v2 ใส่ ป้ายกำกับ (Label)
- เลือกประเภทเป็น "Challenge v2" และเลือก "I'm not a robot Checkbox"
- ใส่ domain name website ของเราที่ต้องการติดตั้ง reCAPTCHA จากนั้นกด submit
ฝัง reCAPTCHA ลงในฟอร์ม HTML
ในฟอร์ม html เช่น register.html ใส่ code checkbox reCAPTCHA ก่อน button tag และใส่ script การเรียก reCAPTCHA ก่อนปิด body tag ตามรูปด้านล่างนี้

<html>
<head>
<!-- Google reCAPTCHA v2 -->
    <script src="https://www.google.com/recaptcha/api.js" async defer</script>
</head>
<body>
<form>
<!-- Checkbox reCAPTCHA v2 -->
     <div class="g-recaptcha" data-sitekey="YOUR_SITE_KEY"></div>

    <button type="submit">Register</button>
</form>
</body>
</html>

หมายเหตุ: แทนที่ "YOUR_SITE_KEY" ด้วย Site Key ที่ได้จาก Google reCAPTCHA Console

ในไฟล์รับค่าจากฟอร์ม เช่น register.php ใส่ค่า secret key และส่งข้อมูล reCAPTCHA ไปตรวจสอบกับ Google ตามรูปด้านล่างนี้

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {

    // กำหนด Secret Key ของ reCAPTCHA v2
    $secret = 'YOUR_SECRET_KEY';
    $captcha = $_POST['g-recaptcha-response'];

    // ตรวจสอบว่า reCAPTCHA ได้ถูกกรอกแล้วหรือไม่

    if (empty($captcha)) {
        echo "กรุณาทำการยืนยัน reCAPTCHA ก่อน";
        exit;
    }

    // ส่งข้อมูล reCAPTCHA ไปตรวจสอบกับ Google

    $verifyResponse = file_get_contents("https://www.google.com/recaptcha/api
                      /siteverify?secret=$secret&response=$captcha");
    $responseData   = json_decode($verifyResponse);

    if ($responseData->success) {
    
        // หากการยืนยันสำเร็จ
        $username = $_POST['username'];
        $email = $_POST['email'];
        $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
        
        // บันทึกข้อมูลผู้ใช้ลงในฐานข้อมูล หรือกระบวนการอื่น ๆ
        echo "Registration successful!";
    } else {
        // หากการยืนยันไม่สำเร็จ
        echo "reCAPTCHA verification failed. Please try again.";
    }
}
?>

ขั้นตอนการติดตั้ง Google reCAPTCHA v3

ลงทะเบียนเว็บไซต์ใน Google reCAPTCHA Console
- ไปที่ Google reCAPTCHA Admin Console
- สร้าง Site Key และ Secret Key สำหรับ reCAPTCHA v3 ใส่ ป้ายกำกับ (Label)
- เลือกประเภทเป็น "Score based(v3)"
- ใส่ domain name website ของเราที่ต้องการติดตั้ง reCAPTCHA จากนั้นกด submit
ฝัง reCAPTCHA ลงในฟอร์ม HTML
ในฟอร์ม html เช่น register.html ใส่ code reCAPTCHA v3 ก่อน button tag และใส่ script การเรียก reCAPTCHA ก่อนปิด body tag ตามรูปด้านล่างนี้

  <html>
  <body>
  <form>  
  <input type="hidden" name="g-recaptcha-response"> 
  <button type="submit" class="register-btn">Register</button>
  </form>

    <!-- Google reCAPTCHA v3 -->
    <script src="https://www.google.com/recaptcha/api.jsrender=
            your site key">
    </script>
    
    <script>
        grecaptcha.ready(function() {
        grecaptcha.execute('your site key', 
        {action: 'submit'}).then(function(token) {
                const registerForm = document.getElementById('register-form');
                const tokenInput = document.createElement('input');
                tokenInput.setAttribute('type', 'hidden');
                tokenInput.setAttribute('name', 'g-recaptcha-response');
                tokenInput.setAttribute('value', token);
                registerForm.appendChild(tokenInput);
            });
        });
    </script>

</body>
</html>

ในไฟล์รับค่าจากฟอร์ม เช่น register.php ใส่ค่า secret key และส่งข้อมูล reCAPTCHA ไปตรวจสอบกับ Google เมื่อผู้ใช้กรอกฟอร์มและส่งข้อมูล ระบบจะตรวจสอบ reCAPTCHA เพื่อยืนยันว่าผู้ใช้นั้นไม่ใช่บอท ตามรูปด้านล่างนี้


if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $secret = 'YOUR_SECRET_KEY';
    $captcha = $_POST['g-recaptcha-response'];

    // ตรวจสอบ reCAPTCHA กับ Google
    $verifyResponse = file_get_contents("https://www.google.com/recaptcha
                      /api/siteverify?secret=$secret&response=$captcha");
    $responseData = json_decode($verifyResponse);

    if ($responseData->success && $responseData->score >= 0.5) {
        // ถ้าผ่าน reCAPTCHA
        $username = $_POST['username'];
        $email = $_POST['email'];
        $password = password_hash($_POST['password'], PASSWORD_DEFAULT);
        
        // บันทึกข้อมูลลงในฐานข้อมูลหรือกระบวนการอื่น ๆ ตามต้องการ
        echo "Registration successful!";
    } else {
        // ถ้าไม่ผ่าน reCAPTCHA
        echo "Failed reCAPTCHA verification. Please try again.";
    }
}

Google reCAPTCHA เป็นเครื่องมือที่จำเป็นในการป้องกันบอท โดย reCAPTCHA v2 จะเน้นการมีส่วนร่วมของผู้ใช้ด้วยการคลิกหรือแก้ไขภาพ ในขณะที่ v3 ทำงานในเบื้องหลังและประเมินคะแนนความเสี่ยง เพื่อให้ประสบการณ์การใช้งานที่ราบรื่นขึ้น หากต้องการระบบป้องกันที่ไม่รบกวนการใช้งาน ควรเลือกใช้ v3 แต่ถ้าเน้นความชัดเจนว่าเป็นการตรวจสอบ reCAPTCHA ก็ยังสามารถใช้ v2 ได้ตามความต้องการ

ทั้งนี้การตรวจสอบ token ที่ได้รับจาก Google reCAPTCHA นั้นสำคัญมาก เพื่อป้องกันช่องโหว่จากการ by pass reCAPTCHA ไปยัง Service เราควรดำเนินการดังต่อไปนี้

ตรวจสอบ reCAPTCHA Token กับ Google เสมอ: เมื่อได้รับ token จากการใช้งาน reCAPTCHA อย่าถือว่า token ที่ได้รับมานั้นเชื่อถือได้ทันที ควรทำการส่ง token ดังกล่าวไปยัง Google อีกครั้งเพื่อตรวจสอบผ่าน API ว่า token นั้นถูกต้องและมาจากการกระทำของผู้ใช้งานจริงหรือไม่ ผ่านคำสั่งนี้


$verifyResponse = file_get_contents("https://www.google.com/recaptcha/api
                  /siteverify?secret={$secret}&response={$captcha}");
$responseData = json_decode($verifyResponse);

ตรวจสอบสถานะและคะแนนความน่าเชื่อถือ: ผลลัพธ์ที่ได้จากการตรวจสอบกับ Google จะมีค่า success และ score (กรณี reCAPTCHA v3) ซึ่งสามารถใช้ในการพิจารณาความน่าเชื่อถือของการทำงานนั้นได้ โดยควรกำหนดเกณฑ์คะแนนขั้นต่ำ เช่น 0.5 หรือ 0.3 หากคะแนนต่ำกว่าเกณฑ์ที่ตั้งไว้ ควรแจ้งเตือนผู้ใช้งานหรือให้ทำการยืนยันตัวตนเพิ่มเติม ผ่านคำสั่งนี้

if ($responseData->success && $responseData->score >= 0.5) {}

หลีกเลี่ยงการใช้ Token ซ้ำ: ควรพิจารณาให้ token แต่ละชุดสามารถใช้งานได้เพียงครั้งเดียว เพื่อไม่ให้แฮกเกอร์นำ token ที่ได้ไปใช้ในการโจมตีซ้ำ
ตรวจสอบ Action ชื่อเฉพาะ: ใน reCAPTCHA v3 สามารถกำหนด action ให้แตกต่างกันตามหน้าที่ของแต่ละฟอร์ม เช่นการลงทะเบียน การเข้าสู่ระบบ การโพสต์ เป็นต้น ซึ่งจะช่วยให้เราทราบว่า token ที่ได้มานั้นมาจากการทำงานในหน้าที่ถูกต้องหรือไม่ และหาก action ไม่ตรงกับที่กำหนด ให้ทำการปฏิเสธการเข้าถึง