reCaptcha

reCAPTCHA 2 (My recommend)

reCAPTCHA 2 visible: It shows a checkbox. If need shows image verification on check. Following code is for server side validation not client side. reCaptcha

HTML and JavaScript

<html>
<head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="?" method="POST">
    <div class="g-recaptcha" data-sitekey="your_site_key"></div>
    <input type="submit" value="Submit">
</form>
</body>
</html>

PHP validation

div for cliend side adds a g-recaptcha-response field
Send a call to the api reuqest using file_get_contents
It returns a object with success property true or false

$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=". $yoursecret."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$googleobj = json_decode($response);
$verified = $googleobj->success;
if ($verified === true){
    //do stuff
}

reCaptcha 2 in react

Installation from: react-google-recaptcha

Add following code to html:

<div>
	<ReCAPTCHA sitekey="6LdTD1cnAAAAAK3Qm2TdrpnkgAXRP4NcA__8LHBr" onChange={ captchaOnChange } />
	{ctx.captchaError ? <div className="invalid-feedback">{ctx.captchaError}</div> : null}
</div>

and

import ReCAPTCHA from "react-google-recaptcha";

and

const captchaOnChange = (val: unknown): void => {
	if (val && val !== null) {
		ctx.setCaptchaOk(true);
	}
};

Add in ErrorStates of Context.tsx:

captchaError: string;
setCaptchaError: Dispatch<SetStateAction<string>>;

Add in ContextProps of Context.tsx:

captchaOk: boolean;
setCaptchaOk: Dispatch<SetStateAction<boolean>>;

Add in Provider of Context.tsx:

const [captchaOk, setCaptchaOk] = useState<boolean>(false);
//Error
const [captchaError, setCaptchaError] = useState<string>('');

Add in value of Context.Provider of Context.tsx

captchaOk,
setCaptchaOk,

captchaError,
setCaptchaError,

Add in Submit.tsx

if (!ctx.captchaOk) {
	ctx.setCaptchaError('Invalid captcha. Please try again.');
	formValid = false;
}

reCAPTCHA 3

Follow the steps below for recaptcha 3:

Login to google/gmail
https://www.google.com/recaptcha/intro/v3.html > my reCATPCHA > reCAPTCHA v3
Now follow step 1 and step 2
In client side follow step 1.

Server side follow step2 and the following code:

<?php
$email = $_POST['email'];
$curl = curl_init();curl_setopt_array($curl, [
CURLOPT_RETURNTRANSFER => 1,
CURLOPT_URL =>'https://www.google.com/recaptcha/api/siteverify',
CURL_POST => 1,
CURLOPT_POSTFIELDS => [
'secret' => 'write_you_secret_key_here',
'response' => $_POST['g_recaptcha-response'];
],
]);

$response = json_decode(url_exec($curl));
if(!$response->success) {
//Redirect with error; write your code
}
// Register your user

Video links tutorial to include reCaptcha in your website:
https://youtu.be/XjN0j4JQqVI
https://youtu.be/oC5nT2kKYr8

Labels: reCaptcha, Web development

✏️ Edit This Post