Introduction
Recently I was tasked with the challenge of implementing Google's ReCaptcha verification system to our website. Turns out, it's not that hard to do!
In this tutorial, I will cover:
- How to get a siteKey/secretKey for your website.
- How to add ReCaptcha V2 (The checkbox version) to your project, alongside a user signup form.
I've already created an example project that you can follow along with here.
For those that just want to check out the final code, you can find it within the FormEnd
file.
Creating your keys
Before we can start working with reCaptcha we need to get our siteKey and secretKey pair. This key determines what version of reCaptcha can be used, what variant if applicable, and what domains are valid.
Go ahead and click here to create your key-pair.
You will be asked to sign in to your google account, afterward you will be taken to the admin console. If you get redirected after signing it just re-click the link above.
Once you find yourself on the registration page you can start filling out the form. It's fairly straightforward, I'll also go through each step if you'd like to follow along.
Key-Pair steps
Label
This is just a name for you to recognize what the keypair is for. You can name it whatever you like.
I'll call mine recaptcha-example.
Type
This refers to the type of reCaptcha. V3 is a hidden form of verification. This tutorial will cover the checkbox verification so here I will select V2.
ReCaptcha V2 has three variants. We will select the "I'm not a Robot" setting.
Domains
Here is where you will set which domains will work with your reCaptcha. You can use any valid domain name. If you are running your example locally can add localhost
to the list, then press the +
to add it.
Owners
You will be an owner by default, you can also add any other individuals that can update or change the reCaptcha.
Finishing up
Now just check the "Terms of Service" box and decide whether you want to receive notifications about incorrect configurations, or unusual activity with the reCaptcha.
Now click Submit
and you should now be able to see your site key and secret Keys. Go ahead and add these to your .env
file. We'll use the names REACT_APP_SITE_KEY
and REACT_APP_SECRET_KEY
for the example.
You also have the ability to view the analytics for your reCaptcha token usage. It can show how often it's used, and how many rejections occur.
Adding ReCaptcha to the App
Here, we will use react-google-recaptcha
to render our reCaptcha checkbox. It provides a bunch of useful props and handles a lot of the more complicated settings. You'll need to install react-google-recaptcha. This package makes working with the V2 reCaptcha extremely easy!
Within your terminal type yarn add react-google-recaptcha
to add the package. After installation just head over to the FormStart.jsx
file and import it.
import ReCaptchaV2 from 'react-google-recaptcha'
Now we'll add the component to the form, right before the submit button. We'll also need to add the siteKey in order for it to work properly.
<ReCaptchaV2 sitekey={process.env.REACT_APP_SITE_KEY} />
Congrats! You've added reCaptcha to the app!
You should be able to see the reCaptcha checkbox now if you run the application. Checking the box should either verify or ask you to pass the challenge.
We have the verification now, but what else do we need to get the form working?
- We need to get the token from the reCaptcha component and add it to the form.
- We should remove the token if the reCaptcha expires.
Getting the token
We need to create a new function to receive the reCaptcha token using the components onChange
handler. This function will look very similar to how we update the other form inputs.
const handleToken = (token) => {
setForm((currentForm) => {
return {...currentForm, token }
})
}
Easy enough, now we need a function to remove the token from the form
.
const handleExpire = () => {
setForm((currentForm) => {
return {...currentForm, token: null }
})
}
Awesome! With both functions created we can now add them to the reCaptcha component.
<ReCaptchaV2
sitekey={process.env.REACT_APP_SITE_KEY}
onChange={handleToken}
onExpire={handleExpire}
/>
The ReCaptcha component is now set up, and the token should be submitted along with the other form params. All that's left is for us to verify the token for authenticity.
Verifying the token
Verifying a ReCaptcha token requires a server and is beyond the scope of this tutorial. You can check out the ReCaptcha docs for information on how to verify it. It's fairly straight forward. You just need to make a request to the google API that contains the secret key, and the ReCaptcha token that was generated from the checkbox.
Top comments (2)
Thank you for this! Quick note the "onExpire" property should now be called "onExpired": github.com/dozoisch/react-google-r...
How to change the text I'm not a robot here?