How to include reCAPTCHA v3 in the background of pages?

Question

In the reCAPTCHA v3 docs, it says

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.

How do we run it in the background of pages?

Let's say I have a React app that handles multiple web pages, and for one of my web pages, it is a sign up form where I want to get a risk score when users sign up. When the docs say to run reCAPTCHA in the background on other pages, does that mean it's running on other pages as long as <script src="https://www.google.com/recaptcha/api.js?render=_reCAPTCHA_site_key"></script> is in the header? Or do we need to call grecaptcha.execute(...) on all the other pages, and not just the signup page?

thanks for asking this. I have the same question. In addition, how can I observe that reCAPTCHA is indeed running in the background? Can I observe the data it is collecting? — Ray N. Franklin, Jul 12 '20 at 16:23
I'm wondering the same thing, has either of you figured it out by any chance? @RayN.Franklin — Jul, Aug 10 '20 at 21:50

score 3 · Answer 1 · answered Aug 11 '20 at 22:04

3

As long as you have the script attached, it will run in the background of pages. You can see that it's running if the reCAPTCHA banner/icon is showing on the page (usually bottom right corner). grecaptcha.execute(...) should be run on a specific action, like when you click a button to sign up for example.

answered Aug 11 '20 at 22:04

jojochuu

101
6

How did you decide what pages the script would run in the background on? Did you pretty much have it run on every single page of your site or certain ones like high traffic pages? – Milktea Aug 25 '20 at 20:03
@jojochuu Do you have a link to any documentation saying the script should be attached on all pages? 'coz I can not find a plausible source :/ – jacek.ciach Oct 21 '20 at 13:37
1

@jacek.ciach '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.' https://developers.google.com/recaptcha/docs/v3 – 00-BBB Sep 08 '21 at 16:04

score 1 · Answer 2 · answered Aug 11 '20 at 23:22

@jojochuu, your answer is exactly right. Thanks for that.

I found another reason to run grecaptcha.execute. Logging. Loading api.js (the second line in the code below) is sufficient to activate recaptcha. It displays the flyout recptcha button.

I chose to add the second script that does call grecaptcha and gets the token. Then I use the token to get the score and any error codes from google. I log that data along with the visitor's IP address and a timestamp so I can see how the score changes over time. I can then compare my logs with access logs and maybe spot some IPs I want to ban. Mostly, I just want to know how score changes. I'll disable the logging by removing the second script block.

This is the best tutorial I found. Combining it with the google docs was enough to learn how to do recaptcha right.

<input type="hidden" id="visitor_ip" value="<?=$visitor_ip; ?>">
<script src="https://www.google.com/recaptcha/api.js?render=public-site-key" async defer></script>
<script>
    // This correctly gets the token, but doesn't verify the user response (action).
    function execGrecaptcha() {
        grecaptcha.ready(function() {
            grecaptcha.execute('<?=$settings->recap_public; ?>', {action: '<?=$actionName; ?>'}).then(function(token) {
                logRecaptchaResults(token);
            });
        });
    }

    // Run after page loaded
    window.onload=execGrecaptcha;

    // Send token/ip to server for logging via ajax
    function logRecaptchaResults(token) {
        var vip=document.getElementById('visitor_ip');
        $.ajax({
            url: "https://<?=HOST_NAME_DOT; ?>domain.com/ajax/logit.php",
            type: "get", //send it through get method
            data: {
                "token": token,
                "visitor_ip": vip.value
            },
        });
    }
</script>

How to include reCAPTCHA v3 in the background of pages?

2 Answers2

Linked