[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 */
      	}
      }
  

Full Example at Codepen

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

About Author:

My Name Is Dimas Lanjaka. I started studying in the world of programming starting from 2011. In this Website I will share the tools to manage the websites that you have.

Let's Get Connected: Twitter | Facebook | Google Plus | WMI

Secret Network Forces

Agus Ma'arif

Recruited From 2017 2017 As Moderator

Powered By Web Development Indonesia

Subscribe to receive free email updates: