For a captcha on a contact form I used the reCaptcha v3 with the Google library.
index.php
|
+- [phpmailer]
| +- mailer.php
|
+- [recaptcha-v3]
| +- [ReCaptcha] = library folder https://github.com/google/recaptcha
| +- autoload.php & recaptcha-v3-request.js & recaptcha-v3-verify.php
"index.php"
<body>
<form id="contactform" method="post" action="phpmailer/mailer.php">
<input type="hidden" id="grecdata" name="grecdata" value="">
<input type="text" id="yourname" name="yourname" value="">
<input type="submit" id="sendform" name="sendform" value="Send">
</form>
<script src="recaptcha-v3/recaptcha-v3-request.js"></script>
</body>
"autoload.php"
<?php
spl_autoload_register(function ($class) {
// Exit if class is not under "ReCaptcha" namespace
if (substr($class, 0, 10) !== 'ReCaptcha\\') {
return;
}
// Load $class.php from the current directory
$class = str_replace('\\', '/', $class);
$path = dirname(__FILE__).'/'.$class.'.php';
if (is_readable($path)) {
require_once $path;
return;
}
});
"recaptcha-v3-request.js"
// CONFIG: id of the <form id="..."> element, example: "contactform"
var gFormID = "contactform";
// CONFIG: reCaptcha v3 sitekey, see https://www.google.com/recaptcha
var gSiteKey = "HERE_YOUR_SITEKEY";
// CONFIG: reCaptcha v3 action, example: "myshop/contact"
var gAction = "mysite/contact";
// CONFIG: url of your verify file, example: "https://www.example.com/recaptcha-v3/recaptcha-v3-verify.php"
var gVerify = "recaptcha-v3/recaptcha-v3-verify.php";
// reCaptcha API
var gScript = document.createElement("script");
gScript.type = "text/javascript";
gScript.src = "https://www.google.com/recaptcha/api.js?render=" + gSiteKey;
document.getElementsByTagName('head')[0].appendChild(gScript);
// execute on form.submit
var gForm = document.getElementById(gFormID);
gForm.addEventListener("submit", function(event) {
event.preventDefault()
grecaptcha.ready(function() {
grecaptcha.execute(gSiteKey, {action: gAction}).then(function(token) {
fetch(gVerify+'?action='+gAction+'&token='+token).then(function(response) {
response.json().then(function(data) {
console.log(data);
gForm.grecdata.value = String(data.success+','+data.hostname+',' + data.challenge_ts + ',' + data.score + ',' + data.action + ',');
gForm.submit();
});
});
});
});
});
"recaptcha-v3-verify.php"
<?php
// CONFIG: reCaptcha v3 secret key
$secret = "HERE_YOUR_SECRET_KEY";
// CONFIG: reCaptcha v3 treshold (set between 0.0 [bot] and 1.0 [human])
$treshold = 0.6;
if (isset($_GET['action']) && !empty($_GET['action']) && isset($_GET['token']) && !empty($_GET['token'])) {
// Register ReCaptcha\Foo classes as autoload
require_once __DIR__ . '/autoload.php';
// API endpoint: accept token, verify it, return result to page
$recaptcha = new \ReCaptcha\ReCaptcha($secret);
$resp = $recaptcha->setExpectedHostname($_SERVER['SERVER_NAME'])
->setExpectedAction($_GET['action'])
->setScoreThreshold($treshold)
->verify($_GET['token'], $_SERVER['REMOTE_ADDR']);
header('Content-type:application/json');
echo json_encode($resp->toArray());
}
"mailer.php" (response for validation)
<body>
<?php
if (isset($_POST["yourname"]) && !empty($_POST["yourname"])) {
echo $_POST["yourname"] . "<br>";
}
if (isset($_POST["grecdata"]) && !empty($_POST["grecdata"])) {
$arr = explode(",", $_POST["grecdata"]);
if ($arr[0] == "true") {
echo "<br>success = " . $arr[0];
echo "<br>hostname = " . $arr[1];
echo "<br>challenge_ts = " . $arr[2];
echo "<br>score = " . $arr[3];
echo "<br>action = " . $arr[4];
}
}
?>
</body>
My question: It seems that it is not full cross-browser. In Chrome and Edge this works fine, but in Internet Explorer 11 the form is not submitted. Any suggestions?
Thanx in advance. Ronald
