ASP.NET MVC: Кто ты милый человек или используем Captcha из MvcTools

ru-RU | создано: 29.09.2012 | опубликовано: 29.09.2012 | обновлено: 01.01.2018 | просмотров за всё время: 10392

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

Постановка задачи

Требуется проверить на то тот факт, что именно реальный человек отправляет форму на сервер, а не какой-нибудь робот. Так как существует множество сторонних библиотек и расширений, я решил добавить такой функционал и в свою Calabonga.Mvc.Extensions, которая устанавливается через nuget-пакет MvcTools.

Установливаем пакет

Для установки nuget-пакета используем команду, которую вводим в Nuget Manager Console:

PM> Install-Package mvctools
Attempting to resolve dependency 'XmlExport (? 0.2.1)'.
'MvcTools 1.7.0' already installed.
MvcCaptchaDemo already has a reference to 'MvcTools 1.7.0'.

PM> Install-Package mvctools

Пример использования captcha

Для примера я снова буду использовать форму обратной связи. И форма простая, и ViewModel’ы уже для нее имеются, и форма (Freeback.cshtml), короче, лучше не придумаешь. Первым делом создаем специальный метод контроллера (у меня он называется HomeController), который будет генерировать изображение:

public ActionResult Captcha() {
   return new CaptchaResult();
}

Обратите внимание на возвращаемый результат. Далее в на форме Feedback.cshtml я добавил код, который будет отображать картинку (captcha) и поле ввода для его подтверждения:

<div class="editor-label">
    @Html.ShowCaptcha("home", "captcha", 200, 50)
</div>
<div class="editor-field">
    @Html.Editor("captcha")<br />
    @Html.ValidationMessage("captcha")
</div>

В строке 2 указаны как параметры имя контроллера (controller) – “Home”, название действия (action) – “Captcha”, ширина – 200 (px) и высота 50 (px). В строке 5 и 6 – поле ввода подтверждения и, соответственно, место вывода сообщения об ошибке, если введен неверный код. Обратите внимание на параметры для 5 и 6 строки – “captcha”. Этот параметр - название поля ввода для Captcher, он поставляется по умолчанию. Но вы можете установить другой, но обязательно укажите его название в методе [post] у контролера. Мой метод такой:

[HttpPost]
[Captcher(MessageText = “Неверный код с картинки”)]
public ActionResult Feedback(FeedbackViewModel model) {
    if (ModelState.IsValid) {
        return View("FeedbackSent");
    }
    return View();
}

В строке 2 я поставил атрибут CaptcherAttribute, который и будет принимать от формы значение на проверку. Кстати, если задумаете менять название контрола для Captcher, то строке 2 в скобках в кавычках не забудьте его указать.

Вот так выглядит форма, а вернее captcha:

 

97-captcha

Существует и версия nuget-пакета для NET 4.5. Для того чтобы установить пакет воспользуйтесь командой:

PM> Install-Package MvcTools.Mvc4

Заключение

Как заключение хочу предложить ссылку на Nuget-Пакет MvcTools

Комментарии к статье (14)

31.07.2013 11:33:51 Михаил

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

01.08.2013 1:18:31 Calabonga

Михаил, я добавил новое свойство MessageText, которое позволяет задать тесктовое сообщение, в случаи когда Captcha введена неправильно.

Новое свойство доступно в пакетах версий:
Install-Package MvcTools (версия 1.8.2)

И для MVC4:
Install-Package MvcTools.Mvc4 (версия 0.4.2)

Спасибо, за подсказку.

31.10.2013 11:56:04 Димка

Спасибо. Очень актуально 

11.03.2014 8:10:15 Alexandr

Здравствуйте. Есть ли какая-то возможность обхода вашей капчи? Просто есть один сайт который ее использует, и хотелось бы это узнать. Не для доса или спама.

15.03.2014 2:34:13 Calabonga

Alexandr, а по какой такой причине вы хотите обойти капчу? Просто интересно? И какой сайт ее использует?

17.03.2014 12:22:24 Alexandr

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

20.03.2014 10:11:45 Calabonga

Alexandr, а вы точно уверены, что стоит именно мой контрол? Именно из набора MvcTools?

21.03.2014 18:15:07 Валерий

А как переопределить цвет для каптчи? Чтобы все, что находится на рисунке было черного цвета?

23.03.2014 6:31:47 Calabonga

Валерий, к сожалению, такая возможность не предусмотрена. Но в последующих версиях библиотеки... может быть.

07.04.2014 9:02:26 Alexandr

ну картинка такая же, имена инпутов тоже, названия такие же

так что уверен на процентов 85)

online.kazpost.kz

 

да и кстати, подписался на новые коменты, но уведомлений нет

08.04.2014 1:30:28 Calabonga

Alexandr, я посмотрел сайт, к сожалению, это не моя кэпча, там используется другой механизм. То что подписка не рабоает, я знаю, сейчас готовится новая версия блога. там всё будет работать.

06.05.2014 11:15:15 Ольга

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

07.05.2014 6:56:55 Calabonga

Ольга, к сожалению в текущей реализации обновить картинку не получился в силу того, что рендеринг картинки реализован без использования AJAX.

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

10.03.2016 13:49:30 Максим

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