Инструкция по встраиванию Google Recaptcha.

 

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

Процесс внедрения Google reCaptcha на свой сайт состоит из следующих этапов:

• Регистрация сайта на гугле
• Внедрение скрипта для инициализации компонента на клиенте
• Написание основного кода

Далее будут рассмотрены эти шаги более подробно.

 

Регистрация сайта в сервисе гугл

Для выполнения данной операции потребуется аккаунт гугл и следующая страница: https://www.google.com/recaptcha/admin#list

Данная страница состоит из двух частей: в первой части требуется ввести сайт и домены, во второй части – получить открытый и закрытый ключ.

На этом регистрация окончена

 

Внедрение скрипта для инициализации компонента на клиенте

В первую очередь требуется подключить сам компонент, указав тег script и такими аттрибутами:

@ViewBag.currLang - код языка
<script 
   src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit&hl=@ViewBag.currLang" 
   async 
   defer>
</script>

 

Здесь следует обратить внимание на параметр onload – это имя функции обратного вызова который следует написать далее:

<div id="login-captcha" class="buffer-bottom-2"></div>

<script>
 var onloadCallback = function () {
        grecaptcha.render(document.getElementById('login-captcha'), {
            'sitekey': '6LcDsBETAAAAAMIxBirzlswxqcoG9lMCoCgEm-MU' // replace your sitekey
        });
    };
</script>

Ключ который передается в параметре sitekey – открытый.

Теперь компонент проинициализирован, осталось написать код который на него опирается.

Написание основного кода

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

 $(function () {
     $('.b').click(function (e) {
           e.preventDefault();
           var resp = $('[name="g-recaptcha-response"]').val();
           var params = { name: "dddd", resp: resp }; 
           as.sys.ajaxSend("/Coupons/Test2", params, function (data) {
              if (typeof (data) != "object") data = eval('(' + data + ')');
              console.log(data);
              if (data.result) {
              } 
              else 
              {
                 as.sys.bootstrapAlert(data.msg || "Возникли ошибки при выполнении операции!", { type: 'danger' });
              }
           });
     });
 })

И, соответственно, серверная часть:

[HttpPost]
 public ActionResult Test2(string name, string resp)
 {
     var g = new GoogleRecaptcha("6LdGZRoTAAAAAGNdtZ2oi6joT1i78JiLDKYaVRry");
     var isValidCaptcha = g.VerifyResponse(resp, true);
     var res = false;
     if (isValidCaptcha)
     {
         res = true;
     }
     return Json(new {
       result = res
     });
 }

Клиентский код запрашивает значение из каптчи, отдает его на сервер, который расшифровывает полученные данные с помощью закрытого ключа, и, соответственно, валидирует.