/ / Tạo Biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScript

Tạo Biểu mẫu xác thực CAPTCHA bằng HTML, CSS và JavaScript

CAPTCHA là một phần không thể thiếu của bảo mật trang web. Mọi người hoàn thành hàng triệu bài kiểm tra CAPTCHA trực tuyến mỗi ngày.

Nếu bạn chưa triển khai xác thực CAPTCHA trên trang web của mình, điều đó có thể tạo ra một vấn đề lớn cho bạn, khiến bạn trở thành mục tiêu của những kẻ gửi thư rác.

Đây là mọi thứ bạn cần biết về CAPTCHA và cách bạn có thể dễ dàng triển khai chúng với HTML, CSS và JavaScript.

CAPTCHA là gì?

CAPTCHA là viết tắt của “Thử nghiệm Turing công cộng hoàn toàn tự động để phân biệt Máy tính và Con người.” Thuật ngữ này được đặt ra vào năm 2003 bởi Luis von Ahn, Manuel Blum, Nicholas J. Hopper và John Langford. Đó là một loại kiểm tra phản ứng thử thách mà các trang web sử dụng để xác định xem người dùng có phải là con người hay không.

LÀM VIDEO TRONG NGÀY

CAPTCHA tăng cường bảo mật cho các trang web bằng cách cung cấp các thử thách khó thực hiện đối với bot nhưng tương đối dễ đối với con người. Ví dụ, xác định tất cả các hình ảnh của một chiếc xe hơi từ một tập hợp nhiều hình ảnh là khó đối với bot nhưng đủ đơn giản đối với mắt người.

Ý tưởng về CAPTCHA bắt nguồn từ Thử nghiệm Turing. Phép thử Turing là một phương pháp để kiểm tra xem một cỗ máy có thể suy nghĩ giống con người hay không. Bạn có thể coi bài kiểm tra CAPTCHA là “phép thử Turing ngược” vì nó thách thức con người chứng minh họ không phải là máy tính.

Tại sao trang web của bạn cần xác thực CAPTCHA

CAPTCHA được sử dụng để ngăn không cho bot tự động gửi biểu mẫu có spam và nội dung có hại khác. Ngay cả các công ty như Google cũng sử dụng nó để ngăn chặn hệ thống của họ khỏi các cuộc tấn công bằng thư rác. Dưới đây là một số lý do tại sao trang web của bạn được hưởng lợi từ xác thực CAPTCHA:

  • CAPTCHA giúp ngăn chặn tin tặc và bot gửi thư rác vào hệ thống đăng ký bằng cách tạo tài khoản giả. Nếu không bị ngăn chặn, họ có thể sử dụng các tài khoản đó cho các mục đích bất chính.
  • CAPTCHA có thể cấm các cuộc tấn công đăng nhập thô bạo từ trang web của bạn mà tin tặc sử dụng để thử đăng nhập bằng hàng nghìn mật khẩu.
  • CAPTCHA có thể hạn chế bot gửi spam phần đánh giá bằng cách cung cấp các nhận xét sai.
  • CAPTCHA hỗ trợ trong việc ngăn chặn lạm phát vé do một số người mua nhiều vé để bán lại. CAPTCHA thậm chí có thể ngăn chặn đăng ký sai đối với các sự kiện miễn phí.
  • CAPTCHA có thể hạn chế kẻ gian không gian mạng gửi thư rác các blog với các bình luận ranh mãnh và liên kết đến các trang web độc hại.


Có nhiều lý do khác hỗ trợ việc tích hợp xác thực CAPTCHA vào trang web của bạn. Bạn có thể làm như vậy với đoạn mã sau.

Nếu bạn muốn xem phiên bản trực tiếp của dự án này, bạn có thể xem bản demo này.

Mã CAPTCHA HTML

Trong dự án này, bạn sẽ thêm CAPTCHA vào một biểu mẫu HTML. Sử dụng mã sau để thêm CAPTCHA trong HTML:

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="center">
<h1 id="captchaHeading">
Captcha Validator Using HTML, CSS and JavaScript
</h1>
<div id="captchaBackground">
<canvas id="captcha">captcha text</canvas>
<input id="textBox" type="text" name="text">
<div id="buttons">
<input id="submitButton" type="submit">
<button id="refreshButton" type="submit">Refresh</button>
</div>
<span id="output"></span>
</div>
</div>
<script src="script.js"></script>
</body>
</html>

Mã này chủ yếu bao gồm 7 yếu tố:


  • : Phần tử này được sử dụng để hiển thị tiêu đề của biểu mẫu CAPTCHA.

  • : Phần tử này được sử dụng để hiển thị văn bản CAPTCHA.
  • – Phần tử này được sử dụng để tạo một hộp nhập liệu để gõ CAPTCHA.
  • : Nút này gửi biểu mẫu và kiểm tra xem CAPTCHA và văn bản đã nhập có giống nhau hay không.
  • : Nút này được sử dụng để làm mới CAPTCHA.
  • : Phần tử này dùng để hiển thị đầu ra theo văn bản đã nhập.

  • : Đây là phần tử mẹ chứa tất cả các phần tử khác.


Trang HTML này liên kết đến các tệp CSS và JavaScript thông qua liên kết và script các phần tử tương ứng. Bạn phải thêm liên kết thẻ bên trong cái đầu và script thẻ ở cuối thân hình.

Có rất nhiều thẻ và thuộc tính HTML và việc ghi nhớ tất cả chúng có thể khiến bạn choáng ngợp. Bạn luôn có thể tham khảo bảng gian lận HTML để cập nhật nhanh về các thẻ và thuộc tính HTML.

Bạn cũng có thể tích hợp mã này với các biểu mẫu hiện có trên trang web của mình.

Mã CAPTCHA CSS

Bạn có thể sử dụng CSS — Trang tính kiểu xếp tầng — để tạo kiểu cho các phần tử HTML. Sử dụng mã CSS sau để tạo kiểu cho biểu mẫu xác thực CAPTCHA:

@import url('https://fonts.googleapis.com/css2?family=Roboto&amp;display=swap&apos;);
body {
background-color: #232331;
font-family: &apos;Roboto&apos;, 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;
}

Thêm hoặc xóa các thuộc tính CSS khỏi mã này theo sở thích của bạn. Bạn cũng có thể tạo giao diện trang nhã cho vùng chứa biểu mẫu bằng cách sử dụng thuộc tính CSS box-shadow.

Mã CAPTCHA JavaScript

Bạn có thể sử dụng JavaScript để thêm chức năng vào trang web. Sử dụng mã sau để thêm chức năng hoàn chỉnh vào biểu mẫu xác thực CAPTCHA:


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');

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 = [];
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);

userText.addEventListener('keyup', function(e) {
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";
}
}
});
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";
}
});
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 = "";
});

Bây giờ bạn có một biểu mẫu xác thực CAPTCHA đầy đủ chức năng. Nếu bạn muốn xem toàn bộ mã, bạn có thể sao chép kho lưu trữ GitHub của Dự án CAPTCHA-Validator này. Sau khi nhân bản kho lưu trữ, hãy mở tệp HTML và bạn sẽ thấy kết quả sau:

Khi bạn nhập đúng mã CAPTCHA vào ô nhập, nó sẽ hiển thị đầu ra sau:

Khi bạn nhập mã CAPTCHA không chính xác vào hộp nhập liệu, nó sẽ hiển thị kết quả đầu ra sau:

Bảo mật trang web của bạn với CAPTCHA

Trong quá khứ, nhiều tổ chức và doanh nghiệp đã phải chịu thiệt hại nặng nề như bị vi phạm dữ liệu, bị tấn công bằng thư rác, … do không có các biểu mẫu CAPTCHA trên trang web của họ. Bạn nên thêm CAPTCHA vào trang web của mình, vì nó bổ sung một lớp bảo mật để ngăn trang web khỏi tội phạm mạng.

Google cũng tung ra một dịch vụ miễn phí có tên “reCAPTCHA” giúp bảo vệ các trang web khỏi spam và lạm dụng. CAPTCHA và reCAPTCHA có vẻ giống nhau, nhưng chúng không hoàn toàn giống nhau. Đôi khi CAPTCHA cảm thấy bực bội và khó hiểu đối với nhiều người dùng. Mặc dù, có một lý do quan trọng giải thích tại sao chúng trở nên khó khăn.

Bài viết liên quan:

  1. Steam không nhận ra trò chơi đã cài đặt? Cách khắc phục
  2. FASTPN – CÁCH DÙNG VPN FASTPN.COM TRÊN APP V2RAYNG – ANDROID – V2RAYNG LOAD NHẸ VÀ ÍT QUẢNG CÁO
  3. Thêm các trang vào trang web Angular của bạn bằng cách sử dụng tệp Markdown
  4. 6 cách Samsung One UI tốt hơn Android gốc

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *