Генератор капчи с использованием HTML CSS и JavaScript
Капча — это способ идентификации пользователя, является ли он человеком или нет. Капча составляется с помощью сочетания букв и цифр. он гарантирует, что пользователь, пытающийся получить доступ к платформе, является человеком. Итак, не теряя времени, приступим.
Применение капчи:
• Аутентификация с помощью формы: для входа в систему и регистрации ее можно использовать, чтобы убедиться, что конечный пользователь является человеком.
• Предотвращение фальшивых регистраций: с помощью капчи мы можем предотвратить создание ботами учетной записи в системе.
• Предотвращение поддельных комментариев: таким образом бот не сможет комментировать систему,
• NetBanking и финансовые институты: обеспечить, чтобы аутентификация выполнялась только людьми, и таким образом можно было предотвратить манипулирование транзакциями.
Примечание. Капча также может защитить от некоторых автоматизированных атак.
Пример: Сначала создайте раздел для Captcha с HTML. Приведенный ниже код сгенерирует дизайн для капчи, и из файла CSS мы добавим стиль, а при щелчке изображения (обновления) мы создадим новую капчу, вызвав метод generate() из JavaScript.
• index.html
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="captcha.css">
<link rel="stylesheet" href= "https://use.fontawesome.com/releases/v5.15.3/css/all.css" integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk" crossorigin="anonymous">
<script src="captcha.js"></script>
</head>
<body onload="genrate()">
<div id="user-input" class="inline">
<input type="text" id="submit" placeholder="Captcha code" />
</div>
<div class="inline" onclick="genrate()">
<i class="fas fa-sync"></i>
</div>
<div id="image" class="inline" selectable="False"></div>
<input type="submit" id="btn" onclick="printmsg()" />
<p id="key"></p>
</body>
</html>
captcha.css: для разработки нашего поля с капчей и кнопки отправки.
margin-top: 10px;
box-shadow: 5px 5px 5px 5px gray;
width: 60px;
padding: 20px;
font-weight: 400;
padding-bottom: 0px;
height: 40px;
user-select: none;
text-decoration:line-through;
font-style: italic;
font-size: x-large;
border: red 2px solid;
margin-left: 10px;
}
#user-input {
box-shadow: 5px 5px 5px 5px gray;
width:auto;
margin-right: 10px;
padding: 10px;
padding-bottom: 0px;
height: 40px;
border: red 0px solid;
}
input {
border:1px black solid;
}
.inline {
display:inline-block;
}
#btn {
box-shadow: 5px 5px 5px grey;
color: aqua;
margin: 10px;
background-color: brown;
}
captcha.js: этот файл будет проверять введенную капчу с помощью сгенерированной капчи, когда пользователь нажимает кнопку отправки. И когда щелкнут значок обновления, он повторно сгенерирует капчу.
function genrate() {
// Очистить старый ввод
document.querySelector("#submit").value = "";
// Доступ к элементу для сохранения
// сгенерированная капча
captcha = document.querySelector("#image");
let uniquechar = "";
const randomchar = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
// Сгенерировать капчу на длину
// 5 со случайным символом
for (let i = 1; i < 5; i++) {
uniquechar += randomchar.charAt(Math.random() * randomchar.length)
}
// Сохранить сгенерированный ввод
captcha.innerHTML = uniquechar;
}
function printmsg() {
const usr_input = document.querySelector("#submit").value;
// Проверьте, равен ли ввод
// генерировать капчу или нет
if (usr_input == captcha.innerHTML) {
let s = document.querySelector("#key").innerHTML = "Соответствует";
genrate();
}
else {
let s = document.querySelector("#key").innerHTML = "не соответствует";
genrate();
}
}
