В этой статье будет показываться, как сделать простую капча на JavaScript, также для того что бы отговорить вас это делать, по крайне мере в полноценных проектах.
Делаем капчу:
Я сделаю совсем простую капчу на JavaScript, поэтому если вам надо что то сложное сделать, то вам не сюда.
Но сначала покажу HTML.
1 2 3 4 5 | <div> <div class="str"></div> <input class="input-num" type="text"> <button class="btn">Отправить</button> </div> |
В целом всё понятно, div с классом str, туда мы будем выводить выражение, потом input для ввода числа, ну и последнее кнопка для отправки капчи.
Теперь перейдём к коды JavaScript.
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 | let str = document.querySelector(".str"); // Берём элемент строки let btn = document.querySelector(".btn"); // Берём элемент кнопки let num1 = Math.ceil(Math.random() * 10); // Получаем рандомное число один let num2 = Math.ceil(Math.random() * 10); // Получаем рандомное число два let res = num1 + num2; // Результат сложение этих чисел // Выводим строчку ворожения str.innerHTML = `${num1} + ${num2} = `; // События нажатия на кнопку btn.addEventListener("click", function () { // Получаем значение из input let inputNum = document.querySelector(".input-num").value; // Переводим в числовой тип данных inputNum = parseInt(inputNum); // Условие, если значение из input равно результат if (inputNum === res) { // То выводит в консоль "Вход разрешён" console.log("Вход разрешён"); } else { // Иначе выводит "Вход запрещен" console.log("Вход запрещен"); } }); |
Как видите код очень простой, я не буду рассказывать про него подробно, потому что в комментариях и так всё понятно, то как он работает, единственное, внутри условий вы конечно можете использовать другой код, например, отправку формы.
В остальном тут не чего больше рассказывать.
Почему нельзя делать капчу на JavaScript:
Капчу нельзя делать на JavaScript, потому что, вся обработка будет проходиться на компьютера пользователя, за счёт чего можно очень легко взломать капчу.
Можно сделать бота который присмотрит ваш HTML и JavaScript код, и узнать какие данные хранятся в капче, из-за этого может случится так, что у вас на сайте будет огромное количество ботов, не активных пользователей, что очень плохо.
Вообще капчи должны обрабатыватся на сервере, а не на стороне клиента, по этому, для полноценных проектов, лучше делать это на beck-end.
Вывод:
В этой статье было паказано, как делается простая капча на JavaScript, также, надеюсь я смог объяснить, почему не стоит делать капчу на JS.
Подписываетесь на соц-сети:
Оценка:
Средняя оценка: 3,00
Загрузка...