Hi developer,
If you are looking for a solution to protect web forms from spam and abuse then you are at right place.
Here are the two examples of google reCAPTCHA.
- Google reCAPTCHA v2 (“I’m not a robot” Checkbox)
- Google reCAPTCHA v3 (Powered by machine learning)
Before starting with an example you must register with reCAPTCHA keys here. On registration, it will generate two keys site key and the secret key.
reCAPTCHA v2 example
I am using two files here form.html and savedata.php to implement reCAPTCHA v2. The site key or a public key resides on your HTML form.
<!-- form.html html file which have form with a i'm not a robot captcha -->
<html>
<head>
<title>GOOGLE reCAPTCHA v2 example</title>
<script src="https://www.google.com/recaptcha/api.js" async defer>
</script>
</head>
<body>
<form action='savedata.php' method=post>
<div class="g-recaptcha" data-sitekey="_______SITE_KEY_______"></div>
<input type='text' id='myinput' name='myinput'/>
<input type='submit' name='submit'/>
</form>
</body>
</html>
And when the user clicks on submit button, savedata.php script will get executed.
<?php
// savedata.php is a server side script to handle captca
$secret_key= "_______SECRET_KEY_________";
$captcha_response = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify".
"?secret=$secret_key&response=$captcha_response");
$response = file_get_contents($url);
$json_response = json_decode($response);
if($json_response->success != true) {
echo "You must check captcha checkbox";
exit;
}
// your code go here.....
?>
Important things in implement v2
Must include below script tag in HTML file.
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
Also not to forget div element with class g-recaptcha and site key within a form tag.
<div class="g-recaptcha" data-sitekey="_______SITE_KEY_______"></div>
Must include secret_key on server-side script
$secret_key= "_______SECRET_KEY_________";
If file_get_contents function does not work then you can use CURL.
$response = file_get_contents($url);
If it didn’t work try to var_dump or print $json_response to see the captcha error.
$json_response = json_decode($response); echo $json_response;
reCAPTCHA v3 example
reCAPTCHA v3 returns a score for each request without user friction. And you don’t see I’m not a robot checkbox here. It is powered by machine learning and returns a score 1.0 is very likely a good interaction, 0.0 is very likely a bot. The registration process is the same as v2. You get two keys site key and a secret key from the admin console.
<!-- form.html html file which have form with a v3 captcha -->
<html>
<head>
<title>GOOGLE reCAPTCHA v3 example</title>
<script src="https://www.google.com/recaptcha/api.js?render=___SITE_KEY___"></script>
</head>
<body>
<form action='savedata.php' method=post>
<input type='hidden' id='g-recaptcha-response' name="g-recaptcha-response" />
<input type='text' id='myinput' name='myinput'/>
<input type='submit' name='submit'/>
</form>
<script>
grecaptcha.ready(function() {
grecaptcha.execute('_SITE_KEY_', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value = token;
});
</script>
</body>
</html>
and on server-side to handle captcha v3 request
<?php
// savedata.php is a server side script to handle v3 captca
$secret_key= "_______SECRET_KEY_________";
$captcha_response = $_POST['g-recaptcha-response'];
$url = "https://www.google.com/recaptcha/api/siteverify".
"?secret=$secret_key&response={$captcha_response}");
$response = file_get_contents($url);
$json_response = json_decode($response);
if( !($json_response->success != true && json_response->score >= 0.5)) {
echo "You are robot...";
exit;
}
// your code go here.....
?>
In the above code, you call recaptcha API with SITE_KEY.
<script src="https://www.google.com/recaptcha/api.js?render=___SITE_KEY___"></script>
“g-recaptcha-response” hidden field must include in the form.
<input type='hidden' id='g-recaptcha-response' name="g-recaptcha-response" />
Make a request to verify the response token by calling in your HTML file
<script>
grecaptcha.ready(function() {
grecaptcha.execute('_SITE_KEY_', {action: 'homepage'}).then(function(token) {
document.getElementById('g-recaptcha-response').value = token;
});
</script>
On server-side secret key must be mentioned and if didn’t work then print the json_response to see the captcha error.
If still face doubt then please visit google reCAPTCHA docs or you can leave a message.
