How to Set Up Google reCAPTCHA on Your Website

Summary

The video provides an overview of Google's reCAPTCHA service and how to integrate the 'I'm not a robot' checkbox in web pages to verify valid users and prevent bots. It covers the different reCAPTCHA versions, obtaining site and secret keys to render the checkbox, handling successful verification callbacks to get the response token, and using that token on the backend server to validate legitimacy via the reCAPTCHA API before allowing user access.

Takeaways

• 😀 There are 3 types of reCAPTCHA services offered by Google - reCAPTCHA v2, v3 and Enterprise
• 👉🏻 reCAPTCHA v2 allows adding an 'I'm not a robot' checkbox to validate users, with 1 million free verifications
• 🔐 reCAPTCHA v3 scores user interactions to decide if requests seem automated or not
• 💵 reCAPTCHA Enterprise offers advanced fraud detection and DDoS protection services
• 🤖 The site key displays the checkbox widget, while the secret key verifies the response on the server
• ✅ A successful verification returns a response token to submit back to Google for final validation
• ⏳ Tokens are only valid for 2 minutes and can only be used once for verification
• 👀 Google will verify if the token matches the secret key to confirm the user is human
• 🎉 Success and error callbacks can be set up in code to handle the verification response
• 💡 The reCAPTCHA APIdocumentation has more details on advanced usage and other versions

Q & A

What are the different types of reCAPTCHA services offered by Google?

Google offers three types of reCAPTCHA services - reCAPTCHA version 2, version 3, and reCAPTCHA Enterprise. Version 2 allows adding the 'I am not a robot' checkbox, version 3 works by scoring user interactions, and Enterprise provides services like fraud detection and DDoS protection.

How does the reCAPTCHA version 2 service work?

reCAPTCHA version 2 allows adding an 'I am not a robot' checkbox to validate user requests. It also includes invisible verification. Google provides 1 million free verifications which should be sufficient for most free services.

What information is needed to integrate reCAPTCHA version 2 service?

To integrate reCAPTCHA version 2, you need a site key and a secret key, which are provided when you register your site on the reCAPTCHA admin console. The site key is used in the frontend and secret key in the backend.

What are the different callback functions available in reCAPTCHA?

There are three callback functions in reCAPTCHA - a success callback for successful validation, an expired callback when response expires, and an error callback for network issues.

What is the purpose of the response token provided by reCAPTCHA?

The response token provided after successful user validation is used to verify the legitimacy of the user on the backend server. It is posted to Google's server to confirm that Google has indeed verified that user.

Why can the same response token not be used more than once?

The response token is valid only for 2 minutes and can be used only once for verification. Reusing it results in a failed verification, ensuring bots cannot steal and reuse tokens.

How long is the reCAPTCHA response token valid for?

The response token provided by reCAPTCHA after successful user validation is valid only for 2 minutes. After that, it cannot be reused for verification.

Where should the reCAPTCHA secret key be used?

The reCAPTCHA secret key should only be used on the backend server and not exposed in the frontend code. The site key is used in frontend code shown to users.

What information does a successful reCAPTCHA verification response contain?

A successful reCAPTCHA verification response contains a 'success' boolean indicating pass/fail status, a 'challenge_ts' timestamp and the site's registered 'hostname'.

What are some use cases for adding a reCAPTCHA checkbox?

The reCAPTCHA checkbox is commonly added in forms where users input sensitive information or perform important transactions, like login forms, signup forms, contact forms, payment gateways etc to filter out bots.

Outlines

00:00

🤖 Overview of Google reCAPTCHA services

Paragraph 1 provides an introduction and overview of the video, which will demonstrate how to add the "I'm not a robot" reCAPTCHA checkbox to web pages. It outlines the different reCAPTCHA services offered by Google: v2 with checkbox validation, v3 with risk analysis scoring, and Enterprise suite. The focus will be on reCAPTCHA v2 and adding the checkbox.

05:01

🕸️ Registering reCAPTCHA and getting site & secret keys

Paragraph 2 shows how to register a site on the reCAPTCHA admin console to get the site key and secret key required for implementation. The site key renders the checkbox widget on the web page, while the secret key verifies the response on the server. A StackBlitz demo project is used to illustrate adding the domain where the checkbox will be hosted.

10:03

👩‍💻 Adding reCAPTCHA checkbox to web page

Paragraph 3 demonstrates two methods to add the reCAPTCHA checkbox to a web page: automatic rendering using a div, and explicit rendering using the grecaptcha.render JavaScript function. Callback functions are created to process the response token received upon successful user verification. The token is sent to Google's server to confirm validity before allowing user access.

15:06

✅ Verifying response token on server

Paragraph 4 shows how the response token received in the browser after user verification is sent to Google's server for additional confirmation using the secret key. A successful verification response confirms the legitimacy of the user interaction. The same token cannot be verified more than once within the valid period.

Keywords

💡reCAPTCHA

reCAPTCHA is a free service by Google that helps protect websites from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart. The video focuses on reCAPTCHA version 2, which shows a checkbox for users to verify "I'm not a robot". After verification, a response token is sent back which can be validated on the server using the secret key.

💡response token

The response token is returned by reCAPTCHA after successful human verification. It is valid for only 2 minutes and can be used only once to verify the response. The token needs to be sent to Google's server along with the secret key to check if the verification was indeed done properly by a human.

💡secret key

The secret key is a unique key associated with each reCAPTCHA site registration. It should only be used on the server to verify the reCAPTCHA response tokens and should not be exposed in the client-side code or browser.

💡site key

The site key is used to display the reCAPTCHA widget on the webpage. Unlike the secret key, the site key is exposed to the client side as it renders the checkbox that users have to check.

💡callback functions

Callback functions in reCAPTCHA API allow handling the different responses - success, error or expiry callbacks. The success callback returns the response token on successful human verification. Error callback handles network issues while expiry callback is called when response expires and user needs to re-verify.

💡automatic rendering

Automatic rendering allows adding reCAPTCHA with just a div containing site key and data attributes. reCAPTCHA handles rendering the checkbox automatically on page load. The other option is explicit rendering by calling a JavaScript function.

💡invisible reCAPTCHA

Unlike version 2, the invisible reCAPTCHA does verification in the background without showing a checkbox to the user explicitly. It returns a score to determine if the request is valid or bot traffic, allowing blocking bad requests behind the scenes.

💡reCAPTCHA admin console

The reCAPTCHA admin console is used to register sites and domains to get the site & secret keys for integrating reCAPTCHA service. It provides options like email alerts, fraud detection to monitor suspicious activity.

💡reCAPTCHA Enterprise

reCAPTCHA Enterprise offers advanced bot and fraud detection capabilities like anomaly detection, risk analysis and provides protection against DDOS attacks for enterprise-level requirements beyond basic spam filtering of version 2.

💡explicit rendering

Unlike automatic rendering, explicit rendering involves calling a specific JavaScript function to render reCAPTCHA checkbox by passing necessary parameters like site key, callback etc. It allows more control but also needs more code.

Highlights

Google offers three kinds of reCAPTCHA services: reCAPTCHA version 2, version 3, and reCAPTCHA Enterprise.

reCAPTCHA version 2 allows adding an "I am not a robot" checkbox to validate user requests. It also includes invisible verification.

reCAPTCHA version 3 works by giving a score to user interactions, allowing decisions on rejecting or approving requests based on the score.

reCAPTCHA Enterprise provides fraud detection and protection services like DDoS protection.

The site key is used in the browser to create the reCAPTCHA checkbox container, while the secret key is used on the server.

The reCAPTCHA widget can be rendered automatically using a div, or explicitly by calling a JavaScript function.

Successful, expired, and error callbacks can be specified to handle reCAPTCHA responses.

The response token after successful validation is valid for 2 minutes and can be used once for verification.

The token is sent in a POST request to Google to verify it came from a legitimate user.

The POST request must include the secret key and response token as parameters.

If token verification succeeds, the response will have a success:true property.

Submitting the same token again results in a timeout/duplicate error.

There are other reCAPTCHA versions for invisible validation and Android.

See the developer guide for more details on using the reCAPTCHA APIs.

Thanks for watching this overview of adding a reCAPTCHA checkbox with callbacks.

Transcripts

if you have been browsing internet and

logging into websites then you must have

seen and used the google's i am not a

robot checkbox that checkbox is the

google's recaptcha service and is used

to identify valid users and filter out

any bots or malicious requests

so if you want to understand what are

the google recapture services and how

can we integrate the i am not a robot

checkbox into your web pages then be

sure to watch this video till the end

now this video is divided into chapters

so if you want to skip any part like you

are only interested in the coding part

then feel free to skip to that chapter

also if you feel this video is

interesting and helpful then please

don't be shy and like the video and also

subscribe to this channel to stay

updated with more such kind of videos

now before we start adding the recaptcha

checkbox in a webpage first let's have a

brief overview of different recapture

services that google provides

so basically google offers three kinds

of recapture services first one is the

recapture version two then there is a

version three and then there is the

recaptcha enterprise

so recapture version 2 is the one where

we can add the i am not a robot checkbox

to validate the user's request

it also includes invisible verification

also google provides 1 million

verifications for free which i believe

should be sufficient as far as free

services go second one is recaptcha

version 3 and it works differently where

it gives a score of user interaction and

based on that score we can decide what

to do with the user's request so if the

score that the service provides when

validating a user is low then we can

decide to reject the user's request or

to identify the user either as a bot or

as a malicious user if the score is

acceptable or if it is high enough then

we can say yeah this user is valid and

he can go through to use our services

then there is the recaptcha enterprise

which provides an entire suite of

services for fraud detection and other

services such as ddos protection etc you

can find more about it if you want to by

going to this url of google recapture

but in this video i'm going to talk

about recaptcha version 2 where we are

going to add a recaptcha i am not a

robot checkbox and i will show you how

we can take the help of google in

verifying if the user is a valid user or

if it is a malicious user etc so without

wasting any more time let's begin now

the first thing that you need to do is

to open up the

admin console of google recapture and

then login into your account if you are

not yet logged in when you will open up

the console then if you do not have any

recapture services enabled for any of

your hosts or domains then it will ask

you to register a new site the first

thing that you need to do is to give in

the name of the label so i'm just going

to give the name as test

now for recapture type i am going to

select recapture version 2 because this

is the one where we are going to add the

i am not a robot checkbox it also

provides two more services where

it validates the requests in the

background and the third one is for

android but in this video we are going

to see how we can add this checkbox next

you will have to add the domain so i

will come to this part later because i

will show you how i am going to do that

for this video this is the email address

of owners so

your email address will come here as

default you can add more email addresses

to receive any kind of notifications

from google let's say google detects

that someone is maliciously trying to

use our web application so it can notify

us by means of sending emails to the

owner's email addresses and then you

will have to accept the recapture terms

of service and this checkbox send alert

to owners is checked by default so i

have already told you what this will do

it will detect problems and if it does

then it will send the owners

notifications about those malicious

users now let's come to the part where

we have to add a domain so to do that

i have created a new static html

javascript and css application

in stack blitz so stack blitz is an

online platform where you can create

different kinds of projects like angular

react view etc and then you can compile

those projects and see how they look

like when

compiled and when they are running in

the browser so in this project there are

three files first one is the index.html

file then there is a

script file and then there is a

style.css so usually we use the i am not

a robot checkbox when a user is trying

to log in because we want to make sure

that a genuine user is trying to log in

and not a bot or any other malicious

user is trying to login so what i'm

going to do is i'm going to add the

checkbox the i'm not a robot checkbox

below this login button but i was

talking about how to add the domain name

and if you will pay attention stack

blades provide you a url which you can

use to access your application your

built or bundled application from

anywhere on the web so i'm just going to

use this url and we don't have to enter

the https we just have to use the

domain name or the host name so let's

just do that

now we have added everything and it's

time to submit

so test has been registered and the

google's recaptcha has created two keys

for us first one is the site key and the

second one is the secret key so site key

is the key which we use in the browser

and the secret key is the one which we

use

on our server so do not expose this

secret key the side key is going to be

exposed anyway so it doesn't really

matter if anyone knows about it or not

because you are going to use this key to

create the checkbox container within

your web page so now when we have the

site key and the secret key it's time to

create the i am not a robot component or

widget and place it on this webpage

below this login button now there are

two ways in which the recaptcha widget

can be rendered the first one is it will

render automatically where we will use a

div and the second one is we will render

it explicitly by creating a javascript

function so let's first see how we can

add the widget automatically now the

first thing that we need to do is we

need to add the

script element

so let's do that and add it

below this script

this is the url of the captcha api

script and we have to load it in the

async default mode the next thing that

we need to do to automatically add the

recaptcha widget is to add a div element

below this login button so i'm just

going to create a new div element now in

this div element first we have to add

the

class attribute and its value is going

to be g recaptcha and then we will have

to add the

site key attribute so

for that

we are going to copy the value of the

site key from over here when we created

or registered our new recaptcha so let's

just do that i'm going to paste it over

here

so whenever we make any changes then the

page on the right side is going to

refresh automatically so you can see

that the recaptcha

widget has been added and right now this

widget is working but we will also need

to handle the outcome of the widget like

if the google is going to validate the

user when they will click on this

checkbox then we will need to know if

the validation or the verification was

successful or not to do that we use

callbacks but before that i am going to

show you the explicit way of adding this

widget where we will not be adding the

site key within this div element and we

will be using a function which will act

as the callback whenever the

recaptcha api will be loaded let me just

zoom it so that you can see it

so to add the captcha explicitly the

first thing that i will do is i will add

a script callback function

so i'm going to add this function within

this html page

within a new script element

so let's first create a new function

with the name

on load callback

now we need to add two parameters to

this source value and those two

parameters are going to be

the onload parameter and the render

parameter so we need to add these two

parameters onload is going to point to

the callback function which we just

created on callback and render is going

to have the value explicit now you have

to make sure that the callback function

should be available or should be loaded

before the recaptcha script loads now to

ensure that you can order the callback

function before the recaptcha script

like i have done here

in another script element and you can or

you have to use the async and default

tags within the script element which is

pointing to the recaptcha api javascript

file so now to explicitly render the

captcha

we need to call g

recaptcha function and we need to call

render

now the first argument is going to be

the name of the element which is

going to contain the widget and after

that we are going to provide an options

object with more information like the

site key and the callback etc so let's

just do that now if you remember we have

already created a div but we provided

the side key in that div so i'm going to

remove the side key attribute from this

div and

i am going to

you know what provide an id to this div

so let's call it as div

recaptcha and let's copy this id and

paste it into or place it or provide it

as the first argument for g captcha dot

render function now let's provide the

site key so site key property is going

to

have the same value just copy it from

over here from recaptcha

admin console and then paste it

the widget is now here but then we will

also need to provide a callback function

so we need to create a new callback

function

so before we do that let's first talk a

little bit about these callback

functions to capture the response from

recaptcha after the user interacts with

it there can be three kinds of responses

and we can specify callbacks for them

the first one is going to be a normal or

a successful callback so when the

response is successfully submitted by

the user then this callback gets called

for any successful callback a response

token will also be received as an

argument and then i will show you what

we can do with that response token and

for that we can either add the data

callback attributes to the widget div

when we are adding this

widget automatically otherwise we can

provide it as a property within this

options object when we are calling this

g recaptcha dot render function the

second kind of callback is the expired

callback this is called when the

response expires and the user needs to

resubmit

the recaptcha response the third one is

an error callback which is usually

called when there is some kind of

network connection problem and we need

to notify the user about this specific

issue that there is some kind of issue

with their network and for that reason

the recapture service is not going to

work the expired callback can be added

by using the data expired callback

attribute and the error callback can be

wired up using the data error callback

now i'm going to create a new callback

function

and the callback function is going to be

created in this script.js file

so i'm going to remove this console.log

statement and then let's create a new

function and let's just call it success

callback

now within this i'm just going to

provide a debugger

let's go to index.html again and

let's provide the name or the reference

of the callback function so

success callback now for some reason i'm

still not seeing the widget so maybe

the callback function yep there is a

typo over here so

now you can see that the callback has

been provided and now i'm going to click

on this i'm not a robot checkbox and we

will receive a response if it is

successful then the code execution is

going to

break over here at this point where i

have placed debugger but to test this

one i am going to copy this url and then

open it up in a new

chrome tab

so let's do it and open up the console

and now let's click on this i am not a

robot checkbox you can see that we have

received a callback but because i have

not added any argument over here for the

response the way to check it is to add

the arguments

in the watch

you can see that arguments has only a

single argument which is the response

the token which the google recapture

service has sent back to us after

successfully verifying the user clicking

on this i am not a robot checkbox so

what i'm going to do is i'm going to add

an argument over here now you must be

thinking what the hell is this response

token well don't worry i will tell you

that too the token received after a

successful validation is valid for only

two minutes and can be used once for

verification and when we have got the

response token in the browser then we

are going to use this token to post a

request to the google's recaptcha url

but that request is going to be posted

from the server instead of this browser

so here is what the concept is google

verified the user for us but now again

we have to go to google and give it the

token and ask hey google you just

verified this guy as a real human and

you gave me this token please check if

this token is indeed correct if the

token is correct then google will say

yeah dude the token is correct and the

guy is indeed a human now if a malicious

script steals your token and sends it to

our server within two minutes which is

the time for which the token will remain

valid the same token cannot be used

twice also a token is associated with an

account which involves a secret key and

host name so the token generated in

another host will also not be valid for

our host let's now see how this can be

done

so for this application i have not

created a back end so we will be using

the postman app to send the post request

and then verify the response so this is

the postman application and you can use

it to send a bunch of different kinds of

requests you can select the type of the

request from over here by clicking on

this triangle now we need to send a post

request the url is going to be this one

google.com slash recaptcha and then api

site verify now when we are posting a

request on this url we will also need to

provide two parameters the first

parameter is going to be our secret key

if you remember i told you that we need

to use the secret key on our server the

second parameter is going to be the

token or the response token which google

has sent us after the user has clicked

on the i am not a robot checkbox so

first let's add the secret key parameter

and the value is going to be this one

let's just copy it from over here and

then

paste it in the value the second one is

going to be

response

so we can copy response when we will

click on the i am not a robot checkbox

let's reload this page again and then

copy the token value from the

browser console so

let's click on this i am not a robot

checkbox

now remember this token is only valid

for two minutes so we must hurry now i'm

just going to copy the value and

let's press ctrl c open up the postman

app and then i think i will need to

remove this quotes because they may not

be needed

and then

send it

you can see that we have received a

response and if the response is

successful then we will get three values

the success property is going to have

the value either true or false if the

verification is successful then it will

return true google will say yeah the

token is indeed for a legitimate user

and we can allow the user to enter our

system or use our application the second

one is the challenge underscore ts which

is the time stamp at which the challenge

was received and the third one is the

host name so host name is the one which

we have provided

when we were registering our application

or our web page or our web host to

google's recaptcha

and this host name is associated with

this

name or label test

now let's try to post this same request

again so because the same request cannot

be

verified twice so if i will post it

again then you can see that success is

now false and there is another property

with an array

timeout or duplicate it says that it is

either a timeout issue or either it is a

duplicate token because we have already

used this token to verify the legitimacy

of the user so that was all about the

google recaptcha version 2 checkbox

there are two more variants of this api

this one is for the invisible mode and

there is the other one which is for

android do check them out if you want to

and if you want to see how to use them

then you can always check out this

developer guide i have shared this link

in the video's description and finally

thanks for watching this video i am

nitej take care and have fun