PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนวทางใช้งาน google reCAPTCHA ในเว็บไซต์เพื่อป้องกัน spam

24 November 2016 By


เริ่มต้นให้เข้าสู่หน้าสำหรับขอใช้งานบริการ reCAPTCHA ของ Goolge
https://www.google.com/recaptcha/intro/index.html
ให้เรากดไปที่ปุ่ม Get reCAPTCHA หรือหาปุ่มที่แสดงถึงการขอใช้งาน reCAPTCHA 
กรณีหน้าเพจของ google เปลี่ยนแปลง
 
 
 
หากยังไม่ได้ล็อกอิน ต้องทำการล็อกอินด้วยบัญชีของ google ก่อน  
เมื่อเข้าสู่หน้า https://www.google.com/recaptcha/admin#list ให้เราทำการลงทะเบียน
เว็บไซต์ กรอกข้อมูล Label ป้ายกำกับชื่อในเราสามารถกรอกเป็น โดนเมนได้เลย
และส่วนของ Domains เป็นโดนเมนของเรา สามารถกรอกได้หลายโดนเมนโดยกรอก
บรรทัดละโดนเมนตามจำนวนที่ต้องการ 
 
 
 
จากนั้นกดปุ่ม register หรือลงทะเบียน
 
 
 
 
เราจะได้ Site key และ Secret key ตามรูป (ในรูปจะปิดไว้)  
ตอนนี้เราสามารถนำค่า ที่ได้ไปใช้งานในส่วนการเปิดใช้งาน Google reCAPTCHA ได้แล้ว
 
 
สมมติเราสร้างฟอร์มสำหรับส่งข้อมูลในเว็บไซต์ของเราชื่อ

myform1.php โค้ดดังนี้

 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google reCAPTCHA</title>
</head>

<body>
<form name="form1" method="post" action="send.php">
  <div>Message:  </div>
  <div>
    <textarea name="msg" cols="50" rows="3" id="msg"></textarea>
  </div>
  <div>
  <br>
    <button type="submit" id="btn_submit" name="btn_submit" disabled>Send Message</button>
  </div>
</form>
</body>
</html>
 
 
ให้แทรก โค้ดเรียกใช้ recaptcha ไฟล์ของ google ในส่วนของแท็ก <head> 
 
<script src='https://www.google.com/recaptcha/api.js'></script>
 
ถ้าต้องการให้แสดงเป็นภาษาไทย ให้เพิ่ม parameter เข้าไปเป็น
 
<script src='https://www.google.com/recaptcha/api.js?hl=th'></script>
 
ดูการตั้งค่าเพิ่มเติม https://developers.google.com/recaptcha/docs/display
 
 
 
ต่อไปให้แทรกส่วนของโค้ดแสดง reCAPTCHA ในส่วนของฟอร์มข้อมูล
 
<div class="g-recaptcha" data-sitekey="your_sitekey"></div>
 
ในที่นี้เราจะกำหนดให้เรียกใช้ฟังก์ชั่น เมื่อตรวจสอบสำเร็จ ด้วยแทรก data-callback เข้าไป 
และเรียกใช้ฟังก์ชั่นเพิ่มเติม ที่เราจะสร้างขึ้น
 
  <script>
  function makeaction(){
		document.getElementById('btn_submit').disabled = false;  
  }
  </script>
  <div class="g-recaptcha" data-callback="makeaction" data-sitekey="your_sitekey"></div>
 
โดยเมื่อเปิดหน้าฟอร์มเข้ามาครั้งแรกปุ่มส่งข้อมูลจะถูก disabled ไว้ หรือไม่สามารถกดให้ทำงานได้
และเมื่อตรวจสอบผ่าน google reCAPTCHA แล้วให้ปุ่มส่งข้อมูล active สามารถกดส่งข้อมูลได้
เราจะได้โค็ตไฟล์ myform1.php แบบเต็มดังนี้
 
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Google reCAPTCHA</title>
<script src='https://www.google.com/recaptcha/api.js?hl=th'></script>
</head>

<body>
<form name="form1" method="post" action="send.php">
  <div>Message:  </div>
  <div>
    <textarea name="msg" cols="50" rows="3" id="msg"></textarea>
  </div>
  <script>
  function makeaction(){
		document.getElementById('btn_submit').disabled = false;  
  }
  </script>
  <div class="g-recaptcha" data-callback="makeaction" data-sitekey="your_sitekey"></div>
  <div>
  <br>
    <button type="submit" id="btn_submit" name="btn_submit" disabled>Send Message</button>
  </div>
</form>
</body>
</html>
 
 
ตัวอย่างผลลัพธ์ ก่อนคลิกตรวจสอบ
 
 
หลังคลิกตรวจสอบผ่านแล้ว
 
 
 
จากนั้นให้ทำการตรวจสอบในไฟล์รับค่าข้อมูลที่ส่งมา ดูตัวอย่างการใช้งานตามโค้ด send.php
 
<?php
session_start();
require("dbconnect.php");

$captcha;		
if(isset($_POST['g-recaptcha-response'])){
$captcha=$_POST['g-recaptcha-response'];
$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=your_secretkey&response=".$captcha."&remoteip=".$_SERVER['REMOTE_ADDR']), true);		
}
if(isset($_POST['btn_submit'])  && $response['success'] == true){ // เมื่อคลิกที่กที่ปุ่ม 
    /// ทำคำสั่งเพิ่มข้อมูลหรืออื่นๆ
}
?>
 
 
เปลี่ยนตรง your_secretkey เป็นค่า Secret key ของเรา การทำงาน ตามตัวอย่างคือ ถ้ามีการกดปุ่มส่งข้อมูลมา
และ การตรวจสอบตัวตน เป็น true ระบบจึงจะทำงานตามคำสั่ง
 
เท่านี้เราก็สามารถป้องกัน spam หรือการส่งข้อมูลจากโปรแกรมอัตโนมัติมาในเว็บไซต์ของเราอย่างง่ายได้แล้ว




 

Tags:: recaptcha





URL สำหรับอ้างอิง