Installing reCaptcha on your site

Installing reCaptcha on your site

Introduction

Actually, what is recaptcha and what is it for? It is a special system designed to protect websites from bots. The essence of the system is as follows – when sending any data from the form, you must check the box (which the bot is not able to do), otherwise you will not be able to send it. It is this behavior of the button that we will describe today.

Create recaptcha

To create a recaptcha, you need to go to the google recaptcha site, log in with your google account and do the following (you can see the details in the video):

  1. Enter the name of the captcha in the field Label
  2. Select recaptcha version v3
  3. Enter your domain, for example test.site
  4. Agree with terms of use
  5. Click send

As a result, you will get site key and The secret keywhich we will need later.

Writing PHP Code

So, we will create a form in the index.php file, by clicking on “submit” it will check whether you are a bot or not

<form action="#" method="post">
<input type="text" name="name" placeholder="Введите имя">
<input type="email" name="email" placeholder="Введите email">
<input type="hidden" id="token" name="token">
<button type="submit" name="post">Отправить</button>
</form>

And here, besides the usual fields, there is a hidden field – token, which will help us in our future work.

Next, go to the official recaptcha documentation and see an example. We need to connect the script by passing our site-key

<script src="https://www.google.com/recaptcha/api.js?render=ВАШ_КЛЮЧ"></script>

Next, we need to create a send.php file, which is also a send and captcha handler.


$captcha;
if(isset($_POST['token'])){
$captcha=$_POST['token'];
}

$secretKey = "";
$ip = $_SERVER['REMOTE_ADDR'];

// post request to server

$url = 'https://www.google.com/recaptcha/api/siteverify?secret=" . $secretKey . "&response=" . $_POST["token'];
$response = file_get_contents($url);
$responseKeys = json_decode($response,true);
header('Content-type: application/json');
if($responseKeys["success"] && $responseKeys["score"] >= 0.5) {
echo json_encode(array('success' => 'true', 'om_score' => $responseKeys["score"], 'token' => $_POST['token']));
} else {
echo json_encode(array('success' => 'false', 'om_score' => $responseKeys["score"], 'token' => $_POST['token']));
}

The code is simple enough. We are looking for a token from our hidden input, we write it to a variable $captcha… Next, we make a variable for the secret key.

Well, then we will simply check the parameter according to the captcha rules om_score… If it is greater than 0.5, you are not a bot. If less – a bot. For more details, see the video.

Well, the next step is the js-handler for the form in the index.php file

Writing JS code

document.querySelector('form').addEventListener('submit', (e) => {
e.preventDefault();
let tk = '';
grecaptcha.ready(function() {
grecaptcha.execute('', {action: 'homepage'}).then(function(token) {
tk = token;
document.getElementById('token').value = token;
const data = new URLSearchParams();
for (const pair of new FormData(document.querySelector('form'))) {
data.append(pair[0], pair[1]);
}
fetch('send.php', {
method: 'post',
body: data,
})
.then(response => response.json())
.then(result => {
if (result['om_score'] >= 0.5) {
console.log('Человек')
// отправка данных на почту
} else {
console.log('Бот')
}
});
});
});
});

In fact, this is a normal fetch request that flies to send.php and sends back the value om_score, thanks to which we can understand whether the bot is writing to us or not. And if not a bot, submit the form.

That’s all. You can use a separate handler to submit the form, it is not so important here.

And of course, the source code is also there, they are below. Use it!

Leave a Reply

Your email address will not be published. Required fields are marked *