เริ่มต้นให้เข้าสู่หน้าสำหรับขอใช้งานบริการ reCAPTCHA ของ Goolge
ให้เรากดไปที่ปุ่ม 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();
// โค้ดไฟล์ dbconnect.php ดูได้ที่ http://niik.in/que_2398_5642
require_once("dbconnect.php");
// ตรวจสอบเมื่อกดปุ่ม และเมื่อส่งค่า g-recaptcha-response มาตรวจสอบ
if(isset($_POST['btn_submit']) && isset($_POST['g-recaptcha-response'])){
$recaptcha_secret = "ใส่ reCAPTCHAP_secret_key";
$recaptcha_response = trim($_POST['g-recaptcha-response']);
$recaptcha_remote_ip = $_SERVER['REMOTE_ADDR'];
$recaptcha_api = "https://www.google.com/recaptcha/api/siteverify?".
http_build_query(array(
'secret'=>$recaptcha_secret,
'response'=>$recaptcha_response,
'remoteip'=>$recaptcha_remote_ip
)
);
$response=json_decode(file_get_contents($recaptcha_api), true);
/* echo "<pre>";
print_r($response);
echo "</pre>"; */
}
if(isset($response) && $response['success'] == true){ // ตรวจสอบสำเร็จ
echo "Successful!"; // ทำคำสั่งเพิ่มข้อมูลหรืออื่นๆ
}else{
echo "Access denied!";
}
?>
เปลี่ยนตรง your_secretkey เป็นค่า Secret key ของเรา การทำงาน ตามตัวอย่างคือ ถ้ามีการกดปุ่มส่งข้อมูลมา
และ การตรวจสอบตัวตน เป็น true ระบบจึงจะทำงานตามคำสั่ง
เท่านี้เราก็สามารถป้องกัน spam หรือการส่งข้อมูลจากโปรแกรมอัตโนมัติมาในเว็บไซต์ของเราอย่างง่ายได้แล้ว
