Table of Contents
Introduction
In this post I am going to describe the steps you can apply in order to install and configure google captcha on your website.
Install and Configure Google ReCaptcha
You need to have a google account in order to use Google ReCaptcha. Create an account if you don’t have one. And, after you’re done with registering your google account follow the below steps.
Step 1: Login into a google account
Step 2: Click on the below link or copy-paste it into a new browser tab
https://www.google.com/recaptcha/admin
Step 3: On the webpage https://www.google.com/recaptcha/admin, you will have to register your website.
Please see the below image for clarification.
Click on the ‘+’ icon and enter your website details.
Now, you will need to enter a label/title, select captcha type (select v3 or v2) and enter your domain name, accept terms, and notification and click on submit button to proceed.
As soon as all details are validated, you will get the “site” key for the client end and the “secret” key for server end verification.
If you have a WordPress website with a Contact Form 7 plugin or any other plugin, you can copy-paste your site and secret key in the plugin configuration and you’re done.
The below steps are for custom integration.
How to do a custom integration?
Step 1: Client-Side Integration
a. Paste this snippet in the <head> or before the closing of <body> tag in your HTML template:
<script src='https://www.google.com/recaptcha/api.js'></script>b. Paste this snippet at the end of the contact form or before the form submit button.
This is generally placed where you would like the captcha to appear (if its a Google ReCaptcha v2)
<div class="g-recaptcha" data-sitekey="XXXXXXXXXXX"></div>Detailed description can be found here: https://developers.google.com/recaptcha/
Step-2: Server Side Integration
When your users submit the form where you have integrated reCAPTCHA, you’ll get it as part of the payload a string with the name “g-ReCaptcha-response”.
a. secret (required)
b. response (required)
c. remoteip
Detailed description can be found here :
https://developers.google.com/recaptcha/docs/verify
PHP Example Source Code: https://github.com/google/recaptcha
