How to Validate Google reCaptcha on Form Submit

Question

Recently  Google completely overhauled their reCaptcha API and simplified it to a single checkbox     The problem is  I can submit a form with the reCaptcha included without checking it and the form will ignore the reCaptcha   Before you had to send the form to a PHP file with the private key et al  but I m not seeing any mention of that in their Developer s Guide  I have no idea how to validate the form to be sure the new reCaptcha was filled by the user   Am I missing something  Is that PHP file with the private key still required   All I have for the reCaptcha so far is    lt div data-type  image  class  g-recaptcha  data-sitekey  My Public Key  gt  lt  div gt

User · Answer

From a UX perspective  it can help to visibly let the user know when they can proceed to submit the form - either by enabling a disabled button  or simply making the button visible   Here s a simple example      lt form gt       lt div class  g-recaptcha  data-sitekey  YOUR PRIVATE KEY  data-callback  recaptchaCallback  gt  lt  div gt       lt button type  submit  class  btn btn-default hidden  id  btnSubmit  gt Submit lt  button gt   lt  form gt    lt script gt      function recaptchaCallback             var btnSubmit   document getElementById  btnSubmit             if   btnSubmit classList contains  hidden                   btnSubmit classList remove  hidden                btnSubmitclassList add  show                     lt  script gt

User · Answer

Try this link  https   github com google ReCAPTCHA tree master php  A link to that page is posted at the very bottom of this page  https   developers google com recaptcha intro  One issue I came up with that prevented these two files from working correctly was with my php ini file for the website  Make sure this property is setup properly  as follows  allow url fopen   On

User · Answer

You can first verify in the frontend side that the checkbox is marked       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          And then in the server side verify the received response using Google reCAPTCHA API        receivedRecaptcha     POST  recaptchaRes         verifiedRecaptcha   file get contents  https   www google com recaptcha api siteverify secret    google secret   amp response    receivedRecaptcha         verResponseData   json decode  verifiedRecaptcha        if   verResponseData- gt success                return  reCAPTCHA is not valid  Please try again            For more info you can visit Google docs

User · Answer

validate  receivedRecaptcha     POST  recaptchaRes     google secret     Yoursecretgooglepapikey    verifiedRecaptchaUrl    https   www google com recaptcha api siteverify secret    google secret   amp response    receivedRecaptcha   handle   curl init  verifiedRecaptchaUrl   curl setopt  handle   CURLOPT RETURNTRANSFER  TRUE   curl setopt  handle  CURLOPT SSL VERIFYPEER  false      not safe but works   curl setopt  handle  CURLOPT CAINFO     my cert pem       safe  response   curl exec  handle    httpCode   curl getinfo  handle  CURLINFO HTTP CODE   curl close  handle   if   httpCode  gt   200  amp  amp   httpCode  lt  300      if  strlen  response   gt  0             responseobj   json decode  response           if   responseobj- gt success                echo  reCAPTCHA is not valid  Please try again                          else               echo  reCAPTCHA is valid                      else     echo  curl failed  http code is    httpCode

User · Answer

Verify Google reCapcha is valid or not after form submit  if   post  g-recaptcha-response             captcha    post  g-recaptcha-response           secretKey    type here private key          response   file get contents  https   www google com recaptcha api siteverify secret      secretKey     amp response      captcha            responseKeys   json decode  response  true           if  intval  responseKeys  success        1                return  failed             else               return  success                       else           return  failed

User · Answer

when using JavaScript it will work for me   x000D   x000D   lt script src  https   www google com recaptcha api js  gt  lt  script gt  x000D   lt script gt  x000D  function submitUserForm     x000D      var response   grecaptcha getResponse    x000D      if response length    0    x000D          document getElementById  g-recaptcha-error   innerHTML     lt span style  color red   gt This field is required  lt  span gt    x000D          return false  x000D        x000D      return true  x000D    x000D    x000D  function verifyCaptcha     x000D      document getElementById  g-recaptcha-error   innerHTML       x000D    x000D   lt  script gt  x000D   lt form method  post  onsubmit  return submitUserForm     gt  x000D       lt div class  g-recaptcha  data-sitekey  YOUR SITE KEY  data-callback  verifyCaptcha  gt  lt  div gt  x000D       lt div id  g-recaptcha-error  gt  lt  div gt  x000D       lt input type  submit  name  submit  value  Submit    gt  x000D   lt  form gt  x000D   x000D   x000D

User · Answer

var googleResponse       g-recaptcha-response   val     if googleResponse                   texterr   html   lt span gt Please check reCaptcha to continue  lt  span gt          return false

User · Answer

You can verify the response in 3 ways as per the Google reCAPTCHA documentation    g-recaptcha-response  Once user checks the checkbox  I am not a robot   a field with id g-recaptcha-response gets populated in your HTML  You can now use the value of this field to know if the user is a bot or not  using the below mentioed lines -  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  Before you are about to submit your form  you can make a call as follows -  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    You can display your reCAPTCHA as follows -   lt div class  col s12 g-recaptcha  data-sitekey  YOUR PRIVATE KEY  data-callback  doSomething  gt  lt  div gt    And then define the function in your JavaScript   which can also be used to submit your form   function doSomething     alert 1       Now  once the checkbox  I am not a robot  is checked  you will get a callback to the defined callback  which is doSomething in your case

User · Answer

var googleResponse   jQuery   g-recaptcha-response   val    if   googleResponse            lt p style  color red  important  class error-captcha  gt  lt span class  glyphicon glyphicon-remove    gt  lt  span gt  Please fill up the captcha  lt  p gt      insertAfter   html element        return false    else                   return true      Put this in a function  Call this function on submit     html element is my empty div

User · Answer

While using Google reCaptcha with reCaptcha DLL file  we can validate it in C  as follows    RecaptchaControl1 Validate            bool  Varify   RecaptchaControl1 IsValid          if   Varify               Pice of code after validation     Its works for me

User · Answer

If you want to check if the User clicked on the I m not a robot checkbox  you can use the  getResponse   function provided by the reCaptcha API   It will return an empty string in case the User did not validate himself  something like this   if  grecaptcha getResponse               alert  You can t proceed       else       alert  Thank you        In case the User has validated himself  the response will be a very long string   More about the API can be found on this page  reCaptcha Javascript API

User · Answer

One issue I came up with that prevented these two files from working correctly was with my php ini file for the website  Make sure this property is properly set  as follows  allow url fopen

[php] How to Validate Google reCaptcha on Form Submit

Examples related to php

Examples related to html

Examples related to recaptcha