3.Капча на странице "Свяжитесь с нами"

[alexts 18]

Repost

В данной статье я просто покажу пример, как добавить каптчу на любую страницу интернет-магазина, основанного на VaM Shop.

Рассмотрим добавление каптчи на страницу обратной связи (Свяжитесь с нами) и на страницу регистрации клиента (create_account.php), но Вы не пугайтесь, принцип везде один и тот же, поняв принцип, Вы легко сможете добавить каптчу на любую страницу.

Для начала, что такое captcha - это случайно генерируемая картинка, на которой изображён набор цифр и/или символов в случайном порядке. Пользователь должен ввести указанные на картинки символы в форме, иначе он не может, к примеру, зарегистрироваться в магазине.

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

Человек видит такую случайную картинку и различает символы и цифры, а вот робот такие картинки понять не может, да, существуют и особо продвинутые роботы, которые умеют различать простенькие каптчи, но не более, т.е. каптча является достаточно надёжным средством, я имею в виду каптчу, которая используемая в VaM Shop, на картинке используются различные эффекты: "прыгающие буквы", фон. Надеюсь, что этого вполне достаточно для защиты страниц от роботов.

Так вот, в VaM Shop каптча применяется по умолчанию, к примеру, при подписке на рассылку, при напоминании пароля.

Я покажу, как добавлять каптчу и к другим страницам, в данном примере будет показано как добавить каптчу на страницу Свяжитесь с нами, т.к. очень часто через данную форму может приходить множество спама, могут просто "бомбить" Ваш почтовый ящик тысячами и десятками тысяч сообщений через форму обратной связи, вобщем, проблем может быть много от роботов, гуляющих по интернету, либо просто если кто-то решит максимально осложнить работу Вашего интернет-магазина.

Итак, начнём.

Файл свяжитесь с нами - /shop_content.php

Открываем его.

Добавляем в нашу форму обратной связи вывод случайно картинки и поле для ввода.

Находим:

$vamTemplate->assign('INPUT_TEXT', vam_draw_textarea_field('message_body', 'soft', 50, 15, $_POST[''],''));


Ниже добавляем:

$vamTemplate->assign('CAPTCHA_IMG', '<img src="'.vam_href_link(FILENAME_DISPLAY_CAPTCHA).'" alt="captcha" />');

$vamTemplate->assign('CAPTCHA_INPUT', vam_draw_input_field('captcha', '', 'size="6"', 'text', false));

Мы добавими две смарти-метки VVIMG и INPUT_CODE, который мы затем вставим в шаблон страницы обратной связи.

Теперь добавим проверку, правильно ли посетитель указал символы, указанные на картинке.

Ищем код:

if (vam_validate_email(trim($_POST['email']))) {


Меняем на:

if ((vam_validate_email(trim($_POST['email']))) && ($_POST['captcha'] == $_SESSION['vvcode'])) {

Теперь открываем шаблон страницы обратной связи. Это файл /templates/шаблон/module/contact_us.html.

Находим следующий код:


{#text_email#} {$INPUT_EMAIL}


Ниже добавляем:

{#text_sec_code#} {$CAPTCHA_IMG}

{#text_sec_code_text#} {$CAPTCHA_INPUT}


Как Вы видите, мы просто вставили метки, которые ранее определили в файле shop_content.php. а именно {$CAPTCHA_IMG} и {$INPUT_CODE}.

Также мы добавили в шаблон текстовые метки {#text_sec_code#} и {#text_sec_code_text#}.

Теперь нам нужно определить их в языковом файле.

Открываем файл /lang/lang_russian.conf.

Ищем блок констант для страницы contact_us, находим:

[contact_us]

text_name = 'Ваше имя:'

text_email = 'Ваш E-Mail:'

text_message = 'Ваше сообщение:'

text_success = 'Ваше сообщение было успешно отправлено.'


Добавляем новые константы, т.е. меняем данный код на:

[contact_us]

text_name = 'Ваше имя:'

text_email = 'Ваш E-Mail:'

text_message = 'Ваше сообщение:'

text_success = 'Ваше сообщение было успешно отправлено.'

text_sec_code = 'Картинка:'

text_sec_code_text = 'Укажите код на картинке:'

В принципе, на этом всё, разве что можно ещё добавить небольшое пояснение по поводу каптчи в текст ошибки.

Для этого в откройте файл /lang/russian/russian.php

Ищите:

define('ERROR_MAIL','Пожалуйста, проверьте указанные в форме данные');


Замените на:

define('ERROR_MAIL','Пожалуйста, проверьте указанные в форме данные.

Код, указанный на картинке нужно вводить с учётом регистра.

Если на картинке буква заглавная, Вы тоже должны вводить заглавную букву.');

Вот и всё, мы защитили страницу обратной связи от "интернет-нечисти"

Ещё один пример, добавим каптчу на страницу регистрации клиента create_account.php.

Я в этом примере подробно расписывать не буду, т.к. уже достаточно подробно было рассказано в первом примере, просто покажу где и что менять.

Принцип абсолютно тот же самый, добавляем проверку в скрипт, правильно ли указал посетитель код с картинки и добавляем вывод картинки в шаблон, ничего нового.

Итак, открываем файл /create_account.php

Добавляем проверку, правильно ли посетитель ввёл код, указанный на картинке.

Ищем:

if (ACCOUNT_TELE == 'true') {

if (strlen($telephone) < ENTRY_TELEPHONE_MIN_LENGTH) {

$error = true;

$messageStack->add('create_account', ENTRY_TELEPHONE_NUMBER_ERROR);

}

}


Добавляем после:

if ($_POST['captcha'] != $_SESSION['vvcode']) {

$error = true;

$messageStack->add('create_account', ENTRY_CAPTCHA_ERROR);

}

Теперь добавлем метки для шаблона.

Ищем:

$vamTemplate->assign('INPUT_PASSWORD', vam_draw_password_fieldNote(array ('name' => 'password', 'text' => ' '. (vam_not_null(ENTRY_PASSWORD_TEXT) ? ''.ENTRY_PASSWORD_TEXT.'' : '')), '', 'id="password"'));


Добавляем после:

$vamTemplate->assign('CAPTCHA_IMG', '<img src="'.vam_href_link(FILENAME_DISPLAY_CAPTCHA).'" alt="captcha" />');

$vamTemplate->assign('CAPTCHA_INPUT', vam_draw_input_field('captcha', '', 'size="6"', 'text', false));

Теперь добавим эти метки в шаблон, т.е. добавим вывод картинки на страницу регистрации.

Открываем файл /templates/vamshop/module/create_account.html

Ищем:

{#text_confirmation#} {$INPUT_CONFIRMATION}


Добавляем после:

{#text_sec_code#} {$CAPTCHA_IMG}

{#text_sec_code_text#} {$CAPTCHA_INPUT}

Последний шаг, добавим текстовые константы в языковые файлы.

Открываем файл /lang/russian/lang_russian.conf

Ищем:

# Creat account

[create_account]

heading_create_account = 'Регистрация'


Добавляем после:

text_sec_code = 'Картинка:'

text_sec_code_text = 'Укажите код на картинке (учитывая регистр):'

Добавим текстовую константу для ошибки, в случае, если посетитель неправильно указал код на картинке.

Открываем файл /lang/russian/russian.php

Ищем:

define('ENTRY_PASSWORD_NEW_ERROR_NOT_MATCHING', 'Поля Подтвердите пароль и Новый пароль должны совпадать.');


Добавляем после:

define('ENTRY_CAPTCHA_ERROR','Вы указали неправильный код картинки. Код, указанный на картинке нужно вводить с учётом регистра.

Если на картинке буква заглавная, Вы тоже должны вводить заглавную букву.');

Вот и всё, мы добавили каптчу на страницу регистрации клиента.

Ответить

Цитата

Изменить

Скрыть

[/CODE]

Edited June 29, 2012 by KoVaLsKy

[geval 3]

капча ухудшает юзабилити и усложняет жизнь клиенту, лишнее препятствие для написания письма

[KoVaLsKy 59]

это почему же?

[Leon 0]

Спасибо большое, всё получилось и работает. Капча - это нужное дело.

Но есть один нюанс, было бы хорошо, если бы Вы помогли его реализовать:

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

[support 447]

Посмотрите как сделано на странице задать вопрос о товаре, там кнопка обновить как раз есть, сделайте по аналогии и на странице карточки товара.

 

А вообще ставить каптчу нет смысла если у Вас нет кучи спама, зачем жизнь усложнять посетителям.

 

Вот когда будет проблема со спамом, тогда и можно будет думать.

[alexts 18]

Я на 1.67 "обновить"не сам делал, а заказывал, а потом обновление капчи  появилось штатно в движке.

Думается, что будет капча - не будет спама. А юзеры к капче везде и всюду уже привыкли как к данности.

[YuraS 4]

Думается, что будет капча - не будет спама.

спам-боты уже давно испольуют сервис антикапчи или другие разработки по распознаванию капч. та капча, которая сейчас в вамшопе, распознается на "раз-два".

[support 447]

Yurassik1 правильно говорит, каптчи распознаются практически все, если со спамом реально ещё не столкнулись, не усложнаяйте жизнь своим посетителям, особенно на важных страницах, таких как обратная связь.

[alexts 18]

Ну не знаю. Чахлый крючочек все же лучше двери на распашку. Может лучше довести капчу до уровня, как в джумловских модулях. Там по очереди выскакивает картинка разного типа: и запрос суммы цифр, и разные типы рисунков. Может я никому и не нужен, но на джумловсом сайте нет проблем уж года полтора -два. Тьфу тьфу, тьфу :)

[shaklov 63]

А я просто давно переименовываю поля в форме обратной связи и боты понятия не имеют, что это за форма.

Реальный пример: стали спамить в отзывы о товаре - по нескольку отзывов в минуту. Заказчик в шоке, просит капчу - я говорю "спокойно, сядем все".

Переименовал поля, и как рукой сняло... Моей рукой получается и сняло...

[rmn 7]

А вот как чек бокс от сюда http://clipartmag.ru/antispam.html пристроить?

[support 447]

Так там вроде написано как пристраивать.

[rmn 7]

Ну код не совсем такой.

По ссылке код под html, а править  php файл.

[support 447]

А кто сказал, что править php файл?!

Если только html-код, то он вставляется в .html шаблон нужного файла.

[rmn 7]

В файл "свяжитесь с нами"  надо поставить чекбокс.

Править надо  /shop_content.php или какой-то html файл?

[support 447]

Шаблон страницы обратной связи - /templates/шаблон/module/contact_us.html

[rmn 7]

Спасибо, все работает!

[support 447]

Не за что

[anort 0]

Здравствуйте.

После добавления капчи на страницу "Свяжитесь с нами" при отправлении сообщения возникают следующие ошибки:

Deprecated: Function split() is deprecated in /includes/external/phpmailer/class.phpmailer.php on line 470

Warning: Cannot modify header information - headers already sent by (output started at /includes/external/phpmailer/class.phpmailer.php:470) in /inc/vam_redirect.inc.php on line 47

При этом сообщение отсылается. Как устранить эти ошибки?

[support 447]

Здравствуйте!

 

Видимо, у Вас старая версия VamShop.

 

Скачайте http://vamshop.ru/download.html и перепишите к себе папку /includes/external/phpmailer/

[anort 0]

Здравствуйте!

 

Видимо, у Вас старая версия VamShop.

 

Скачайте http://vamshop.ru/download.html и перепишите к себе папку /includes/external/phpmailer/

Переписал. Помогло. Спасибо!

[support 447]

Не за что

[LordBelial 0]

из ask_a_question.html взял скрипт для обновление картинки капчи и поставил на contact_us.html

{config_load file="$language/lang_$language.conf" section="contact_us"}
<!-- Заголовок страницы -->
<h1>{$CONTACT_HEADING}</h1>
<!-- /Заголовок страницы -->
{if $error_message!=''}
<div class="contacterror">{$error_message}</div>
{/if}
{if $success!='1'}
{$FORM_ACTION}
<div class="page-questions">
	<script type="text/javascript">
{literal}
src="captcha.php";
function reload(){
        document.captcha.src='loading.gif';
        document.captcha.src=src+'?rand='+Math.random();
}
{/literal}
</script>
<!-- Содержимое страницы -->
	<div class="form-questions">
	<h4>{#text_yourquestion#}</h4>
	<!-- форма -->

		<fieldset class="form">
			<p><input type="text" name="name" placeholder="{#text_name#}" size="43"/></p>
			<p><input type="text" name="email" placeholder="{#text_email#}" size="43"/></p>
			<p><textarea name="message_body" placeholder="{#text_questions#}" id="message_body" cols="43" rows="15"></textarea></p>
			<p>{#text_sec_code#} {$CAPTCHA_IMG} <a href="javascript:void(0)" title="{#text_update#}" onclick="reload()">{#text_update#}</a></p>
			<p>{#text_inp_code#} {$CAPTCHA_INPUT}</p>
		</fieldset>

	<!-- /форма -->
	{$BUTTON_SUBMIT}
	</div>
	<div class="text-questions">
		{$CONTACT_CONTENT}
	</div>
	<div class="clear"></div>
</div>
{$FORM_END}
{/if}
<script src="http://yapro.ru/uploads/Files/jquery.placeholder/placeholder.js" type="text/javascript"></script>
{literal}
<script type="text/javascript">
$("FORM").placeholderLebnik();
</script>
{/literal}

но почему-то "обновить" не срабатывает =(

 

Страница где это реализовано http://polimedel.spb.ru/voprosy-i-otvety.html

[support 447]

Посмотрите на странице где работает, как выглядит картинка каптчи, в смысле html-код img src ....

 

и сравните со своим, наверное есть отличия, не указан атрибут id , class или ещё что.

[support 447]

А может и какие скрипты мешают, например вот внизу placholder какой-то подключается, теоретически он может мешать.