PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

24 November 2016 By
recaptcha

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ recaptcha



เริ่มต้นให้เข้าสู่หน้าสำหรับขอใช้งานบริการ 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






อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ


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