Почему не работает reCAPTCHA?

Question

Мар'ян Витак @MarianVytak

reCAPTCHA

Почему не работает reCAPTCHA?

Всем привет. Подскажите пожалуйста, почему не срабатывает reCAPTCHA? Если подробнее, то invisible reCAPTCHA + AJAX. Я использую сайт на примере из этого репозитория: 2-ajax. Вот ссылка на этот сайт, который я разместил на своем домене. После заполнения формы и ее отправки приходит информация, что форма успешно отправлена, но при этом сама reCAPTCHA не появляется. Ключи ввел верные. Для наглядности даю код.

<!DOCTYPE html>
<html lang="ru">

<head>
  <meta charset="utf-8">
  <title>Форма обратной связи</title>
  <link rel="stylesheet" href="feedback/css/bootstrap.min.css">
  <!-- Подключаем API Google reCAPTCHA -->
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>

<body>
  <h1 class="text-center">Форма обратной связи</h1>
  <!-- Split button -->
  <hr>
  <div class="container">
    <div class="row">
      <div class="col-sm-6 col-sm-offset-3">
        <!-- Контейнер, содержащий форму обратной связи -->
        <div class="panel panel-info">
          <!-- Заголовок контейнера -->
          <div class="panel-heading">
            <h3 class="panel-title">Форма обратной связи</h3>
          </div>
          <!-- Содержимое контейнера -->
          <div class="panel-body">

            <!-- Сообщение, отображаемое в случае успешной отправки данных -->
            <div class="alert alert-success success-send hidden" role="alert">
              <strong>Внимание!</strong> Форма была успешно отправлена.
            </div>

            <!-- Форма обратной связи -->
            <form id="messageForm" enctype="multipart/form-data" novalidate>
              <div class="row">

                <div class="error col-sm-12" style="color: #ff0000; margin-top: 5px; margin-bottom: 5px;"></div>

                <div class="col-sm-6">
                  <!-- Имя пользователя -->
                  <div class="form-group has-feedback">
                    <label for="name" class="control-label">Введите ваше имя:</label>
                    <input id="name" type="text" name="name" class="form-control" required="required" value="" placeholder="Например, Иван Иванович" minlength="2" maxlength="30">
                    <span class="glyphicon form-control-feedback"></span>
                  </div>
                </div>
                <div class="col-sm-6">
                  <!-- Email пользователя -->
                  <div class="form-group has-feedback">
                    <label for="email" class="control-label">Введите адрес email:</label>
                    <input id="email" type="email" name="email" class="form-control" required="required" value="" placeholder="Например, ivan@mail.ru" maxlength="30">
                    <span class="glyphicon form-control-feedback"></span>
                  </div>
                </div>
              </div>

              <!-- Сообщение пользователя -->
              <div class="form-group has-feedback">
                <label for="message" class="control-label">Введите сообщение:</label>
                <textarea id="message" name="message" class="form-control" rows="3" placeholder="Введите сообщение, состоящее не менее чем из 20 символов и не более чем из 500" minlength="20" maxlength="500" required="required"></textarea>
              </div>

              <!-- Файлы, для прикрепления к форме -->
              <div class="form-group">
                <p style="font-weight: 700;">Прикрепить к сообщению файлы (максимум <span id="countFiles"></span>):</p>
                <!-- Файл -->
                <input type="file" name="files[]">
                <p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>
              </div>

              <hr style="margin-top: 3px; margin-bottom: 3px;">

              <!-- invisible reCaptcha -->
              <div id="recaptcha" class="g-recaptcha" data-sitekey="6LfDP60UAAAAAIX6YUia1oG5TJFHKdw64sxDcWjn" data-callback="onSubmitReCaptcha" data-size="invisible"></div>

              <!-- Кнопка, отправляющая форму по AJAX -->
              <button id="submit" class="btn btn-primary pull-right" name="send-message">Отправить сообщение</button>

            </form>
            <!-- Конец формы -->
          </div>
        </div>
        <!-- Конец контейнера -->

      </div>
    </div>
  </div>

  <script src="feedback/js/jquery-1.12.4.min.js"></script>
  <script src="feedback/js/bootstrap.min.js"></script>
  <script src="feedback/script.js"></script>
</body>

</html>

Вопрос задан более трёх лет назад
2633 просмотра

2 комментария

Подписаться 1 Средний 2 комментария

Мар'ян Витак @MarianVytak Автор вопроса

Добавлю остальной кода сюда из-за превышения лимита.

// максимальное количество файлов
var countFiles = 5;
// типы разрешённых файлов
var typeFile = ['jpg', 'jpeg', 'gif', 'png', 'avi', 'mkv', 'mp4'];
// максимльный размер
var maxSizeFile = 104857600;

function onSubmitReCaptcha(token) {
  var idForm = 'messageForm';
  sendForm(document.getElementById(idForm), '/feedback/process.php');
}

// валидация формы
var validateForm = function(feedbackForm) {
  // переменная, отвечающая за валидность формы
  var isFormValid = true;
  // проверим элементы input и textarea формы на корректнось заполнения
  $(feedbackForm).find('input,textarea').each(function() {
    //найти form-group (для установления success/error)
    var formGroup = $(this).parents('.form-group');
    //найти glyphicon
    var glyphicon = formGroup.find('.form-control-feedback');
    //валидация данных посредством HTML5 функции checkValidity
    if (this.checkValidity()) {
      //установим зелёный цвет элементу
      formGroup.addClass('has-success').removeClass('has-error');
      //добавим иконку OK
      if ($(this).prop("tagName").toLowerCase() != 'textarea') {
        glyphicon.addClass('glyphicon-ok').removeClass('glyphicon-remove');
      }
    } else {
      //установим красный цвет элементу
      formGroup.addClass('has-error').removeClass('has-success');
      //добавим иконку Remove
      if ($(this).prop("tagName").toLowerCase() != 'textarea') {
        glyphicon.addClass('glyphicon-remove').removeClass('glyphicon-ok');
      }
      //отметим форму как не валидную
      isFormValid = false;
    }
  });
  return isFormValid;
};

// подготовка данных формы
var prepareDataForm = function(feedbackForm) {
  // создаём экземпляр объекта FormData
  var formData = new FormData();
  // добавим в него значения полей
  if ($(feedbackForm).find('[name="name"]').length == 1) {
    formData.append('name', $(feedbackForm).find('[name="name"]').val());
  }
  if ($(feedbackForm).find('[name="email"]').length == 1) {
    formData.append('email', $(feedbackForm).find('[name="email"]').val());
  }
  if ($(feedbackForm).find('[name="message"]').length == 1) {
    formData.append('message', $(feedbackForm).find('[name="message"]').val());
  }
  if ($(feedbackForm).find('[name="files[]"]').length >= 1) {
    var files = $(feedbackForm).find('[name="files[]"]');
    for (var i = 0; i < files.length; i++) {
      var fileList = files[i].files;
      if (fileList.length > 0) {
        var file = fileList[0];
        if (($.inArray(file.name.split('.').pop().toLowerCase(), typeFile) >= 0) && (file.size < 104857600)) {
          formData.append('files[]', file, file.name);
        }
      }
    }
  }
  // добавим ответ invisible reCaptcha
  formData.append('g-recaptcha-response', grecaptcha.getResponse());
  return formData;
}

// отправка формы через AJAX
var sendForm = function(feedbackForm, url) {
  $.ajax({
    type: "POST",
    url: url,
    data: prepareDataForm(feedbackForm),
    contentType: false,
    processData: false,
    cache: false,
    success: function(data) {
      var data = JSON.parse(data);
      $(feedbackForm).find('.error').text('');
      if (data.result == "success") {
        $(feedbackForm).hide();
        $(feedbackForm).parent().find('.success-send').removeClass('hidden');
      } else {
        var errors = '<p>Отправить форму не удалось!</p>';
        for (var error in data) {
          if (error == 'result') {
            continue;
          }
          errors += '<p>' + data[error] + '</p>';
        }
        $(feedbackForm).find('.error').html(errors);
      }
    },
    error: function(request) {
      $(feedbackForm).find('.error').text('Произошла ошибка ' + request.responseText + ' при отправке данных.');
    }
  });
}

//после загрузки веб-страницы
$(function() {
  // отображаем на форме максимальное количество файлов
  $('#countFiles').text(countFiles);
  // при изменения значения элемента "Выбрать файл"
  $(document).on('change', 'input[name="files[]"]', function(e) {
    // если выбран файл, то добавить ещё элемент "Выбрать файл"
    if ((e.target.files.length > 0) && ($(this).next('p').next('input[name="files[]"]').length == 0) && ($('input[name="files[]"]').length < countFiles)) {
      $(this).next('p').after('<input type="file" name="files[]"><p style="margin-top: 3px; margin-bottom: 3px; color: #ff0000;"></p>');
    }
    // если выбран файл, то..
    if (e.target.files.length > 0) {
      // получить файл
      var file = e.target.files[0];
      // проверить размер файла
      if (file.size > maxSizeFile) {
        $(this).next('p').text('* Файл не будет отправлен, т.к. его размер больше 512Кбайт');
      }
      // проверить тип файла
      else if ($.inArray(file.name.split('.').pop().toLowerCase(), typeFile) == -1) {
        $(this).next('p').text('* Файл не будет отправлен, т.к. его тип не соответствует разрешённому');
      } else {
        // убираем сообщение об ошибке
        if ($(this).next('p')) {
          $(this).next('p').text('');
        }
      }
    } else {
      // если после изменения файл не выбран, то сообщаем об этом пользователю
      $(this).next('p').text('* Файл не будет отправлен, т.к. он не выбран');
    }
  });

  // при отправке формы messageForm на сервер (id="messageForm")
  $('#messageForm').submit(function(event) {
    // отменим отправку форму на сервер
    event.preventDefault();
    if (validateForm(this)) {
      // вызываем invisible reCaptcha
      grecaptcha.execute();
    }
  });

});

Написано более трёх лет назад

Мар'ян Витак @MarianVytak Автор вопроса

<?php
  /* основные настройки: */
  $allowedExtension = array("jpg", "jpeg", "gif", "png"); // разрешённые типы файлов
  $pathToFile = $_SERVER['DOCUMENT_ROOT'].'/feedback/files/'; // директория для хранения файлов
  $maxSizeFile = 1048576; // максимальный размер файла в байтах
  $secret = '6LfDP60UAAAAAC--UNa9kT3AfAZydHX87oh3nKgm'; // ваш секретный ключ

  // открываем сессию
  session_start();
  // переменная в которую будем сохранять результат работы
  $data['result']='error';

  // функция для проверки длины строки
  function checkStringLength($string, $minLength, $maxLength) {
    $length = mb_strlen($string,'UTF-8');
    if (($length < $minLength) || ($length > $maxLength)) {
      return false;
    }
    else {
      return true;
    }
  }
  // если запрос не AJAX, то возвращаем ошибку и завершаем работу скрипта
  if (empty($_SERVER['HTTP_X_REQUESTED_WITH']) || $_SERVER['HTTP_X_REQUESTED_WITH'] != 'XMLHttpRequest') {
    echo json_encode($data);
    exit();
  }

  $data['result']='success';

  // получаем имя
  if (isset($_POST['name'])) {
    $name = $_POST['name'];
    if (!checkStringLength($name, 2, 30)) {
      $data['name'] = 'Поле <b>имя</b> содержит недопустимое количество символов. Допустимое значение от 2 до 30.';
      $data['result']='error';
    }
  } else {
    $data['name'] = 'Поля <b>имя</b> не заполнено.';
    $data['result'] = 'error';
  }
  // получаем email
  if (isset($_POST['email'])) {
    $email = $_POST['email'];
    if (!filter_var($email,FILTER_VALIDATE_EMAIL)) {
      $data['email']='Поле <b>email</b> имеет не корректное значение.';
      $data['result']='error';
    }
  } else {
    $data['email'] = 'Поля <b>email</b> не заполнено.';
    $data['result']='error';
  }
  //получаем сообщение
  if (isset($_POST['message'])) {
    $message = $_POST['message'];
    if (!checkStringLength($message, 20, 500)) {
      $data['message']='Поле <b>сообщение</b> содержит недопустимое количество символов. Допустимое значение от 20 до 500.';
      $data['result']='error';
    }
  } else {
    $data['message'] = 'Поле <b>message</b> не заполнено.';
    $data['result']='error';
  }
  // блок проверки invisible reCAPTCHA
  require_once (dirname(__FILE__).'/recaptcha/autoload.php');
  // если в массиве $_POST существует ключ g-recaptcha-response, то...
  if (isset($_POST['g-recaptcha-response'])) {
    // создать экземпляр службы recaptcha, используя секретный ключ
    $recaptcha = new \ReCaptcha\ReCaptcha($secret);
    // получить результат проверки кода recaptcha
    $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
    // результат проверки
    if ($resp->isSuccess()){
      $data['result']=='success';
    } else {
      /* //для отладки: 
           $errors = $resp->getErrorCodes();
           $data['error-captcha'] = $errors;
      */
      $data['captcha']='Код капчи не прошёл проверку на сервере!';
      $data['result']='error';
      echo json_encode($data);
      exit();      
    }
  } else {
    $data['captcha']='Код капчи не прошёл проверку на сервере!';
    $data['result']='error';
    echo json_encode($data);
    exit();     
  }
  // если прозошли ошибки, то завершаем работу и возвращаем ответ клиенту
  if ($data['result']!='success') {
    echo json_encode($data);
    exit();    
  }

  // обработка переданных файлов (name="files[]")
  if(isset($_FILES["files"])) {
    $files = array();
    // цикл по файлам
    $i = 1;
    foreach ($_FILES["files"]["error"] as $key => $error) {
      if ($error == UPLOAD_ERR_OK) {
        // получаем характеристики файла
        $nameFile = $_FILES['files']['name'][$key];
        $extFile = mb_strtolower(pathinfo($nameFile, PATHINFO_EXTENSION));
        $sizefile = $_FILES['files']['size'][$key];
        $filetype = $_FILES['files']['type'][$key];
        // проверка расширения файла и его размер
        if (!in_array($extFile, $allowedExtension)) {
          $data['files-'+$i]='Ошибка при загрузке файла '. $nameFile .' (неверное расширение).';
          $data['result']='error';
          echo json_encode($data);
          exit();
        }
        if ($sizefile > $maxSizeFile) {
          $data['files-'+$i]='Ошибка при загрузке файлов '. $nameFile .' (размер превышает '. $maxSizeFile/1024 .' Кбайт).';
          $data['result']='error';
          echo json_encode($data);
          exit();
        }
        $tmpFile = $_FILES['files']['tmp_name'][$key];
        // уникальное имя файла
        $newFileName = uniqid('img_', true).'.'.$extFile;
        // полное имя файла
        $newFullFileName = $pathToFile.$newFileName;
        // перемещаем файл в директорию
        if (!move_uploaded_file($tmpFile, $newFullFileName)) {
          $data['files'] = 'Произошла ошибка при загрузке файлов.';
          $data['result']='error';
          echo json_encode($data);
          exit();
        }
        $files[] = $newFullFileName;
      } else {
        $data['files'] = 'Произошла ошибка при загрузке файлов.';
        $data['result']='error';
        echo json_encode($data);
        exit();
      }
    }
  }
  
  // завершающие действия
  
  // запись информации в файл
  $output = "----------" . "\n";
  $output .= date("d-m-Y H:i:s") . "\n";
  $output .= "Имя пользователя: " . $name . "\n";
  $output .= "Адрес email: " . $email . "\n";
  $output .= "Сообщение: " . $message . "\n";
  if (isset($files)) {
    $output .= "Файлы: " . "\n";
    foreach ($files as $value) {
      $output .= $value . "\n";
    }
  }
  if (file_put_contents(dirname(__FILE__).'/message.txt', $output, FILE_APPEND | LOCK_EX)) {
    $data['result']='success';
  } else {
    $data['files'] = 'Произошла ошибка при отправке формы.';
    $data['result']='error';
    echo json_encode($data);
    exit();
  }

  // отправка формы на email
  require_once dirname(__FILE__) . '/phpmailer/PHPMailerAutoload.php';
  //формируем тело письма
  $output = '<p><b>Дата</b>: ' . date('d-m-Y H:i') . '</p>';
  $output .= '<p><b>Имя пользователя:</b> ' . $name . '</p>';
  $output .= '<p><b>Адрес email:</b> ' . $email . '</p>';
  $output .= '<p><b>Сообщение:</b> ' . $message . '</p>';
  if (isset($files)) {
    $output .= '<p>Файлы:</p>';
    foreach ($files as $value) {
      $href = substr($value, strpos($value, '/feedback/'));
      $output .=  '<p><a href="'.$_SERVER['SERVER_NAME'].$href.'">'.$href.'</a></p>';
    }
  }
  // создаём экземпляр класса PHPMailer
  $mail = new PHPMailer;
  $mail->CharSet = 'UTF-8';
  $mail->From      = 'email@mysite.ru';
  $mail->FromName  = 'Имя сайта';
  $mail->isHTML(true);
  $mail->Subject   = 'Сообщение с формы обратной связи';
  $mail->Body      = $output;
  $mail->AddAddress( 'myemail@mail.ru' );

  // отправляем письмо
  if ($mail->Send()) {
    $data['result']='success';
  } else {
    $data['result']='error';
  }

  echo json_encode($data);

?>

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 1