Integrate Google reCAPTCHA v2 Tickbox on Client (JavaScript) & Server side (PHP)

Register reCaptcha & Get Keys

1. Goto Google reCaptcha and log in using your Gmail id.

2. Now you will see a Register a new site page to create a captcha.

3. Enter Label. (You can give any value here just to identify the captcha in the future.)

4. Select reCAPTCHA v2 under reCaptcha type.

5. Select “I’m not a robot” Checkbox under reCaptcha v2.

6. Type your domain name under Domains. (This restricts the use of reCaptcha out of your domain name, so no one can misuse your reCaptcha even if they know the key values. It also covers the subdomain so no need to enter the subdomain separately. Press Enter key or click plus icon to type more than one domain name.)

See: 10+ Most Common WordPress Mistakes to Avoid

7. Your primary email address must be the owner of the reCaptcha. If you want to have more than one owner, then you can the email address. If not, then skip this step.

8. Tick the Accept the reCAPTCHA Terms of Service box after reading the terms of use and service.

9. Optional. Tick the Send alerts to owners box if owners need to get alerted for any problems with the site.

10. Click Submit button.

11. If registered successfully, you will get a site key and secret key. (Site Key is used to server reCaptcha box to the users whereas secret key helps to validate the user’s response between your site and reCaptcha.)

12. Copy both the site key and secret key. We will use the keys while the integration.

Client Side Integration

The Client-side is nothing but frontend integration where users can interact with the reCaptcha. After client-side integration, users can see the reCaptcha and able to click I’m not a robot tickbox.

See: Setup Amazon CloudFront CDN WordPress using W3 Total Cache

1. Add the below element where you want to show the reCaptcha box. captcha_status element is optional for testing purposes to show the status. If you remove this captcha_status line then you have to remove it also from the JavaScript code.

2. Add the below JavaScript code inside the head tag. In the below code, we are capturing the user’s response and sending it to the PHP file for server validation. Once the validation is complete, we will get the response back from the PHP file and update the frontend screen with the results.

Change YOUR_SITE_KEY with your captcha site key.

Change https://spytm.local/captchaAPI.php with your PHP file name. We will create this PHP file in the server-side integration step.

Refer to Google’s official document for client-side integration.

Server Side Integration

Server-side integration is the actual validation process that validates the user’s captcha response with the Google reCaptcha server.

Create a PHP file and paste the below PHP code. In this code, we are getting the user’s response from javascript and validates that response with the Google reCaptcha server using the secret key and providing the response back to the javascript file.

See: Learn Traffic vs Backlinks

Replace YOUR_SECRET_KEY with your captcha secret key.

Refer to Google’s official document for Server-side integration.

captchaAPI.php