Kselax.ru

Hacker Kselax — the best hacker in the world

Menu
  • Блог
  • Контакты
  • wp plugin генератор
  • Русский
    • Русский
    • English
Menu

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

Posted on 2 июля, 201711 февраля, 2019 by admin

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

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

По этой ссылке находиться страница где мы регистрируем наши каптчи https://www.google.com/recaptcha/intro/v3.html Там нам нужно получить 2 ключа client key и server key

можно искать через гуглы страницы

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

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

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

Как добавить google Invisible reCAPTCHA

Сдесь страница где описано как это сделать ссылка

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

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

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

1
2
3
4
5
6
<button
  class="g-recaptcha"
  data-sitekey="your_site_key"
  data-callback="YourOnSubmitFm">
Submit
</button>

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

 

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

Например, обавляем такой код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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 параметр.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<?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

1
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 то нет.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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. Попробуем!

Добавлено новое 11.02.2019

Как добавить гугл invisible recaptcha и отправить fetch запрос

на клиент добавляем следующий код

 

Как выполнить разместить много google invisible recaptcha на странице

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://www.google.com/recaptcha/api.js?hl=ru" async defer></script>
  <title>Document</title>
</head>
<body>
  <form>
    <div>
      <label>
        поле1: <input id="number1">
      </label>
    </div>
 
    <div class="g-recaptcha"
      data-sitekey="your_key_here"
      data-callback="onSubmit1"
      data-size="invisible">
    </div>
 
    <div>
      <button id="check1">Проверить1</button>
    </div>
    
  </form>
 
  <form>
    <div>
      <label>
        поле1: <input id="number2">
      </label>
    </div>
 
    <div class="g-recaptcha"
      data-sitekey="your_key_here"
      data-callback="onSubmit2"
      data-size="invisible">
    </div>
 
    <div>
      <button id="check2">Проверить2</button>
    </div>
  </form>
 
  <script>
    function onSubmit1 (token) {
      console.log('onSubmit1');
 
      // here is going on a fetch request
 
    }
 
    function onSubmit2 (token) {
      console.log('onSubmit2');
 
      // here is goin on a fetch request
 
    }
    
    const check1 = document.getElementById('check1')
    const check2 = document.getElementById('check2')
    check1.addEventListener('click', e => {
      e.preventDefault()
      number = document.getElementById('number')
      grecaptcha.execute(0)
    })
    check2.addEventListener('click', e => {
      e.preventDefault()
      number2 = document.getElementById('number2')
      grecaptcha.execute(1)
    })
    
  </script>
</body>
</html>

grecaptcha.execute() принимает индекст блока в данном случае у нас два блока

Результат выполнения

конец

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Рубрики

  • C++ (293)
  • JavaScript (1)
  • linux (1)
  • MFC (39)
  • node.js (2)
  • React (3)
  • vBulletin (5)
  • Visual Studio (9)
  • wordpress (18)
  • Разное (29)

Метки

Ajax bootstrap CentOS CLI expressjs FormData GDlib google Invisible reCAPTCHA JWT media MFC php react-router-dom redux repository wordpress RTTI STL vBulletin vector Visual Studio WINAPI wordpress wp-plugins XMLHttpRequest Двоичное дерево Задачи С++ Игры С++ Исключения С++ О-большое Операторы_С++ Перегрузка операторов С++ Поиск С++ Потоки Проектирование_С++ С++ Типы_С++ Типы С++ Шаблоны С++ библиотеки локализация макросы С++ сортировка С++

Свежие комментарии

  • ExchiNuGs к записи Программка для заполнения форума на vBulletin 3.8.7
  • RA3PKJ к записи visual C++, создание диалоговых окон.
  • admin к записи Как удалить изображение из google
  • Shakanris к записи Программка для заполнения форума на vBulletin 3.8.7
  • костя к записи visual C++, создание диалоговых окон.
©2021 Kselax.ru Theme by ThemeGiant