reCAPTCHA v3 returns a score for each request without user friction. The score is based on interactions with your site and enables you to take an appropriate action for your site. Register reCAPTCHA v3 keys on the reCAPTCHA Admin console.
This page explains how to enable and customize reCAPTCHA v3 on your webpage.
Placement on your website
reCAPTCHA v3 will never interrupt your users, so you can run it whenever you like without affecting conversion. reCAPTCHA works best when it has the most context about interactions with your site, which comes from seeing both legitimate and abusive behavior. For this reason, we recommend including reCAPTCHA verification on forms or actions as well as in the background of pages for analytics.
You can execute reCAPTCHA on as many actions as you want on the same page.
Automatically bind the challenge to a button
The easiest method for using reCAPTCHA v3 on your page is to include the necessary JavaScript resource and add a few attributes to your html button.
Load the JavaScript API.
<script src="https://www.google.com/recaptcha/api.js"></script>
Add a callback function to handle the token.
<script> function onSubmit(token) { document.getElementById("demo-form").submit(); } </script>
Add attributes to your html button.
<button class="g-recaptcha" data-sitekey="reCAPTCHA_site_key" data-callback='onSubmit' data-action='submit'>Submit</button>
Programmatically invoke the challenge
If you wish to have more control over when reCAPTCHA runs, you can use the
execute
method in grecaptcha
object. To do this,
you need to add a render
parameter to the reCAPTCHA script load.
Load the JavaScript API with your sitekey.
<script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>
Call
grecaptcha.execute
on each action you wish to protect.<script> function onClick(e) { e.preventDefault(); grecaptcha.ready(function() { grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) { // Add your logic to submit to your backend server here. }); }); } </script>
Send the token immediately to your backend with the request to verify.
Interpreting the score
reCAPTCHA v3 returns a score (1.0 is very likely a good interaction, 0.0 is very likely a bot). Based on the score, you can take variable action in the context of your site. Every site is different, but below are some examples of how sites use the score. As in the examples below, take action behind the scenes instead of blocking traffic to better protect your site.
Use case | Recommendation |
---|---|
homepage | See a cohesive view of your traffic on the admin console while filtering scrapers. |
login | With low scores, require 2-factor-authentication or email verification to prevent credential stuffing attacks. |
social | Limit unanswered friend requests from abusive users and send risky comments to moderation. |
e-commerce | Put your real sales ahead of bots and identify risky transactions. |
reCAPTCHA learns by seeing real traffic on your site. For this reason, scores in a staging environment or soon after implementing may differ from production. As reCAPTCHA v3 doesn't ever interrupt the user flow, you can first run reCAPTCHA without taking action and then decide on thresholds by looking at your traffic in the admin console. By default, you can use a threshold of 0.5.
Actions
reCAPTCHA v3 introduces a new concept: actions. When you specify an action name in each place you execute reCAPTCHA, you enable the following new features:
- A detailed break-down of data for your top ten actions in the admin console
- Adaptive risk analysis based on the context of the action, because abusive behavior can vary.
Importantly, when you verify the reCAPTCHA response, you should verify that the action name is the name you expect.
Site Verify Response
Make the request to verify the response token as with reCAPTCHA v2 or Invisible reCAPTCHA.
The response is a JSON object:
{
"success": true|false, // whether this request was a valid reCAPTCHA token for your site
"score": number // the score for this request (0.0 - 1.0)
"action": string // the action name for this request (important to verify)
"challenge_ts": timestamp, // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
"hostname": string, // the hostname of the site where the reCAPTCHA was solved
"error-codes": [...] // optional
}
Tips
grecaptcha.ready()
runs your function when the reCAPTCHA library loads. To avoid race conditions with theapi.js
, include theapi.js
before your scripts that call grecaptcha, or continue to use the onload callback that's defined with the v2 API.- Try hooking the
execute
call to interesting or sensitive actions like Register, Password Reset, Purchase, or Play. - Use
https://www.google.com/recaptcha/api.js?trustedtypes=true
to load code compatible with Trusted Types.