Google Recaptcha v3 example demo

Question

Until now  I was working with Google Recaptcha v2  but now I want to update my WebApp using the lastest version  v3    Is it possible to anyone add a fully working Google Recaptcha v3 example for a basic form as I can t find any working demos of it   I d really appreciate it   Thank you very much   PS  I m using Java Servlets on the server side  but it doesn t matter if you explain using PHP or whatever

User · Accepted Answer

Simple code to implement ReCaptcha v3

The basic JS code

<script src="https://www.google.com/recaptcha/api.js?render=your reCAPTCHA site key here"></script>
<script>
    grecaptcha.ready(function() {
    // do request for recaptcha token
    // response is promise with passed token
        grecaptcha.execute('your reCAPTCHA site key here', {action:'validate_captcha'})
                  .then(function(token) {
            // add token value to form
            document.getElementById('g-recaptcha-response').value = token;
        });
    });
</script>

The basic HTML code

<form id="form_id" method="post" action="your_action.php">
    <input type="hidden" id="g-recaptcha-response" name="g-recaptcha-response">
    <input type="hidden" name="action" value="validate_captcha">
    .... your fields
</form>

The basic PHP code

if (isset($_POST['g-recaptcha-response'])) {
    $captcha = $_POST['g-recaptcha-response'];
} else {
    $captcha = false;
}

if (!$captcha) {
    //Do something with error
} else {
    $secret   = 'Your secret key here';
    $response = file_get_contents(
        "https://www.google.com/recaptcha/api/siteverify?secret=" . $secret . "&response=" . $captcha . "&remoteip=" . $_SERVER['REMOTE_ADDR']
    );
    // use json_decode to extract json response
    $response = json_decode($response);

    if ($response->success === false) {
        //Do something with error
    }
}

//... The Captcha is valid you can continue with the rest of your code
//... Add code to filter access using $response . score
if ($response->success==true && $response->score <= 0.5) {
    //Do something to denied access
}

You have to filter access using the value of $response.score. It can takes values from 0.0 to 1.0, where 1.0 means the best user interaction with your site and 0.0 the worst interaction (like a bot). You can see some examples of use in ReCaptcha documentation.

User · Answer

if you are newly implementing recaptcha on your site  I would suggest adding api js and let google collect behavioral data of your users 1-2 days  It is much fail-safe this way  especially before starting to use score

User · Answer

We use recaptcha-V3 only to see site traffic quality  and used it as non blocking  Since recaptcha-V3 doesn t require to show on site and can be used as hidden but you have to show recaptcha privacy etc links  as recommended     Script Tag in Head   lt script src  https   www google com recaptcha api js onload ReCaptchaCallbackV3 amp render  SITE KEY  async defer gt  lt  script gt    Note   async defer  make sure its non blocking which is our specific requirement  JS Code    lt script gt      ReCaptchaCallbackV3   function             grecaptcha ready function                 grecaptcha execute  SITE KEY   then function token                      ajax                       type   POST                       url   https   api   window appInfo siteDomain  v1 recaptcha score                       data                             token    token                                             success  function data                            if data response success                                window recaptchaScore   data response score                              console log  user score     data response score                                                                       error  function                             console log  error while getting google recaptcha score                                                                                   lt  script gt     HTML Css Code   there is no html code since our requirement is just to get score and don t want to show recaptcha badge    Backend - Laravel Code   Route   Route  post   recaptcha score    Api  ReCaptcha  RecaptchaScore index      Class   class RecaptchaScore extends Controller       public function index Request  request                 score   null            response    new Client   - gt request  post    https   www google com recaptcha api siteverify                  form params    gt                     response    gt   request- gt get  token                     secret    gt   SECRET HERE                                        score   json decode  response- gt getBody  - gt getContents    true            if    score  success                  Log  warning  Google ReCaptcha Score                      class    gt    CLASS                     message    gt  json encode  score  error-codes                                        return                response    gt   score                        we get back score and save in variable which we later user when submit form   Reference   https   developers google com recaptcha docs v3 https   developers google com recaptcha

User · Answer

I am assuming you have site key and secret in place  Follow this step   In your HTML file  add the script     lt script src  https   www google com recaptcha api js render put your site key here  gt  lt  script gt    Also  do use jQuery for easy event handling   Here is the simple form     lt form id  comment form  action  form php  method  post   gt         lt input type  email  name  email  placeholder  Type your email  size  40  gt  lt br gt  lt br gt         lt textarea name  comment  rows  8  cols  39  gt  lt  textarea gt  lt br gt  lt br gt         lt input type  submit  name  submit  value  Post comment  gt  lt br gt  lt br gt       lt  form gt    You need to initialize the Google recaptcha and listen for the ready event  Here is how to do that         lt script gt            when form is submit         comment form   submit function                we stoped it         event preventDefault            var email       email   val            var comment       comment   val               needs for recaptacha ready         grecaptcha ready function                    do request for recaptcha token                response is promise with passed token             grecaptcha execute  put your site key here    action   create comment    then function token                       add token to form                     comment form   prepend   lt input type  hidden  name  g-recaptcha-response  value      token      gt                       post  form php   email  email  comment  comment  token  token   function result                            console log result                           if result success                                    alert  Thanks for posting comment                              else                                   alert  You are spammer   Get the    K out                                                                                       lt  script gt    Here is the sample PHP file  You can use Servlet or Node or any backend language in place of it    lt  php           email  comment  captcha          if isset   POST  email                 email   POST  email             if isset   POST  comment                 comment   POST  comment             if isset   POST  token                 captcha   POST  token                        if   captcha             echo   lt h2 gt Please check the the captcha form  lt  h2 gt              exit                     secretKey    put your secret key here            ip     SERVER  REMOTE ADDR                post request to server           url     https   www google com recaptcha api siteverify secret     urlencode  secretKey       amp response     urlencode  captcha            response   file get contents  url            responseKeys   json decode  response true           header  Content-type  application json            if  responseKeys  success                      echo json encode array  success    gt   true               else                   echo json encode array  success    gt   false                 gt    Here is the tutorial link  https   codeforgeek com 2019 02 google-recaptcha-v3-tutorial   Hope it helps

User · Answer

I thought a fully-functioning reCaptcha v3 example demo in PHP  using a Bootstrap 4 form  might be useful to some  Reference the shown dependencies  swap in your email address and keys  create your own keys here   and the form is ready to test and use  I made code comments to better clarify the logic and also included commented-out console log and print r lines to quickly enable viewing the validation token and data generated from Google  The included jQuery function is optional  though it does create a much better user prompt experience in this demo   PHP file  mail php   Add secret key  2 places  and email address where noted   lt  php  if    SERVER  quot REQUEST METHOD quot       quot POST quot          BEGIN Setting reCaptcha v3 validation data    url    quot https   www google com recaptcha api siteverify quot      data          secret    gt   quot your-secret-key-here quot        response    gt    POST  token         remoteip    gt    SERVER  REMOTE ADDR            options   array       http    gt  array         header     gt   quot Content-type  application x-www-form-urlencoded r n quot          method     gt   POST          content    gt  http build query  data                      Creates and returns stream context with options supplied in options preset     context    stream context create  options       file get contents   is the preferred way to read the contents of a file into a string    response   file get contents  url  false   context       Takes a JSON encoded string and converts it into a PHP variable    res   json decode  response  true       END setting reCaptcha v3 validation data            print r  response      Post form OR output alert and bypass post if false  NOTE  score conditional is optional   since the successful score default is set at  gt   0 5 by Google  Some developers want to   be able to control score result conditions  so I included that in this example     if   res  success      true  amp  amp   res  score    gt   0 5            Recipient email      mail to    quot youremail domain com quot              Sender form data      subject   trim   POST  quot subject quot          name   str replace array  quot  r quot   quot  n quot   array  quot   quot   quot   quot     strip tags trim   POST  quot name quot            email   filter var trim   POST  quot email quot     FILTER SANITIZE EMAIL        phone   trim   POST  quot phone quot          message   trim   POST  quot message quot              if  empty  name  OR  filter var  email  FILTER VALIDATE EMAIL  OR empty  phone  OR empty  subject  OR empty  message             Set a 400  bad request  response code and exit       http response code 400         echo   lt p class  quot alert-warning quot  gt Please complete the form and try again  lt  p gt          exit               Mail content      content    quot Name   name n quot        content     quot Email   email n n quot        content     quot Phone   phone n quot        content     quot Message  n message n quot          Email headers      headers    quot From   name  lt  email gt  quot          Send the email      success   mail  mail to   subject   content   headers            if   success            Set a 200  okay  response code       http response code 200         echo   lt p class  quot alert alert-success quot  gt Thank You  Your message has been successfully sent  lt  p gt          else           Set a 500  internal server error  response code       http response code 500         echo   lt p class  quot alert alert-warning quot  gt Something went wrong  your message could not be sent  lt  p gt                  else        echo   lt div class  quot alert alert-danger quot  gt          Error  The security token has expired or you are a bot          lt  div gt             else       Not a POST request  set a 403  forbidden  response code   http response code 403     echo   lt p class  quot alert-warning quot  gt There was a problem with your submission  please try again  lt  p gt        gt    HTML  lt head gt  Bootstrap CSS dependency and reCaptcha client-side validation Place between  lt head gt  tags - paste your own site-key where noted   lt link rel  quot stylesheet quot  href  quot https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css quot  gt   lt script src  quot https   www google com recaptcha api js render your-site-key-here quot  gt  lt  script gt    HTML  lt body gt  Place between  lt body gt  tags   lt  -- contact form demo container -- gt   lt section style  quot margin  50px 20px  quot  gt     lt div style  quot max-width  768px  margin  auto  quot  gt            lt  -- contact form -- gt       lt div class  quot card quot  gt         lt h2 class  quot card-header quot  gt Contact Form lt  h2 gt         lt div class  quot card-body quot  gt           lt form class  quot contact form quot  method  quot post quot  action  quot mail php quot  gt              lt  -- form fields -- gt             lt div class  quot row quot  gt               lt div class  quot col-md-6 form-group quot  gt                 lt input name  quot name quot  type  quot text quot  class  quot form-control quot  placeholder  quot Name quot  required gt               lt  div gt               lt div class  quot col-md-6 form-group quot  gt                 lt input name  quot email quot  type  quot email quot  class  quot form-control quot  placeholder  quot Email quot  required gt               lt  div gt               lt div class  quot col-md-6 form-group quot  gt                 lt input name  quot phone quot  type  quot text quot  class  quot form-control quot  placeholder  quot Phone quot  required gt               lt  div gt               lt div class  quot col-md-6 form-group quot  gt                 lt input name  quot subject quot  type  quot text quot  class  quot form-control quot  placeholder  quot Subject quot  required gt               lt  div gt               lt div class  quot col-12 form-group quot  gt                 lt textarea name  quot message quot  class  quot form-control quot  rows  quot 5 quot  placeholder  quot Message quot  required gt  lt  textarea gt               lt  div gt                lt  -- form message prompt -- gt               lt div class  quot row quot  gt                 lt div class  quot col-12 quot  gt                   lt div class  quot contact msg quot  style  quot display  none quot  gt                     lt p gt Your message was sent  lt  p gt                   lt  div gt                 lt  div gt               lt  div gt                lt div class  quot col-12 quot  gt                 lt input type  quot submit quot  value  quot Submit Form quot  class  quot btn btn-success quot  name  quot post quot  gt               lt  div gt                lt  -- hidden reCaptcha token input -- gt               lt input type  quot hidden quot  id  quot token quot  name  quot token quot  gt             lt  div gt            lt  form gt         lt  div gt       lt  div gt      lt  div gt   lt  section gt   lt script gt    grecaptcha ready function         grecaptcha execute  your-site-key-here    action   homepage    then function token              console log token          document getElementById  quot token quot   value   token                 refresh token every minute to prevent expiration     setInterval function          grecaptcha execute  your-site-key-here    action   homepage    then function token            console log   refreshed token    token            document getElementById  quot token quot   value   token                   60000           lt  script gt    lt  -- References for the optional jQuery function to enhance end-user prompts -- gt   lt script src  quot https   code jquery com jquery-3 3 1 min js quot  gt  lt  script gt   lt script src  quot form js quot  gt  lt  script gt    Optional jQuery function for enhanced UX  form js    function        use strict    var form       contact form      message       contact msg      form data      Success function function done func response      message fadeIn     message html response     setTimeout function          message fadeOut         10000     form find  input not  type  quot submit quot     textarea   val            fail function function fail func data      message fadeIn     message html data responseText     setTimeout function          message fadeOut         10000      form submit function  e      e preventDefault      form data     this  serialize        ajax       type   POST       url  form attr  action        data  form data         done done func     fail fail func          jQuery

User · Answer

I process POST on PHP from an angular ajax call   I also like to see the SCORE from google  This works well for me     postData   json decode file get contents  php   input    true     get data sent via post  captcha    postData  g-recaptcha-response     header  Content-Type  application json    if  captcha                Do something with error     echo     quot status quot     quot bad quot    quot score quot     quot none quot       else        secret      your-secret-key        response   file get contents           quot https   www google com recaptcha api siteverify secret  quot     secret    quot  amp response  quot     captcha    quot  amp remoteip  quot      SERVER  REMOTE ADDR                 use json decode to extract json response      response   json decode  response        if   response- gt success     false              Do something with error         echo     quot status quot     quot bad quot    quot score quot     quot none quot          else if   response- gt success  true  amp  amp   response- gt score  lt   0 5            echo     quot status quot     quot bad quot    quot score quot     quot    response- gt score   quot          else           echo     quot status quot     quot ok quot    quot score quot     quot    response- gt score   quot              On HTML  lt input type  quot hidden quot  id  quot g-recaptcha-response quot  name  quot g-recaptcha-response quot  gt   On js  scope grabCaptchaV3 function        var params                          method   POST                        url   api recaptcha php                        headers                            Content-Type   undefined                                              data      g-recaptcha-response    myCaptcha                http params  then function result                    console log result data           function response                   console log response statusText

User · Answer

I have seen most of the articles that don t work properly that s why new developers and professional developers get confused about it   I am explaining to you in a very simple way  In this code  I am generating a google Recaptcha token at the client side at every 3 seconds of time interval because the token is valid for only a few minutes that s why if any user takes time to fill the form then it may be expired   First I have an index php file where I am going to write HTML and JavaScript code        lt  DOCTYPE html gt   lt html gt      lt head gt         lt title gt Google Recaptcha V3 lt  title gt      lt  head gt      lt body gt         lt h1 gt Google Recaptcha V3 lt  h1 gt         lt form action  recaptcha php  method  post  gt            lt label gt Name lt  label gt            lt input type  text  name  name  id  name  gt            lt input type  hidden  name  token  id  token    gt             lt input type  hidden  name  action  id  action    gt             lt input type  submit  name  submit  gt         lt  form gt         lt script src  https   www google com recaptcha api js render put your site key here  gt  lt  script gt         lt script  src  https   code jquery com jquery-3 4 1 min js  gt  lt  script gt         lt script type  text javascript  gt             document  ready function                setInterval function                grecaptcha ready function                     grecaptcha execute  put your site key here    action   application form    then function token                            token   val token                           action   val  application form                                                       3000                        lt  script gt      lt  body gt   lt  html gt    Next  I have created recaptcha php file to execute it at the server side   lt  php  if    POST  submit           name       POST  name         token      POST  token         action     POST  action          curlData   array           secret    gt   put your secret key here            response    gt   token              ch   curl init        curl setopt  ch  CURLOPT URL   https   www google com recaptcha api siteverify        curl setopt  ch  CURLOPT POST  1       curl setopt  ch  CURLOPT POSTFIELDS  http build query  curlData        curl setopt  ch  CURLOPT RETURNTRANSFER  true        curlResponse   curl exec  ch         captchaResponse   json decode  curlResponse  true        if   captchaResponse  success       1   amp  amp   captchaResponse  action       action  amp  amp   captchaResponse  score    gt   0 5  amp  amp   captchaResponse  hostname        SERVER  SERVER NAME              echo  Form Submitted Successfully         else           echo  You are not a human             Source of this code  If you would like to know the explanation of this code please visit  Google reCAPTCHA V3 integration in PHP

[servlets] Google Recaptcha v3 example demo

Examples related to servlets

Examples related to recaptcha

Examples related to recaptcha-v3