How to Set Up Google reCAPTCHA on Your Website
Summary
TLDRThe 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
🤖 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.
🕸️ 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.
👩💻 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.
✅ 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.
Mindmap
Keywords
💡reCAPTCHA
💡response token
💡secret key
💡site key
💡callback functions
💡automatic rendering
💡invisible reCAPTCHA
💡reCAPTCHA admin console
💡reCAPTCHA Enterprise
💡explicit rendering
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
Weitere ähnliche Videos ansehen
Complete Guide to Adding Google reCAPTCHA in Next.js 14+ with App Router
The evolution of CAPTCHA
JWT Authentication with Node.js, React, MySQL | Node JS Authentication With JSON Web Token
#37 Spring Security | Generating JWT Token
Getting Started with Plaid in 3 Minutes
Duolingo -- the next chapter in human computation | Luis von Ahn | TEDxCMU 2011
5.0 / 5 (0 votes)