PHP Tutorial: How To Implement A Captcha (“I’m Not A Robot” Checkbox) Using Google
I recently made a site that somehow got popular enough for spammers to flood it with fake users.
The solution was to put in one of those “I’m not a robot” checkboxes. Here’s how to do it in PHP, using a service that Google provides.
The Setup
Go to the Google reCAPTCHA site and then to the Admin Console.
At the time of writing, the latest is version 3
At the top right is a plus sign for “Create”.
You have to choose between “Enterprise” and “Classic”. For me, “Enterprise” was there by default.
I stuck with Enterprise, so the form looked like below:
Fill Out The Form
Label: the easy one
Specify a name, used incase you make multiple apps that need this.
Type: the first real decision
You need to choose between a “Score” (version 3) and “Challenge” (version 2). Hovering over the “i” icon wasn’t clear enough for me, so I went to the page it suggested that explained reCAPTCHA type differences.
Version 3 can somehow auto-detect if there needs to be a human “test,” but I liked the idea of forcing the checkbox to appear.
I went with Version 2, then opted for the simple checkbox (rather than the “find all the stoplights” type.
Domains: think ahead
Specify your domain(s)
Then hit the “Submit” button.
I have keys, now what?
Upon submission, you’ll get 2 keys:
- Site Key (aka “public”)
- Secret Key (aka “private”)
Of course you can visit the links for client side integration and server side integration but that’s why you’re here 👅
Implementation: Writing The Code
Step 1 of 2: JavaScript (“Client Side”)
Let’s suppose your form looks like this:
With this code:
Add in these (3) things:
- DIV where the checkbox widget will appear
- JavaScript that allows checkbox widget to work
- JavaScript that actually displays it (using your Site Key)
Specifically here’s what was added:
Edit: You could output the Site Key in PHP if you’re using something like constants / global / environment variables (see next section)
Now you have this:
Problems?
If you get “ERROR for site owner: invalid site key” make sure you specified the right domain(s) in the original setup. Or maybe you pasted the wrong key in.
Step 2 of 2: PHP (“Server Side”)
When the form is submitted, you can see that Google automatically added in a parameter (“g-recaptcha-response”).
In the controller where you would Sign Up / Register the user, first get this value.
Set a variable that will contain a new URL, going to Google’s recaptcha site, that combines the public (aka “site”) and private (aka “secret”) keys (Line 14 below).
On Google’s side, it’ll match up the Site (public) and Secret (private) keys to determine if it’s a legitimate attempt.
If the JSON response is true, then you’re good to go:
Otherwise, stop.
An Alternative (Something Easier)
In the past, I’ve also done a simple math problem (ex. “What’s 3 + 4?”) and would check server-side if the expected value the user put in matched the hard-coded answer.
That’s obviously easier, but I think it’s more common for a user to see/click the “I’m not a robot” checkbox.