google Invisible reCAPTCHA Установка

Рубрика: wordpress, Дата: 2 July, 2017, Автор:

Появилась новая google Invisible reCAPTCHA , типо она лучше чем старая где нужно галачку ставить. Рассмотрим как ее можно подключитьgoogle Invisible reCAPTCHA

Получение кодов google Invisible reCAPTCHA

И так в поиске гугла вводим google Invisible reCAPTCHA и переходим по ссылке на сайт гугла. Там выбираем get captcha и на выбор  invisible reCatcha ставим радиокнопку. Нам там дадут два ключа secret site key и secret key для использования на сайте и ображения к гуглу  через пост запрос.

И мы увидем код который нужно вставить в форму и урл который нужно прописать в head для загрузки кода самой google Invisible reCAPTCHA.

Там также нужно добавить наш сайт туда, там попросят нас ввести домен нашего сайта.

Добавление на сайт google Invisible reCAPTCHA

в <head> добавляем код

<script src='https://www.google.com/recaptcha/api.js'></script>;

в форму добавляем кнопку

<button 
  class="g-recaptcha" 
  data-sitekey="your_site_key" 
  data-callback="YourOnSubmitFm">
Submit
</button>

Дальше нам нужно определить нашу callback функцию

 

Определение callback функции для google Invisible reCAPTCHA

Добавляем в нее от такой код например

function YourOnSubmitFn(token){
  console.log('success='+token);
  var formData=new FormData(jQuery('#form_display1')[0]);
  formData.append('action', 'test_captcha');

  jQuery.ajax({
    url: my_object.ajax_url,
    type: 'POST',
    data: formData,
    processData: false, //allow send not only string
    contentType: false,
    async: false,// waiting till finished handling request

    success: function(msg){
      console.log("msg="+msg);
      grecaptcha.reset();
    }
  });//end ajax
}

КАк же это работает?

Гугл на автомате определяет нужно ли давать проверку пользователю или нет.  Когда мы отправляем форму в нашей callback функции, то на сервер передается параметр с капчи – token. Этот параметр имеет название g-recaptcha-response и так передаем этот параметр в наш обработчик формы. В нашем обработчике формы мы еще отправляем post запрос на сервер гугл с этим token который хранится в g-recaptcha-response . И еще два параметра secret key – для обращения к гуглу и ip пользователя.  Дальше получаем ответ где указано правильный talken или нет. Ответ приходит в JSON, декодируем его и смотрим success параметр.

Пример кода – обработчика формы

<?php
echo '<pre>';
print_r($_POST);
echo '</pre>';

// $response=$_POST['g-recaptcha-response'];
// $remoteip=$_SERVER['REMOTE_ADDR'];
$url="https://www.google.com/recaptcha/api/siteverify";
$args=array(
  'method' => 'POST',
  'timeout' => 45,
  'redirection' => 5,
  'httpversion' => '1.0',
  'blocking' => true,
  'headers' => array(),
  'body' => array(
    'secret' => '6Lc5lCcUAAAAAA9KtsEb0bqny1GUATDUB6100PxE',
    'response' => $_POST['g-recaptcha-response'],
    'remoteip'=> $_SERVER['REMOTE_ADDR'],
  ),
  'cookies' => array()
);
$response = wp_remote_post( $url, $args);

if ( is_wp_error( $response ) ) {
  $error_message = $response->get_error_message();
  echo "Something went wrong: $error_message";
} else {
  $response['body'] =json_decode($response['body']);
  echo 'Response:<pre>';
  print_r( $response['body']);
  echo '</pre>';
  echo "<p>responce['body']->seccess={$response['body']->success}</p>";
  if($response['body']->success==true){
    echo "success=true";
  }else{
    echo "success=false";
  }
}

?>

Кое какие настройки типо faq

Как изменить язык на русский ?

Для того чтобы изменить язык, мы передаем дополнительный параметр hl=ru

wp_enqueue_script( 'recaptcha', 'https://www.google.com/recaptcha/api.js?hl=ru', null, '3.3.7');

Как сделать загрузку google Invisible reCAPTCHA через ajax

У меня с этим были проблемы. Не получалось загрузить через аякс чтобы работала капча. То есть при нажатии на кнопку у меня идет аякс запрос и возвращается форма в которой есть google Invisible reCAPTCHA . И она не вызывалась. Ниче не работала.  Если просто перезагрузить страницу на которой есть форма с google Invisible reCAPTCHA, то все работает, если черзе ajax то нет.

Нужно явно вызывать  делать вызов. Ниже код как это делается

<script type="text/javascript">
var onSubmit = function(token) {
  console.log('success!');
};




var onloadCallback = function() {
  grecaptcha.render('test_button', {
    'sitekey' : '6Lc5lCcUAAAAAG_jb7VPiWZMFPeydNGJ9NPP9wR8',
    'callback' : onSubmit
  });
};
</script>
<form id="form_choose_start_date" class="choose_start_date">

 <input id="start_date" type="text" name="start_date">

 <div id="for_error"></div>
  <input id="test_button" type="submit" name="step_2" value="далее">
</form>

<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer>

Это моя тестовая форма – тестовый примерчик. Делаем подключение после формы. Так удобней. Да и делаем функции которые вызываются перед формой. Тут как то не правильно получается, потому что часто в вордпресс jQuery находится внизу. Такой код как сдесь приведен, будет работать если подключение jQuery вверху. В общем даже не знаю как это решить пока.  Наверно просто предется использовать чистый javascript для ajax запроса, без jQuery. Другого похоже выхода нету. Да придется писать ajax запрос на чистом javascript. Попробуем!

Комментарии:


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

Your email address will not be published. Required fields are marked *