react-google-recaptcha3
React service for Google reCAPTCHA 3
See Demo
Installation
Run following command to install react-google-recaptcha3
npm i react-google-recaptcha3
How to use?
reCAPTCHA v3 introduces a new concept: actions. When you specify an action name in each place you execute reCAPTCHA you enable two new features:
- a detailed break-down of data for your top ten actions in the admin console
- adaptive risk analysis based on the context of the action (abusive behavior can vary) Importantly, when you verify the reCAPTCHA response you should also verify that the action name matches the one you expect.
Front
At first you need to import ReactRecaptcha3
to your component
import ReactRecaptcha3 from 'react-google-recaptcha3';
Pass your siteKey in useEffect
hook
useEffect(() => {
ReactRecaptcha3.init(YOUR_SITE_KEY)
}, [])
The init
function will return Promise with status
parameter that will indicate script loaded status
useEffect(() => {
ReactRecaptcha3.init(YOUR_SITE_KEY).then(status => {
// status: success/error
// success - script is loaded and greaptcha is ready
// error - script is not loaded
console.log(status)
})
}, [])
On form submit generate recaptcha token (it will be checked in backend) using siteKey
const handleSubmit = () => {
ReactRecaptcha3.getToken().then(token => {
console.log(token)
// send token with form data
// dataToSend.token = token
// fetch(url, { method: 'POST', body: JSON.stringify(dataToSend) })
}, error => {
// handle error here
console.log(error)
})
}
Execute getToken
with action name. See more here
ReactRecaptcha3.getToken({ action: 'homepage' })
Destroy recaptcha
ReactRecaptcha3.destroy()
Backend
In backend we need to verify given token using secretKey.
node.js example
const request = require('request-promise');
const secretKey = YOUR_RECAPTCHA_SECRET_KEY;
const userIp = 'USER_IP';
request.get(
{
url: `https://www.google.com/recaptcha/api/siteverify?secret=${secretKey}&response=${recaptchaToken}&remoteip=${userIp}`,
}).then((response) => {
// If response false return error message
if (response.success === false) {
return res.json({success: false, error: 'Recaptcha token validation failed'});
}
// otherwise continue handling/saving form data
next();
})
PHP example
$recaptchaToken = isset($_POST['recaptchaToken']) ? $_POST['recaptchaToken'] : false;
if(!$recaptchaToken) {
//Do something with error
}
$secretKey = YOUR_RECAPTCHA_SECRET_KEY;
$userIp = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$recaptchaToken."&remoteip=".$userIp);
if($response.success == false){
//Do something with error
} else {
// reCaptchaToken is valid you can continue with the rest of your code
}