Как сделать капча для формы обратной связи

Как сделать капча для формы обратной связи
Как сделать капча для формы обратной связи
Как сделать капча для формы обратной связи
Как сделать капча для формы обратной связи
Как сделать капча для формы обратной связи

Так как у меня письмо отправляет скрипт на Perl — я покажу как это делается на нем. Но на PHP, на самом деле, не сложнее. Даже наверняка проще.

Что такое reCAPTCHA и как ее установить?

Это гугловый сервис, который умеет показывать и валидировать капчу. Капча, как вы знаете, это такие буковки-циферки, которые нужно ввести чтобы доказать что ты не робот.

Рекапча — популярное решение потому что с ней есть плагин для вордпресса, который горячо любим массами. Но у меня-то просто формочка, а не вордпресс. Поэтому я начал разбираться.

Регистрация на сервисе reCAPTCHA

Если у вас есть гугловый аккаунт — вы зарегистрированы. Вам надо добавить свой домен.

Добавление домена recaptcha

В ответ вам дадут два ключа — публичный и закрытый. Ниже объясню зачем они нужны. Главное что нужно запомнить — никому нельзя показывать закрытый ключ.

Собственно, это все. Начинаем мутить.

Отображение reCAPTCHA на сайте

Для начала, нам нужно отобразить reCAPTCHA в нашей форме. Для этого есть два варианта — хардкор-олдскульный и Ajax. Я выбрал второй (как-то посовременней). Чтобы его использовать, нужно сделать три вещи.

Сперва подключаем скрипт, управляющий reCAPTCHA.

<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>

Теперь делаем внутри нашей формы контейнер. Например, див.

<form action="index.cgi" method="post"> <textarea name="text" style="width:400px;height:300px;"></textarea> <div id="outer_captcha"></div> <input type="submit" value="Отправить"> </form>

Теперь загружаем, собственно капчу.

<script type="text/javascript"> $(function() { Recaptcha.create("ваш ОТКРЫТЫЙ ключ", "id дива", {theme: "название темы отображения"} ); }); </script>

В данном случае, я использую событие загрузки документа в jQuery, но можно прицепить создание рекапчи к любому другому событию. Например, сделать кнопку "показать капчу". Боту будет трудновато даже увидеть капчу, не то что взломать ее.

Важно! Вам нужно использовать ваш открытый ключ, полученный после регистрации домена. Вместо "id дива" нужно вставить id вашего div, в котором будет капча. В опциях можно указать название темы. По-умолчанию red. Подробнее про темы и параметры можно почитать на английском в документации. Кстати, можно указать язык отображения подсказок Русский. Для этого надо добавить параметр lang:"ru".

Recaptcha.create("ваш ОТКРЫТЫЙ ключ", "id дива", {theme: "название темы отображения", lang: "ru"} ); Проверка reCAPTCHA

Итак, наша капча отображается, она генерирует новые поля в форме, так что теперь отправка этой формы будет происходить как надо — с двумя нужными полями. Одно поле — зашифрованная строка капчи (текст на картинке). Другое поле — то что ввел пользователь.

Теперь отправляем форму на сервер. Там надо проверить правильно ли введена капча. Так как я использую Perl — я воспользовался разделом документации для Perl. В нем мне предложили использовать модуль Captcha::reCAPTCHA, который зависим от стандартного LWP::UserAgent и нестандартного HTML::Tiny.

Слава Богу — нестандартные модули состоят каждый из одного файла, так что по сути, надо скачать с CPAN два файла.

Начинаем использовать.

use Captcha::reCAPTCHA; my $c = Captcha::reCAPTCHA->new; my $result = $c->check_answer( "ваш закрытый код", $ENV{REMOTE_ADDR}, $cgi->param(recaptcha_challenge_field), $cgi->param(recaptcha_response_field) ); unless($result->{is_valid}) { return 'Неверно введена капча. Попробуйте снова.'; }

Все. Вам надо использовать как раз здесь ваш закрытый ключ. Модуль сформирует запрос и отправит его гуглу. Гугл проверит введенную капчу и скажет вам правильно она введена или нет. Модуль вернет хэш. Один из элементов хэша — is_valid. Если он ложный — капча введена неверно.

Собственно, это все. Можно конечно не использовать модуль и постить гуглу запрос самостоятельно. Как это сделать — тоже описано в документации. Но модулем-то удобней:) Кстати, для PHP там тоже есть несложное решение. Потребуют скачать один файл библиотеки и использовать его. Смысл такой же.

Спонсор поста vuz1conline.ru, который расскажет вам про установку 1С 7.7. Предприятие на Windows 7. Ох уж эта 1С! Просто вездесущая система. Я, если честно, поразился когда увидел ее. Она довольно простая и, я бы сказал, примитивная. Но столько шуму вокруг нее. И главное — никуда от нее не деться уже.

Самое смешное, что есть альтернативы лучше, да и 1С не должна меняться так часто. Но там столько обязаловки, что диву даешься как это вообще живет. Наверняка есть какие-нибудь стартапы, которые пытались уже отбить первенство у 1С, интересно, у кого-нибудь получилось вообще хоть чуток отбить клиентов? Судя по тому, что о таких стартапах не знает даже интернет-журнал про стартапы — ни у кого не получилось.

Если вы дочитали до этого абзаца — вам, вероятно, было интересно. А это хорошо. Я люблю когда людям интересно то, о чем я пишу. Поэтому я призываю вас: воспользуйтесь формой обратной связи (справа) и задайте мне любой интересующий вас вопрос. Я постараюсь ответить на него постом. Вы можете просто попросить меня написать пост о том-то или другом-то. Разумеется, вы можете задать вопрос по e-mail или воспользовавшись формой обратной связи. Тем более, что на ней теперь капча:)

e3c498199c0539b9278a7fe3620d948c

Понравилась статья? Поставь плюс один!

Теги: Perl JavaScript разработка

Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи Как сделать капча для формы обратной связи

Тоже читают:



Карнавальную юбку своими руками

Как сделать в 1с переход с усн на осно

Как сделать анонс в инстаграм

Красивые открытки торт мужчине

Шумовиброизоляция ваз 2110 своими руками