[JS] Google Recaptcha V3 Complete Code

grecaptcha
Requirements:
  1. jQuery (if not it will automated added into pages) 
  2.       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);
          }
        
  3. Recaptcha Site Key And Secret (backend): Get Here
  4.     //Set site key as global variable
        const g_site_key = 'YOUR_SITE_KEY';
        
  5. Main Code:
  6.         //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.

Subscribe to receive free email updates:

0 Response to "[JS] Google Recaptcha V3 Complete Code"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.