Появилась новая 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() принимает индекст блока в данном случае у нас два блока
Результат выполнения
конец