[JS] Google Recaptcha V3 Complete Code

Requirements:

1. jQuery (if not it will automated added into pages)

if (typeof jQuery == 'undefined' || !window.jQuery) {
  var hs = document.createElement('script');
  hs.type = 'text/javascript';
  hs.async = true;
  hs.src = 'https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js';
  document.getElementsByTagName('head')[0].appendChild(hs);
  document.getElementsByTagName('body')[0].appendChild(hs);
  document.head.appendChild(hs);
  document.body.appendChild(hs);
}

2. Recaptcha Site Key And Secret (backend): Get Here

//Set site key as global variable
const g_site_key = 'YOUR_SITE_KEY';

3. Main Code

//loader
(function () {
  submitDisable();
  download_script(
    "https://www.google.com/recaptcha/api.js?render=" +
      g_site_key +
      "&render=explicit",
    function () {
      grecaptcha.ready(function () {
        gexec();
      });
    },
  );
})();
//function callback
function gexec() {
  //also refresh function
  grecaptcha.execute(g_site_key, { action: "homepage" }).then(function (token) {
    recaptcha_insert_token(token); //insert element token into form
  });
}
//function add recaptcha elements
function recaptcha_insert_token(token) {
  if (typeof jQuery == "undefined") {
    console.log("JQuery Not Loaded");
  } else {
    var f = $("form"),
      fg = f.find('[name="g-recaptcha-response"]');
    if (fg.length === 0) {
      $(
        '<input type="hidden" readonly value="' +
          token +
          '" name="g-recaptcha-response">',
      ).appendTo(f);
    } else {
      fg.val(token);
    }
  }
}

Complete Code

HTML

<!--button refresh token (example)-->
<button class="btn-block btn" onclick="gexec()">Refresh</button>

Javascript

//load jQuery if not exists (automated)
if (typeof jQuery == "undefined" || !window.jQuery) {
  var hs = document.createElement("script");
  hs.type = "text/javascript";
  hs.async = true;
  hs.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js";
  document.getElementsByTagName("head")[0].appendChild(hs);
  document.getElementsByTagName("body")[0].appendChild(hs);
  document.head.appendChild(hs);
  document.body.appendChild(hs);
}
//set site key
const g_site_key = "YOUR_SITE_KEY";
//loader
(function () {
  submitDisable();
  download_script(
    "https://www.google.com/recaptcha/api.js?render=" +
      g_site_key +
      "&render=explicit",
    function () {
      grecaptcha.ready(function () {
        gexec();
      });
    },
  );
})();
//function callback
function gexec() {
  //also refresh function
  grecaptcha.execute(g_site_key, { action: "homepage" }).then(function (token) {
    recaptcha_insert_token(token); //insert element token into form
  });
}
//function add recaptcha elements
function recaptcha_insert_token(token) {
  if (typeof jQuery == "undefined") {
    console.log("JQuery Not Loaded");
  } else {
    var f = $("form"),
      fg = f.find('[name="g-recaptcha-response"]');
    if (fg.length === 0) {
      $(
        '<input type="hidden" readonly value="' +
          token +
          '" name="g-recaptcha-response">',
      ).appendTo(f);
    } else {
      fg.val(token);
    }
  }
}

PHP (backend)

<?php
function recaptcha_verify($secret)
{
    if (isset($_POST["g-recaptcha-response"])) {
        $response = $_POST["g-recaptcha-response"];
        $remoteip = $this->getUIP();
        $secret = $this->recaptcha_s;
        $g_response = json_decode(
            file_get_contents(
                "https://www.google.com/recaptcha/api/siteverify?secret=" .
                    $secret .
                    "&response=" .
                    $response .
                    "&remoteip=" .
                    $remoteip
            ),
            true
        );
        if (isset($g_response["success"]) && true === $g_response["success"]) {
            return true;
        } else {
            return false;
        }
    }
}

if (isset($_POST["login"])) {
    //example if you have post named login
    if (recaptcha_verify("YOUR_SECRET_KEY_HERE") !== false) {
        /* Recaptcha Success */
    } else {
        /* Recaptcha Failed */
    }
}

Google ReCaptcha V3 Full Example at Codepen

See the Pen Complete Google recaptcha v3 by dimas lanjaka (@dimaslanjaka) on CodePen.