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

เขียนเมื่อ 8 ปีก่อน โดย Ninenik Narkdee
recaptcha

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

ดูแล้ว 29,128 ครั้ง




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

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<!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> 
 
 
ถ้าต้องการให้แสดงเป็นภาษาไทย ให้เพิ่ม parameter เข้าไปเป็น
 
 
ดูการตั้งค่าเพิ่มเติม https://developers.google.com/recaptcha/docs/display
 
 
 
ต่อไปให้แทรกส่วนของโค้ดแสดง reCAPTCHA ในส่วนของฟอร์มข้อมูล
 
1
<div class="g-recaptcha" data-sitekey="your_sitekey"></div>
 
ในที่นี้เราจะกำหนดให้เรียกใช้ฟังก์ชั่น เมื่อตรวจสอบสำเร็จ ด้วยแทรก data-callback เข้าไป 
และเรียกใช้ฟังก์ชั่นเพิ่มเติม ที่เราจะสร้างขึ้น
 
1
2
3
4
5
6
<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 แบบเต็มดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?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 หรือการส่งข้อมูลจากโปรแกรมอัตโนมัติมาในเว็บไซต์ของเราอย่างง่ายได้แล้ว




 


   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 08-03-2019


ใน reCAPTCHA v2 เราสามารถปรับค่า Security Preference เป็นดังรูป เพื่อให้ง่ายต่อผู้ใช้งาน





สามารถเข้าไปปรับการตั้งค่านี้ได้ที่


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 10-03-2019


เพิ่มเติม เนื้อหา การใช้งาน reCAPTCHA v3 

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

 

 

 
หลังจากทำการบันทึก เพื่อสมัครใช้ reCAPTCHA v3 เรียบร้อยแล้ว เราก็ได้
reCAPTCHA keys 2 ค่า คือ SITE KEY และ SECRET KEY 
โดย SITE KEY จะแสดงฝั่งผู้ใช้ในหน้าฟอร์มส่งข้อมูล ส่วน SECRET KEY จะใช้สำหรับส่งค่า
ไปตรวจสอบกับ reCAPTCHA api ของ google เป็นค่าที่กำหนดที่ฝั่ง server
 
ไฟล์ myform1.php 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Google reCAPTCHA v3</title>
<!--    เปลี่ยน reCAPTCHA_site_key เป็นค่าของเรา-->
      <script src="//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) {
              // ค่า token ที่ถูกส่งกลับมา จะถูกนำไปใช้ส่งไปตรวจสอบกับ api อีกครั้ง
              // เราเอาค่า token ไปไว้ใน input hidden ชื่อg-recaptcha-response
                document.getElementById('g-recaptcha-response').value = token;
                makeaction(); // ทำฟังก์ชั่นเพิ่มเติม ถ้ามี
          });
      });
      </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>
  // ในที่นี้ เราสร้างฟังก์ชั่น สำหรับยกเลิกการ disabled ปุ่ม submit
  function makeaction(){
        document.getElementById('btn_submit').disabled = false; 
  }
  </script>
  <div>
  <br>
    <input type="hidden" name="g-recaptcha-response" id="g-recaptcha-response" value="">
    <button type="submit" id="btn_submit" name="btn_submit" disabled>Send Message</button>
  </div>
</form>
</body>
</html>
 
จะเห็นว่ารูปแบบของ reCAPTCHA v3 จะไม่มีส่วนที่ผู้ใช้ต้องทำการใดๆ เหมือนใน v2 ที่ต้องกด checkbox
เพื่อตรวจสอบ    ใน v3 เมื่อหน้าฟอร์มถูกโหลดขึ้นมา จะมีการส่งค่าไปโดยเราสามารถส่งค่าตัวแปร action 
ตามลักษณะของเว็บไซต์ ซึ่งจะมี 4 รูปแบบ homepage, login, social และ e-commerce เพื่อใช้เป็นเงื่อนไข
ของการกำหนด score อีกที การเลือกใช้รูปแบบใดๆ ก็ขึ้นกับความเสี่ยงหรือความต้องการของผู้ใช้ ที่จะตรวจสอบ
ข้อมูลก่อนถูกส่งไป  หลังจากมีการส่งค่าไปแล้ว ก็จะได้ token กลับมา ค่า token นี้คือ captcha respone จาก
google ที่เราจะส่งไปพร้อมกับฟอร์ม 
    ในที่นี้ เราใช้วิธีการส่งไปใน input hidden ที่ชื่อ g-recaptcha-response 
    นอกจากเราจะนำค่า token ที่ได้รับกำหนดค่าใน input hidden แล้ว ในตัวอย่างนี้ เรายังเพิ่มการทำงาน
ขึ้นมาอีกอัน คือฟังก์ชั่น การยกเลิกการ disabled ของ ปุ่ม submit เมื่อมีการคืนค่า token กลับมา ตรงนี้
เราสามารถนำไปประยุกต์เพิ่มเติมได้ 
 
1
2
3
4
5
6
7
8
9
10
<script>
grecaptcha.ready(function() {
  grecaptcha.execute('reCAPTCHA_site_key', {action: 'homepage'}).then(function(token) {
      // ค่า token ที่ถูกส่งกลับมา จะถูกนำไปใช้ส่งไปตรวจสอบกับ api อีกครั้ง
      // เราเอาค่า token ไปไว้ใน input hidden ชื่อg-recaptcha-response
        document.getElementById('g-recaptcha-response').value = token;
        makeaction(); // ทำฟังก์ชั่นเพิ่มเติม ถ้ามี
  });
});
</script>
   
 
ต่อไปดูที่ไฟล์ send.php
    ไฟล์ที่จะใช้รับค่าจากฟอร์ม และส่งค่าไปยัง reCAPTCHA api เพื่อตรวจสอบ รูปแบบวิธีการใช้งาน ก็จะเหมือน
กับใน v2 แต่ค่าที่ response กลับมาจะมีค่า score และ action สำหรับใช้ในการกำหนดเงื่อนไขเพิ่มเติมได้ ค่า
response กลับมาจะมีค่าประมาณนี้ กรณี สำเร็จ
 
Array
(
    [success] => 1
    [challenge_ts] => 2019-03-09T17:12:36Z
    [hostname] => โดนเมน
    [score] => 0.9  ค่า score ปกติค่าจะอยู่ที่ 0.0 - 1.0
    [action] => homepage  
)
 
เรามาดูไฟล์ send.php กรณีเราไม่สนใจค่า score จะเป็นดังนี้
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// ตรวจสอบเมื่อกดปุ่ม และเมื่อส่งค่า  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!"; 
}
 
ในกรณีข้างต้น เราไม่ได้กำหนด การตรวจสอบค่า score แต่ค่า $response['success'] ที่เท่ากับ
true เป็นการยืนยันว่า token ถูกส่งจากเว็บไซต์จริง แต่ไม่ได้หมายความว่า จะไม่ใช่ bot เลยเสียทีเดียว
อย่างไรก็ตาม หากเราไม่ได้ต้องการตรวจสอบลงลึกมากนัก การกำหนดวิธีการตรวจสอบตามโค้ดข้างต้นก็ถือ
ว่าเพียงพอในระดับที่ยอมรับได้ และถ้าเป็นการเริ่มต้นใช้งานครั้งแรก เราก็อาจจะกำหนดแบบนี้ก่อนก็ได้ เพราะ
บางที เรายังอาจจะยังไม่ทราบว่า ค่า score ที่เหมาะสม ที่ต้องการที่แท้จริง จนกว่าจะได้ข้อมูลที่ถูกรวบรวมเพียง
พอ โดยค่า score จะค่อยแสดงในหน้า admin console
    ค่า score ที่เท่ากับ 0.0 อาจเป็นได้ว่าเป็น bot และ ค่า score ที่สูงสุดเท่ากับ 1.0 เป็นค่าที่ดีที่สุด เข้าใจง่ายๆ 
คือ ค่ายิ่งเข้าใกล้ 1.0 มากเท่าไหร่ ถือเป็นค่าที่ดี ซึ่งค่า score ก็จะแตกต่างกันไป ขึ้นกับปัจจัยที่ใช้ในการตรวจสอบ
หลายๆ อย่าง ปกติ ค่ากลางที่ 0.5 จะเป็นค่าเริ่มต้นที่ใช้ในการตรวจสอบ กรณีมีการตรวจสอบ score 
 
1
2
3
4
5
if(isset($response) && $response['success'] == true && $response['score']>=0.5){ // ตรวจสอบสำเร็จ
    echo "Successful!"; // ทำคำสั่งเพิ่มข้อมูลหรืออื่นๆ
}else{
    echo "Access denied!"; 
}
 
เราลองสมมติ อย่างในตัวอย่างเว็บเรามีค่า score ที่ 0.9 แต่เราจะเช็คที่ค่ามากกว่า 0.9 
 
1
2
3
4
5
if(isset($response) && $response['success'] == true && $response['score']>0.9){ // ตรวจสอบสำเร็จ
    echo "Successful!"; // ทำคำสั่งเพิ่มข้อมูลหรืออื่นๆ
}else{
    echo "Access denied!"; 
}
 
ผลลัพธ์ที่ได้ ถึงแม้จะมีการตรวจสอบ token ผ่าน แต่เมื่อเรากำหนดค่า score ที่สูงมากๆ แต่เว็บไซต์ของเรา
มีค่า score ไม่ผ่าน เงื่อนไขการทำงานก็จะถูกปฏิเสธ  ดังนั้น ในที่นี้แนะนำให้ใช้ที่ค่า 0.5
 
นอกจากค่า score แล้ว เรายังสามารถตรวจสอบ ค่า action เพิ่มเติมเข้าไปอีกได้ เช่น
 
1
2
3
4
5
6
7
if(isset($response) && $response['success'] == true && $response['score']>=0.5
&& $response['action']=='homepage'
){ // ตรวจสอบสำเร็จ
    echo "Successful!"; // ทำคำสั่งเพิ่มข้อมูลหรืออื่นๆ
}else{
    echo "Access denied!"; 
}
 
 





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





Tags:: recaptcha







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












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ