PHP Tutorial: How To Implement A Captcha (“I’m Not A Robot” Checkbox) Using Google

Steve Sohcot
4 min readNov 29, 2023

--

Image from Redbubble

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”.

Click the “+” to create a new captcha entry

You have to choose between “Enterprise” and “Classic”. For me, “Enterprise” was there by default.

Clicking the link on the right will toggle the version. It probably doesn’t matter which one you pick.

I stuck with Enterprise, so the form looked like below:

Google reCAPTCHA — Enterprise version

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)

💡Tip: put in multiple domains for the various environments

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”)
Your version won’t have orange bars

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:

Any suggestions for a better way to show code *changes* on Medium.com ?

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.

“ERROR for site owner: Invalid site key” caused by not specifying the right domain in the setup

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”).

“g-recaptcha-response” was something Google automatically generated

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:

What will be displayed from the sample code. Of course this would normally be commented-out and the user proceeds

Otherwise, stop.

What’s displayed upon error. No, I don’t pretty-it-up for the robots.

An Alternative (Something Easier)

I searched for “I want something easier” and this is what came up. Image from Pinterest.

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.

--

--

No responses yet