Google Recaptcha V3 Complete Code Requirements jQuery if not it will automated added into pages if typeof jQuery == undefined window.jQuery
programming
javascript
,
php
,
html
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 */
}
}