Заказать звонок
Заказ обратного звонка

Подключение Invisible ReCaptcha на SimplaCMS


invisible reCAPTCHA - это капча, которая позволяет осуществлять фоновую валидацию действий пользователей на сайте. В отличие от reCAPTCHA v2 она не требует от пользователей того, чтобы они нажимали на флажок (checkbox) "Я не робот". Она вызывается напрямую, т.е. тогда когда пользователь нажимает на существующую кнопку на сайте.

Для того, что бы подключить рекапчу на SimplaCMS, в первую очередь возьмите у клиента ключи для ее подключения, для этого надо сделать такие манипуляции:

  1. Зайти сюда ( https://www.google.com/recaptcha/intro/ )
  2. Нажать кнопку getRECAPTCHA (в самом верху справа)
  3. Зарегистрировать сайт , выбрать Invisible ReCaptcha и получить ключи

После этого можем выполнять установку на сайт:

Шаг 1

В файле index.tpl вставляем кусок кода перед закрывающим тегом </head>

<script>
  function onSubmit(token) {
    console.log(token);
    document.getElementById("demo-form").submit();
  }
</script>
<script src='https://www.google.com/recaptcha/api.js'></script>

 

В форму на сайте вносим следующие изменения:

<form class="form feedback_form" method="post" id='demo-form'>
  {if $error}
  <div class="message_error">
    {if $error=='captcha'}
    Неверно введена капча
    {elseif $error=='empty_name'}
    Введите имя
    {elseif $error=='empty_email'}
    Введите email
    {elseif $error=='empty_text'}
    Введите сообщение
    {/if}
  </div>
  {/if}
  <label>Имя</label>
  <input data-format=".+" data-notice="Введите имя" value="{$name|escape}" name="name" maxlength="255" type="text"/>

  <label>Email</label>
  <input data-format="email" data-notice="Введите email" value="{$email|escape}" name="email" maxlength="255" type="text"/>
  <input type="hidden" name="feedback" value=1 >

  <label>Сообщение</label>
  <textarea data-format=".+" data-notice="Введите сообщение" value="{$message|escape}" name="message">{$message|escape}</textarea>

  <input class="button g-recaptcha" data-sitekey="6LftcCUUAAAAAK5MmsExt-9muYJuaZsCuj9BLOEP" data-badge='bottomleft' data-callback="onSubmit" type="submit" name="feedback" value="Отправить" />

  {*
  <!-- <div class="captcha"><img src="captcha/image.php?{math equation='rand(10,10000)'}"/></div> -->
<!-- <input class="input_captcha" id="comment_captcha" type="text" name="captcha_code" value="" data-format="\d\d\d\d" data-notice="Введите капчу"/> --> *} </form>

 

Тегу <form> присвоим id= ’ demo-form ’ 

Кнопке отправки формы даем класс class = ‘ g-recaptcha’ и дата-атрибуты:

- data-sitekey="your_site_key"
- data-callback="onSubmit" - data-bage="bottomright" // - местоположение значка reCAPTCHA (по умолчанию: bottomright). В качестве значения можно указывать ещё: bottomleft (внизу слева) и inline (позволяет управлять положением с помощью CSS).

Добавляем новое поле input с именем формы (в нашем примере это форма обратной связи name=’ feedback‘).

<input type = "hidden" name = "feedback" value = 1 >

Шаг 2

Вставляем код проверки в файл обработчик нужного модуля ( в нашем примере это view/FeedbackView.php)

class FeedbackView extends View
{
  function fetch()
  {
    $feedback = new stdClass;

    // invisible reCAPTCHA
    $recaptcha_secret = "6LftcCUUAAAAAD1SKQ6UujFtTWY7er4qaH7zRXov";

    $response = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$recaptcha_secret."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
    $response = json_decode($response, true);
    //! invisible reCAPTCHA

    if($this->request->method('post') && $this->request->post('feedback'))
    {
      $feedback->name = $this->request->post('name');
      $feedback->email = $this->request->post('email');
      $feedback->message = $this->request->post('message');
      // $captcha_code = $this->request->post('captcha_code');

      $this->design->assign('name', $feedback->name);

В поле secret вставляем свой секретный ключ, который дал нам гугл.
Проверка ответа (правильно ли ввели капчу)

if($response["success"] !== true){
  $this->design->assign('error', 'captcha');

Дополнительные (необязательные) параметры капчи invisible reCAPTCHA:

  • data-badge (badge) - местоположение значка reCAPTCHA (по умолчанию: bottomright). В качестве значения можно указывать ещё: bottomleft (внизу слева) и inline (позволяет управлять положением с помощью CSS).
  • data-type (type) - тип капчи (по умолчанию: image). Изменить тип капчи при необходимости можно на audio.
  • data-tabindex (tabindex) - для страниц, в которых для навигации по элементам дополнительно используется клавиша tab. Данный параметр позволяет установить порядок элемента, его tabindex(по умолчанию: 0).

Демонстрация работы:

При нажатии на кнопку отправки формы происходит проверка невидимой капчи:

В случае ошибки получим :

Использование Gulp. Часть 4 - собираем стили. Хак для легкой проверки результатов верстки email в OkayCMS и SimplaCMS

Комментарии

Пока нет комментариев

Оставить комментарий