Công nghệ Lập trình

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 trong bảo mật web. Dưới đây là cách 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 là gì?

CAPTCHA là chữ viết tắt của "Completely Automated Public Turing test to tell Computers and Humans Apart." Nó là một kiểu thử nghiệm thách thức - phản hồi mà web dùng để xác định người dùng có phải con người hay không.

CAPTCHA thêm bảo mật cho web bằng cách cung cấp các thử thách khó cho bot triển khai nhưng tương đối dễ với con người. Ví dụ, nhận diện tất cả ảnh có xe hơi từ một nhóm ảnh thật sự khó với bot nhưng đủ đơn giản cho mắt người nhận biết.

Ý tưởng của CAPTCHA bắt nguồn từ Turing Test. Đây là một phương thức kiểm tra xem một máy có thể suy nghĩ như con người hay không. Bạn có thể nghĩ một bài kiểm tra như một Turing Test ngược vì nó thách thức con người chứng minh họ không phải máy tính.

Tại sao web cần xác thực CAPTCHA?

CAPTCHA quan trọng bởi nhiều lí do. Bạn có thể dùng chúng để ngăn bot spam và gửi nội dung độc hại trong các biểu mẫu. Chúng cũng có thể giúp ngăn một số biểu mẫu dạng hacking.

Ngay cả những công ty như Google cũng dùng CAPTCHA để bảo vệ hệ thống khỏi cuộc tấn công dạng spam.

Code HTML CAPTCHA

Ở dự án này, bạn sẽ thêm CAPTCHA vào biểu mẫu HTML. Dùng code 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">
           Xác thực captcha bằng HTML, CSS và 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>

Code này chủ yếu chứa 7 thành phần:

  • <h1 id="captchaHeading"> <h1> hiện tiêu đề của biểu mẫu CAPTCHA.
  • <canvas id="captcha"> </canvas> hiện nội dung CAPTCHA.
  • <input id="textBox" type="text" name="text"> tạo một box đầu vào để nhập CAPTCHA.
  • <input id="submitButton" type="submit"> gửi biểu mẫu và kiểm tra xem CAPTCHA và văn bản được nhập có giống nhau hay không.
  • <button id="refreshButton" type="submit"> </button> làm mới lại CAPTCHA.
  • <span id="output"> </span> hiện kết quả sau khi xác thực nội dung đã nhập vào với CAPTCHA.
  • <div class="center"> </div> là phần tử cha, chứa tất cả các thành phần khác.

Mẫu CAPTCHA HTML liên kết với file CSS và JavaScript qua các thành phần link và script tương ứng. Bạn phải thêm tag link vào bên trong head và script ở cuối body.

Bạn cũng có thể tích hợp code này vào biểu mẫu hiện có trên web.

Code CSS CAPTCHA

Bạn có thể dùng CSS để tạo kiểu cho các thành phần HTML. Dùng code 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&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;
}

.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 loại bỏ những thuộc tính CSS từ code này như ý muốn.

Xác thực CAPTCHA bằng JavaScript

Bạn cần dùng JavaScript để thêm tính năng cho web. Bắt đầu bằng cách tìm nạp các tham chiếu tới thành phần bạn cần làm việc cùng, bao gồm canvas và hộp nhập. Dùng hàm document.getElementById() để làm việc này.

let captchaText = document.getElementById('captcha');
var ctx = captchaText.getContext("2d");
ctx.font = "30px Roboto";
ctx.fillStyle = "#08e5ff";

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

Tại đây, bạn dùng document.getElementById() để chọn một thành phần từ tài liệu theo ID của nó.

Để tạo text CAPTCHA, bạn cần chọn một số ký tự ngẫu nhiên. Bạn có nhiều phương pháp khác nhau để thực hiện điều đó. Một cách đơn giản nhất là lưu trữ một tập các ký tự tiềm năng trong một mảng để chọn từ:

var captchaStr = "";

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

Viết hàm tạo một CAPTCHA mới. Bạn có thể gọi hàm này ngay lập tức để tạo CAPTCHA khi tải trang. Bạn cũng có thể gọi nó để tạo lại CAPTCHA nếu người dùng nhấn nút Refresh.

Bắt đầu bằng cách xây dựng một mảng mới từ các ký tự ngẫu nhiên trong alphaNums. Lặp một số lần cố định - 7. Trong trường hợp này, thêm một ký tự ngẫu nhiên mới từ alphaNums trong từng lần lặp. Sau đó, bạn có thể viết mảng cuối cùng, dưới dạng chuỗi vào canvas bằng fillText.

function generate_captcha() {
   let emptyArr = [];

   for (let i = 1; i <= 7; i++) {
       emptyArr.push(alphaNums[Math.floor(Math.random() * alphaNums.length)]);
   }

   captchaStr = emptyArr.join('');

   ctx.clearRect(0, 0, captchaText.width, captchaText.height);
   ctx.fillText(captchaStr, captchaText.width/4, captchaText.height/2);

   output.innerHTML = "";
}

generate_captcha();

Lưu ý rằng hàm này xóa canvas và reset bất kỳ đầu ra, cả hai đều quan trọng cho việc làm mới text CAPTCHA.

Hoàn thiện tính năng cốt lõi bằng cách kiểm tra đầu vào của người dùng so với text CAPTCHA gốc. Bạn có thể xác định một hàm để làm việc này:

function check_captcha() {
    if (userText.value === captchaStr) {
        output.className = "correctCaptcha";
        output.innerHTML = "Correct!";
    } else {
        output.className = "incorrectCaptcha";
        output.innerHTML = "Incorrect, please try again!";
    }
}

Gọi hàm đó bằng cách nhấn phím Enter hoặc nhấn nút Submit:

userText.addEventListener('keyup', function(e) {
    if (e.key === 'Enter') {
       check_captcha();
    }
});

submitButton.addEventListener('click', check_captcha);

Cuối cùng, xử lý tính năng làm mới. Chỉ cần kết nối hành động gửi của nút bấm này cho hàm generate_captcha() để làm việc này:

refreshButton.addEventListener('click', generate_captcha);

Kết quả bạn nhận được như sau:

Tạo thành công mã xác thực CAPTCHA

Chúc các bạn tạo CAPTCHA bảo mật cho web, ứng dụng hay chương trình thành công!

Thứ Tư, 06/09/2023 16:33
5 ★ 1 👨 882
#CAPTCHA #HTML #JavaScript

Bạn nên đọc

0 Bình luận
Sắp xếp theo
❖
Xóa Đăng nhập để Gửi

    Có thể bạn quan tâm

    ❖ Lập trình