Google reCAPTCHA คืออะไร ใช้อย่างไร

50 | วรพงศ์ นิจจรัลกุล | พฤศจิกายน 18, 2019 | Security, ความรู้

สำหรับบทความในวันนี้ เราจะมาพูดถึง Google reCAPTCHA กันครับ ว่าคืออะไร มีกี่เวอร์ชั่นและวิธีการใช้งานทำอย่างไร มาดูรายละเอียดกันเลย

Google reCAPTCHA คืออะไร

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

Google reCAPTCHA มีกี่เวอร์ชั่น

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

Google reCAPTCHA v.2

Google reCAPTCHA คืออะไร ใช้อย่างไร 1 — Google reCAPTCHA v.2

Google reCAPTCHA v.3

วิธีการใช้งาน Google reCAPTCHA

สำหรับบทความนี้เราจะแนะนำวิธีการใช้งาน Google reCAPTCHA เวอร์ชั่น 3 นะครับ เพราะสะดวกต่อผู้ใช้งานไม่ต้องคอยเลือกรูปภาพและปกป้องเว็บไซต์ของเราได้ดีด้วยครับ เริ่มต้นให้เราไปที่เว็บไซต์ตามลิงก์นี้ Google reCAPTCHA แล้วทำการกดที่ปุ่ม Admin Console ทางด้านขวามือบน เพื่อเข้าสู่ระบบครับ

หลังจากนั้นให้ทำการกดปุ่ม + ด้านขวามือ เพื่อทำการลงทะเบียนเว็บไซต์ใหม่และทำการเลือกประเภทของ reCAPTCHA พรอ้มทั้งระบุโดเมนที่เรรต้องการให้ป้องกันและยอมรับข้อกำนหนดในการให้บริการของ reCAPTCHA ด้วยครับ เมื่อดำเนินการเสร็จแล้ว ให้ทำการกดปุ่มส่ง

Google reCAPTCHA คืออะไร ใช้อย่างไร 3 — ลงทะเบียน Google reCAPTCHA

หลังจากนั้นระบบจะส่งหน้าคีย์ทั้งในส่วนคีย์ของเว็บไซต์และคีย์ลับเป็นเลขและตัวอักษรมาให้กับเรา ให้เรานำรหัสทั้งสองนี้ไปใส่ในเว็บไซต์ของเราครับ

โดยถ้าผู้ใช้งานใช้ในส่วนของ WordPress ให้เราทำการติดตั้งปลั๊กอินที่ชื่อ Invisible reCaptcha เมื่อทำการติดตั้งปลั๊กอินแล้ว ให้เราไปที่เมนูการตั้งค่า (Settings) แล้วเลือกชื่อปลั๊กอินดังกล่าว แล้วนำคีย์ทั้งสองตัวไปใส่ได้เลยครับ

Google reCAPTCHA คืออะไร ใช้อย่างไร 4 — Invisible reCAPTCHA plugin

ถัดมาให้เราไปที่แท็บถัดไป เพื่อทำเครื่องหมายถูกในฟอร์มที่เราต้องการป้องกันครับ เช่น แท็บ WordPress เราจะเปิดใช้งานในฟอร์มล็อกอินทำเครื่องหมายถูกที่ Enable Login Form Protection, ฟอร์มลงทะเบียน Enable Registration Form Protection, ฟอร์มคอมเมนต์ Enable Comments Form Protection และ ฟอร์มป้องกันการลืมพาสเวิร์ด Enable Forgot Password Form Protection เป็นต้น ในกรณีที่เป็น Contact Form ให้ไปที่แท็บ Contact Form แล้วทำเครื่องหมายถูกที่หน้าคำว่า Enable Protection for Contact Form 7 ครับ

สำหรับคนที่ไม่ได้ใช้ WordPress นะครับ เราจะต้องทำการเรียกใช้ในส่วนของสคริปต์ JavaScript (JS Script) ดังนี้

<script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script>
<script>
grecaptcha.ready(function() {
    grecaptcha.execute('_reCAPTCHA_site_key_', {action: 'homepage'}).then(function(token) {
       ...
    });
});
</script>

ตัวอย่างการใช้งาน

วิธีการคือ เราจะต้องนำสคริป์ที่เกี่ยวข้องกับ recaptcha ใส่ลงไป พร้อมกับเนื้อหาด้านล่างครับ และเราจะต้องเอารหัสของเราเข้าแทนที่คำว่า put your site key here ก็จะใช้งานได้ครับ

<html>
  <head>
    <title>Google recapcha v3 demo - Codeforgeek</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
      <script src="https://www.google.com/recaptcha/api.js?render=put your site key here"></script>
  </head>
  <body>
    <h1>Google reCAPTHA Demo</h1>
    <form id="comment_form" action="form.php" method="post" >
      <input type="email" name="email" placeholder="Type your email" size="40"><br><br>
      <textarea name="comment" rows="8" cols="39"></textarea><br><br>
      <input type="submit" name="submit" value="Post comment"><br><br>
    </form>
      <script>
       // when form is submit
    $('#comment_form').submit(function() {
        // we stoped it
        event.preventDefault();
        var email = $('#email').val();
        var comment = $("#comment").val();
        // needs for recaptacha ready
        grecaptcha.ready(function() {
            // do request for recaptcha token
            // response is promise with passed token
            grecaptcha.execute('put your site key here', {action: 'create_comment'}).then(function(token) {
                // add token to form
                $('#comment_form').prepend('<input type="hidden" name="g-recaptcha-response" value="' + token + '">');
                    $.post("form.php",{email: email, comment: comment, token: token}, function(result) {
                            console.log(result);
                            if(result.success) {
                                    alert('Thanks for posting comment.')
                            } else {
                                    alert('You are spammer ! Get the @$%K out.')
                            }
                    });
            });;
        });
  });
  </script>
  </body>
</html>

ขอบคุณเนื้อหาจากเว็บ Codeforgeek.com

หลังจากเราดำเนินการเสร็จแล้ว เพียงแค่นี้เราก็สามารถป้องกันสแปมที่จะเข้ามาโจมตีเว็บไซต์เราแล้วนะครับ ใครทำได้ไม่ได้ก็มาคุยกันได้นะครับ ขอบคุณครับ