Requirements: - 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);
}
- Recaptcha Site Key And Secret (backend): Get Here
//Set site key as global variable
const g_site_key = 'YOUR_SITE_KEY';
- 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
