Статьи

Easy jQuery AJAX PHP Captcha — установка 2 минуты

Февраль 6, 2019

Настройте рабочую AJAX Captcha за несколько минут. Это для случаев, когда вам нужна супер быстрая капча для формы без боли нечитаемой речевой капли или чего-то подобного. Это не очень сложно угадать систему капчи, она просто обеспечивает очень простую капчу, сгенерированную PHP. Использование этого метода, однако, позволяет вам выбрать свой собственный размер, шрифт, цвет, цвет фона, что приятно. Я также интегрировал его с плагином jQuery Validate с удаленным ajax-запросом для проверки правильности капчи.

Характеристики

  • Интегрирован с плагином jQuery Validate.
  • Пользовательский шрифт капчи, размеры, цвета, цвета фона.
  • Уникально сгенерированный back-end с помощью PHP.
  • Нет боли reCaptcha, установка в секундах, не требуется ключ API.

демонстрация

Демонстрация построена на облегченной начальной загрузке, которую я создал с использованием jQuery, jQuery.validate, Require.js, Backbone.js, Bootstrap.

CAPTCHA DEMO

простой JQuery-PHP-CAPTCHA,

Скачать

На GitHub есть полный рабочий пакет загрузки. Звезда и Форк, как вам угодно. 🙂

ПОСМОТРЕТЬ НА GITHUB

Настроить

HTML

Использует разметку Bootstrap. 

*Please enter the verication code shown below.    
 *Please enter the verication code shown below.    
 *Please enter the verication code shown below.

JQuery

Проверка выполняется из объекта WEBAPP, который кэширует элементы DOM и устанавливает события для обновления капчи. Я использовал правило удаленной проверки, чтобы проверить правильность капчи с помощью ajax. 

 $(function() { //jQuery Captcha Validation WEBAPP = { settings: {}, cache: {}, init: function() { //DOM cache this.cache.$form = $('#captcha-form'); this.cache.$refreshCaptcha = $('#refresh-captcha'); this.cache.$captchaImg = $('img#captcha'); this.cache.$captchaInput = $(':input[name="captcha"]'); this.eventHandlers(); this.setupValidation(); }, eventHandlers: function() { //generate new captcha WEBAPP.cache.$refreshCaptcha.on('click', function(e) { WEBAPP.cache.$captchaImg.attr("src","/php/newCaptcha.php?rnd=" + Math.random()); }); }, setupValidation: function() { WEBAPP.cache.$form.validate({ onkeyup: false, rules: { "firstname": { "required": true }, "lastname": { "required": true }, "email": { "required": true }, "captcha": { "required": true, "remote" : { url: '/php/checkCaptcha.php', type: "post", data: { code: function() { return WEBAPP.cache.$captchaInput.val(); } } } } }, messages: { "firstname": "Please enter your first name.", "lastname": "Please enter your last name.", "email": { "required": "Please enter your email address.", "email": "Please enter a valid email address." }, "captcha": { "required": "Please enter the verifcation code.", "remote": "Verication code incorrect, please try again." } }, submitHandler: function(form) { /* -------- AJAX SUBMIT ----------------------------------------------------- */ var submitRequest = $.ajax({ type: "POST", url: "/php/dummyScript.php", data: { "data": WEBAPP.cache.$form.serialize() } }); submitRequest.done(function(msg) { //success console.log('success'); $('body').html(' 
  капча правильная, отправьте форму успешно! 
  «);
                     });

                     submitRequest.fail (функция (jqXHR, textStatus)
                     {
                         //провал
                         console.log ("ошибка - произошла ошибка: (" + textStatus + ").");
                     });

                 }

             });

         }

     }

     WEBAPP.init ();

 });

PHP

Файл newCaptcha.php просто создает новое изображение капчи на основе предоставленного шрифта и настроек цвета. Он сохраняет код капчи в переменной сеанса PHP под названием капча. 

 < ?php session_start(); $string = ''; for ($i = 0; $i < 5; $i++) { $string .= chr(rand(97, 122)); } $_SESSION['captcha'] = $string; //store the captcha $dir = '../fonts/'; $image = imagecreatetruecolor(165, 50); //custom image size $font = "PlAGuEdEaTH.ttf"; // custom font style $color = imagecolorallocate($image, 113, 193, 217); // custom color $white = imagecolorallocate($image, 255, 255, 255); // custom background color imagefilledrectangle($image,0,0,399,99,$white); imagettftext ($image, 30, 0, 10, 40, $color, $dir.$font, $_SESSION['captcha']); header("Content-type: image/png"); imagepng($image); ?>

checkCaptcha.php — это просто. Он проверяет, совпадает ли код и возвращает результат клиентскому интерфейсу. 

 < ?php session_start(); if(isset($_REQUEST['code'])) { echo json_encode(strtolower($_REQUEST['code']) == strtolower($_SESSION['captcha'])); } else { echo 0; // no code } ?>

Я надеялся, что это помогло вам настроить быструю капчу! Если это так, пожалуйста, оставьте комментарий! 🙂

41
Share: