Как создать простую математическую форму CAPTCHA с помощью PHP?
В этой статье мы увидим, как создать простую форму Math CAPTCHA с помощью PHP, а также разберемся с ее реализацией на примере. Для выполнения этой задачи мы воспользуемся функцией PHP rand() и сверим сумму случайных чисел с ответом, предоставленным пользователем.
Как правило, мы все видели Google reCaptcha для проверки отправки формы. CAPTCHA расшифровывается как полностью автоматизированный общедоступный тест Тьюринга, позволяющий различать компьютеры и людей. Это простой метод проверки формы, который проверяет, заполняет ли пользователь все необходимые данные или нет. Простыми словами, при валидации reCaptcha наша задача — выявить похожие картинки или написать текст или цифры, которые дает Google. Вот новый вид капчи Math reCaptcha . Используется Math captcha , которая генерирует случайные числа и контрольную сумму этих случайных чисел с помощью пользовательского ввода.
Подход: для создания Math ReCaptcha мы используем PHP, JavaScript, HTML и CSS. Мы создадим базовую HTML-форму и стилизуем ее с помощью CSS. Чтобы сгенерировать случайные числа для сложения, мы используем функцию PHP rand() , чтобы проверить пользователя. Если это правильно, то перенаправить на следующую страницу (в моем случае Welcome.php), в противном случае будет отображаться ошибка « введена неверная капча».
Следующие шаги будут выполнены для создания формы Math CAPTCHA:
Шаг 1: Создайте HTML-форму, которая будет принимать имя, адрес электронной почты и текст в качестве полей ввода для заполнения капчи.
- индекс.php:
HTML
<!DOCTYPE html><html> <head> <title>Math recapcha</title> <link rel="stylesheet" href="style.css" type="text/css"/></head> <body> <h1 style="color:green"> Geeksforgeeks </h1> <div class="container"> <form method="POST"> Name: <input type="text" name="name" autocomplete="off" required><br> Email: <input type="text" name="email" autocomplete="off" required><br> <div class="col-12"> <div class="row"> <div class="col-md-6"> <div class="row"> <label for="quiz" class="col-sm-3 col-form-label"> </label> <div class="col-sm-9"> <input type="hidden" name="no1"> <input type="hidden" name="no2"> <input type="text" name="test" class="form-control quiz-control" autocomplete="off" id="quiz" required> </div> </div> </div> </div> </div> <input type="submit" name="submit" id="submit"> </form> </div></body> </html> |
- стиль.css:
CSS
* { margin: 5; padding: 0;} body { align-items: center; justify-content: center;} h1, h3 { text-align: center;} .container { margin: auto; padding: 3px; height: 400px; width: 300px;} .container input[type=text], select { width: 100%; padding: 10px 18px; margin: 6px 0; display: inline-block; border: 1px solid #ccc; border-radius: 4px; box-sizing: border-box;} .container input[type=submit] { width: 100%; background-color: #4CAF60; color: white; padding: 14px 20px; margin: 8px 0; border: none; border-radius: 4px; cursor: pointer;} .container input[type=submit]:hover { background-color: green;} |
Шаг 2: Добавьте PHP-код для математической операции
Это основная часть Math ReCaptcha, использующая PHP для реализации математической reCaptcha. Во-первых, мы берем два случайных числа, используя rand($min, $max) , которые принимают два значения: одно — минимальное, а второе — максимальное. Затем мы отображаем случайные числа перед полем ввода капчи.
<?php echo $num1 . "+" . $num2; ?>
Затем мы используем скрытые входные данные, чтобы получить значение случайных чисел:
<input type="hidden"
name= "no1"
value="<?php echo $num1 ?>">
<input type="hidden"
name="no2"
value="<?php echo $num2 ?>">Наконец, мы проверим, что сумма случайных чисел равна вводу пользователя, если она равна, то перенаправим на welcome.php или напечатаем утверждение, что введена неверная капча.
Пример: В этом примере описывается базовая форма Math CAPTCHA с использованием PHP.
- index.php
PHP
<?php $min = 1; $max = 10; $num1 = rand( $min, $max ); $num2 = rand( $min, $max );?><!DOCTYPE html><html> <head> <title>Math recapcha</title> <link rel="stylesheet" href="style.css" type="text/css"></head> <body> <h1 style="color:green"> GeeksforGeeks </h1> <h3> Creating a Simple Math CAPTCHA form using PHP </h3> <div class="container"> <form method="POST"> Name: <input type="text" name="name" autocomplete="off" required><br> Email: <input type="text" name="email" autocomplete="off" required><br> <div class="col-12"> <div class="row"> <div class="col-md-6"> <div class="row"> <label for="quiz" class="col-sm-3 col-form-label"> <?php echo $num1 . "+" . $num2; ?> </label> <div class="col-sm-9"> <input type="hidden" name="no1" value="<?php echo $num1 ?>"> <input type="hidden" name="no2" value="<?php echo $num2 ?>"> <input type="text" name="test" class="form-control quiz-control" autocomplete="off" id="quiz" required> </div> </div> </div> </div> </div> <input type="submit" name="submit" id="submit"> </form> <?php if(isset($_REQUEST["submit"])) { $test=$_REQUEST["test"]; $number1=$_REQUEST["no1"]; $number2=$_REQUEST["no2"]; $total=$number1+$number2; if ($total==$test) { header("Location: welcome.php"); exit(); } else { echo "<p> <font color=red font face="arial" size="5pt"> Invalid capcha entered ! </font> </p>"; } } ?> </div></body> </html> |
- добро пожаловать.php
Этот файл показывает, что наша форма была успешно отправлена.
PHP
<html> <body> <h1 style="color:green"> Welcome to GeeksforGeeks </h1> <?php echo "<p> <font color=blue font face="arial" size="10pt"> Your form submitted successfully ! </font> </p>"; ?></body> </html> |
Выход: