Как проверить Google reCaptcha в форме Submit

Недавно Google полностью переработал свой API reCaptcha и упростил его до одного флажка.

ReCaptcha

Проблема в том, что я могу представить форму с включенной reCaptcha без ее проверки, и форма будет игнорировать reCaptcha.

Прежде чем отправлять форму в файл PHP с помощью private key и др., Я не вижу упоминания об этом в их Руководстве для разработчиков. Я не знаю, как проверить форму, чтобы убедиться, что новый reCaptcha был заполнен пользователем.

Я что-то упускаю? Этот файл PHP с закрытым ключом все еще требуется?

Все, что у меня есть для reCaptcha, пока:

<div data-type="image" class="g-recaptcha" data-sitekey="My Public Key"></div> 

Если вы хотите проверить, нажал ли Пользователь флажок « I'm not a robot , вы можете использовать .getResponse() предоставляемую API reCaptcha.

Он вернет пустую строку в случае, если Пользователь не подтвердил себя, что-то вроде этого:

 if (grecaptcha.getResponse() == ""){ alert("You can't proceed!"); } else { alert("Thank you"); } 

В случае, если Пользователь выполнил проверку, ответ будет очень длинной.

Подробнее об API можно найти на этой странице: reCaptcha API Javascript

 var googleResponse = jQuery('#g-recaptcha-response').val(); if (!googleResponse) { $('<p style="color:red !important" class=error-captcha"><span class="glyphicon glyphicon-remove " ></span> Please fill up the captcha.</p>" ').insertAfter("#html_element"); return false; } else { return true; } 

Поместите это в функцию. Вызовите эту функцию на submit … #html_element – мой пустой div.

Вы можете проверить ответ тремя способами в соответствии с документацией Google reCAPTCHA :

  1. g-recaptcha-response : после того, как пользователь проверит флажок (я не робот), поле с идентификатором g-recaptcha-response будет заполнено в вашем HTML.
    Теперь вы можете использовать значение этого поля, чтобы узнать, является ли пользователь ботом или нет, используя приведенные ниже строки:

     var captchResponse = $('#g-recaptcha-response').val(); if(captchResponse.length == 0 ) //user has not yet checked the 'I am not a robot' checkbox else //user is a verified human and you are good to submit your form now 
  2. Прежде чем вы отправите свою форму, вы можете позвонить:

     var isCaptchaValidated = false; var response = grecaptcha.getResponse(); if(response.length == 0) { isCaptchaValidated = false; toast('Please verify that you are a Human.'); } else { isCaptchaValidated = true; } if (isCaptchaValidated ) { //you can now submit your form } 
  3. Вы можете отобразить reCAPTCHA следующим образом:

     <div class="col s12 g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback='doSomething'></div> 

    А затем определите функцию в вашем JavaScript, которая также может быть использована для отправки вашей формы.

     function doSomething() { alert(1); } 

    Теперь, когда флажок (я не робот) проверен, вы получите обратный вызов к определенному doSomething вызову, который doSomething в вашем случае.

С точки зрения UX, это может помочь визуально сообщить пользователю, когда они смогут приступить к отправке формы – либо включив отключенную кнопку, либо просто нажав кнопку.

Вот простой пример …

 <form> <div class="g-recaptcha" data-sitekey="YOUR_PRIVATE_KEY" data-callback="recaptchaCallback"></div> <button type="submit" class="btn btn-default hidden" id="btnSubmit">Submit</button> </form> <script> function recaptchaCallback() { var btnSubmit = document.getElementById("btnSubmit"); if ( btnSubmit.classList.contains("hidden") ) { btnSubmit.classList.remove("hidden"); btnSubmitclassList.add("show"); } } </script> 

Попробуйте эту ссылку: https://github.com/google/ReCAPTCHA/tree/master/php

Ссылка на эту страницу размещена в самой нижней части этой страницы: https://developers.google.com/recaptcha/intro

Одна из проблем, с которой я столкнулся, помешала работе этих двух файлов, была связана с моим файлом php.ini для веб-сайта. Убедитесь, что это свойство настроено правильно, следующим образом: allow_url_fopen = On

при использовании Google recaptcha с recaptcha DLL-файлом, то мы можем проверить на C #

  RecaptchaControl1.Validate(); bool Varify = RecaptchaControl1.IsValid; if (Varify) { // Pice of code after validation. } 

Его работа для меня.

Вы можете сначала проверить на стороне интерфейса, что флажок отмечен:

  var recaptchaRes = grecaptcha.getResponse(); var message = ""; if(recaptchaRes.length == 0) { // You can return the message to user message = "Please complete the reCAPTCHA challenge!"; return false; } else { // Add reCAPTCHA response to the POST form.recaptchaRes = recaptchaRes; } 

И затем на стороне сервера проверьте полученный ответ с помощью API reCAPTCHA Google:

  $receivedRecaptcha = $_POST['recaptchaRes']; $verifiedRecaptcha = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret='.$google_secret.'&response='.$receivedRecaptcha); $verResponseData = json_decode($verifiedRecaptcha); if(!$verResponseData->success) { return "reCAPTCHA is not valid; Please try again!"; } 

Для получения дополнительной информации вы можете посетить документы Google .

 var googleResponse = $('#g-recaptcha-response').val(); if(googleResponse=='') { $("#texterr").html("<span>Please check reCaptcha to continue.</span>"); return false; }