ปัจจุบัน CAPTCHA เป็นส่วนสำคัญของการรักษาความปลอดภัยของเว็บไซต์ การทดสอบ CAPTCHA หลายล้านรายการเสร็จสิ้นทางออนไลน์ทุกวัน

หากคุณไม่ได้ใช้งานการตรวจสอบ CAPTCHA บนเว็บไซต์ อาจสร้างปัญหาใหญ่ให้กับคุณ โดยตั้งเป้าหมายให้คุณเป็นเป้าหมายของนักส่งสแปม

---

---

นี่คือทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับ CAPTCHA และวิธีที่คุณสามารถนำไปใช้บนเว็บไซต์ของคุณได้อย่างง่ายดายโดยใช้ HTML, CSS และ JavaScript

CAPTCHA คืออะไร?

CAPTCHA ย่อมาจาก 'การทดสอบทัวริงสาธารณะอัตโนมัติโดยสมบูรณ์เพื่อแยกคอมพิวเตอร์และมนุษย์ออกจากกัน' คำนี้ประกาศเกียรติคุณในปี 2546 โดย Luis von Ahn, Manuel Blum, Nicholas J. Hopper และ John Langford เป็นการทดสอบการตอบสนองต่อความท้าทายประเภทหนึ่งซึ่งใช้เพื่อระบุว่าผู้ใช้เป็นมนุษย์หรือไม่

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

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

เหตุใดเว็บไซต์ของคุณจึงต้องมีการตรวจสอบ CAPTCHA

ส่วนใหญ่จะใช้ CAPTCHA เพื่อป้องกันไม่ให้บอทส่งแบบฟอร์มที่มีสแปมและเนื้อหาที่เป็นอันตรายอื่นๆ โดยอัตโนมัติ แม้แต่บริษัทอย่าง Google ก็ใช้เพื่อป้องกันระบบจากการโจมตีด้วยสแปม นี่คือสาเหตุบางประการที่เว็บไซต์ของคุณได้รับประโยชน์จากการตรวจสอบ CAPTCHA:

---

---

• CAPTCHA ช่วยป้องกันแฮกเกอร์และบอทจากการสแปมระบบการลงทะเบียนโดยการสร้างบัญชีปลอม หากไม่ได้รับการป้องกัน พวกเขาสามารถใช้บัญชีเหล่านั้นเพื่อจุดประสงค์ที่ชั่วร้ายได้
• CAPTCHA สามารถห้ามการโจมตีด้วยการเข้าสู่ระบบโดยใช้กำลังเดรัจฉานจากเว็บไซต์ของคุณ ซึ่งแฮกเกอร์ใช้เพื่อพยายามเข้าสู่ระบบโดยใช้รหัสผ่านนับพัน
• CAPTCHA สามารถจำกัดบอทไม่ให้ส่งสแปมในส่วนรีวิวได้โดยการแสดงความคิดเห็นเท็จ
• CAPTCHA ช่วยป้องกันเงินเฟ้อของตั๋ว เนื่องจากมีคนซื้อตั๋วจำนวนมากเพื่อขายต่อ CAPTCHA ยังสามารถป้องกันการลงทะเบียนเท็จสำหรับกิจกรรมฟรี
• CAPTCHA สามารถจำกัดมิจฉาชีพในโลกไซเบอร์จากการสแปมบล็อกด้วยความคิดเห็นที่หลบเลี่ยงและลิงก์ไปยังเว็บไซต์ที่เป็นอันตราย

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

วิธีการลบ hiberfil.sys windows 10

รหัส HTML CAPTCHA

HTML หรือ HyperText Markup Language อธิบายโครงสร้างของหน้าเว็บ ใช้โค้ด HTML ต่อไปนี้เพื่อจัดโครงสร้างแบบฟอร์มการตรวจสอบ CAPTCHA ของคุณ:

---

---










captcha text



Refresh








รหัสนี้ส่วนใหญ่ประกอบด้วย 7 องค์ประกอบ:

• : องค์ประกอบนี้ใช้เพื่อแสดงส่วนหัวของแบบฟอร์ม CAPTCHA

• : องค์ประกอบนี้ใช้เพื่อแสดงข้อความ CAPTCHA
• - องค์ประกอบนี้ใช้เพื่อสร้างช่องป้อนข้อมูลเพื่อพิมพ์ CAPTCHA
• : ปุ่มนี้ส่งแบบฟอร์มและตรวจสอบว่า CAPTCHA และข้อความที่พิมพ์เหมือนกันหรือไม่
• : ปุ่มนี้ใช้เพื่อรีเฟรช CAPTCHA
• : องค์ประกอบนี้ใช้เพื่อแสดงผลลัพธ์ตามข้อความที่ป้อน
• : นี่คือองค์ประกอบหลักที่มีองค์ประกอบอื่นๆ ทั้งหมด

ไฟล์ CSS และ JavaScript เชื่อมโยงกับหน้า HTML นี้ผ่านทาง และ องค์ประกอบตามลำดับ คุณต้องเพิ่ม ลิงค์ แท็กภายใน ศีรษะ แท็กและ สคริปต์ แท็กที่ส่วนท้ายของ ร่างกาย .

คุณยังสามารถรวมโค้ดนี้กับรูปแบบที่มีอยู่ของเว็บไซต์ของคุณได้

ที่เกี่ยวข้อง: แผ่นโกง HTML Essentials: แท็ก คุณลักษณะและอื่น ๆ

รหัส CSS CAPTCHA

CSS หรือ Cascading Style Sheets ใช้เพื่อจัดรูปแบบองค์ประกอบ HTML ใช้โค้ด CSS ต่อไปนี้เพื่อจัดรูปแบบองค์ประกอบ HTML ด้านบน:

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
body {
background-color: #232331;
font-family: 'Roboto', sans-serif;
}
#captchaBackground {
height: 220px;
width: 250px;
background-color: #2d3748;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
#captchaHeading {
color: white;
}
#captcha {
height: 80%;
width: 80%;
font-size: 30px;
letter-spacing: 3px;
margin: auto;
display: block;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.center {
display: flex;
flex-direction: column;
align-items: center;
}
#submitButton {
margin-top: 2em;
margin-bottom: 2em;
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#refreshButton {
background-color: #08e5ff;
border: 0px;
font-weight: bold;
}
#textBox {
height: 25px;
}
.incorrectCaptcha {
color: #FF0000;
}
.correctCaptcha {
color: #7FFF00;
}

เพิ่มหรือลบคุณสมบัติ CSS ออกจากโค้ดนี้ตามที่คุณต้องการ คุณยังสามารถทำให้คอนเทนเนอร์ฟอร์มดูสวยงามได้โดยใช้ปุ่ม คุณสมบัติ CSS box-shadow .

รหัส JavaScript CAPTCHA

JavaScript ใช้เพื่อเพิ่มฟังก์ชันการทำงานให้กับหน้าเว็บแบบคงที่ ใช้รหัสต่อไปนี้เพื่อเพิ่มฟังก์ชันการทำงานที่สมบูรณ์ให้กับแบบฟอร์มการตรวจสอบ CAPTCHA:

// document.querySelector() is used to select an element from the document using its ID
let captchaText = document.querySelector('#captcha');
var ctx = captchaText.getContext('2d');
ctx.font = '30px Roboto';
ctx.fillStyle = '#08e5ff';

let userText = document.querySelector('#textBox');
let submitButton = document.querySelector('#submitButton');
let output = document.querySelector('#output');
let refreshButton = document.querySelector('#refreshButton');

// alphaNums contains the characters with which you want to create the CAPTCHA
let alphaNums = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9'];
let emptyArr = [];
// This loop generates a random string of 7 characters using alphaNums
// Further this string is displayed as a CAPTCHA
for (let i = 1; i <= 7; i++) {
emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
var c = emptyArr.join('');
ctx.fillText(emptyArr.join(''),captchaText.width/4, captchaText.height/2);

// This event listener is stimulated whenever the user press the 'Enter' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
userText.addEventListener('keyup', function(e) {
// Key Code Value of 'Enter' Button is 13
if (e.keyCode === 13) {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
}
});
// This event listener is stimulated whenever the user clicks the 'Submit' button
// 'Correct!' or 'Incorrect, please try again' message is
// displayed after validating the input text with CAPTCHA
submitButton.addEventListener('click', function() {
if (userText.value === c) {
output.classList.add('correctCaptcha');
output.innerHTML = 'Correct!';
} else {
output.classList.add('incorrectCaptcha');
output.innerHTML = 'Incorrect, please try again';
}
});
// This event listener is stimulated whenever the user press the 'Refresh' button
// A new random CAPTCHA is generated and displayed after the user clicks the 'Refresh' button
refreshButton.addEventListener('click', function() {
userText.value = '';
let refreshArr = [];
for (let j = 1; j <= 7; j++) {
refreshArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
}
ctx.clearRect(0, 0, captchaText.width, captchaText.height);
c = refreshArr.join('');
ctx.fillText(refreshArr.join(''),captchaText.width/4, captchaText.height/2);
output.innerHTML = '';
});


ตอนนี้คุณมีแบบฟอร์มการตรวจสอบ CAPTCHA ที่ใช้งานได้อย่างสมบูรณ์แล้ว! หากคุณต้องการดูโค้ดทั้งหมด คุณสามารถโคลน ที่เก็บ GitHub ของโครงการตรวจสอบ CAPTCHA-Validator . หลังจากโคลนที่เก็บแล้ว ให้รันไฟล์ HTML แล้วคุณจะได้ผลลัพธ์ต่อไปนี้:

วิธีเปลี่ยนตำแหน่งที่สำรองข้อมูล iphone ไว้

เมื่อคุณป้อนรหัส CAPTCHA ที่ถูกต้องในช่องป้อนข้อมูล ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น:

เมื่อคุณป้อนรหัส CAPTCHA ที่ไม่ถูกต้องในช่องป้อนข้อมูล ผลลัพธ์ต่อไปนี้จะปรากฏขึ้น:

ทำให้เว็บไซต์ของคุณปลอดภัยด้วย CAPTCHAs

ในอดีต องค์กรและธุรกิจจำนวนมากประสบกับความสูญเสียอย่างหนัก เช่น การละเมิดข้อมูล การโจมตีด้วยสแปม ฯลฯ อันเป็นผลมาจากการไม่มีแบบฟอร์ม CAPTCHA บนเว็บไซต์ ขอแนะนำเป็นอย่างยิ่งให้เพิ่ม CAPTCHA ลงในเว็บไซต์ของคุณ เนื่องจากจะเพิ่มชั้นความปลอดภัยเพื่อป้องกันเว็บไซต์จากอาชญากรไซเบอร์

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

แบ่งปัน แบ่งปัน ทวีต อีเมล CAPTCHA ทำงานอย่างไรและทำไมจึงยาก

CAPTCHA และ reCAPTCHA ป้องกันสแปม พวกเขาทำงานอย่างไร และเหตุใดคุณจึงพบว่า CAPTCHAs ยากต่อการแก้ไข

อ่านต่อไป หัวข้อที่เกี่ยวข้อง

• การเขียนโปรแกรม
• HTML
• JavaScript
• CSS

เกี่ยวกับผู้เขียน ยุวราช จันทรา(60 บทความที่ตีพิมพ์)

Yuvraj เป็นนักศึกษาระดับปริญญาตรีสาขาวิทยาการคอมพิวเตอร์ที่มหาวิทยาลัยเดลี ประเทศอินเดีย เขาหลงใหลเกี่ยวกับ Full Stack Web Development เมื่อไม่ได้เขียน เขากำลังสำรวจความลึกของเทคโนโลยีต่างๆ

เพิ่มเติมจาก Yuvraj Chandra

สมัครรับจดหมายข่าวของเรา

เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!

คลิกที่นี่เพื่อสมัครสมาชิก