Can Recaptcha V2 and V3 Be Used on The Same Web Page?

[touhonoob]

An example use case is that a site might want to verify an user getting a low score from V3 with V2.

[rowan-m]

You can see (examples of multiple v2 widgets)[https://developers.google.com/recaptcha/docs/display#example] here. I haven't tried mixing v2 and v3, but I can give it a go and see if I can pop an example up.

[therealcaii]

Anything updates on this?

[splinter89]

Why use v3 at all in this case? Let google decide if the score is too low and verify the humanness - all under v2.

[touhonoob]

@splinter89 to save time for legit users

[splinter89]

Sorry, I don't see how you can save time without allowing more suspicious traffic. If I were okay with users solving recaptcha puzzles, I would simply use v2.

Anyway, you'll need to load api.js twice to use both recaptcha's on the same page. v3 loads faster and doesn't require grecaptcha.reset() to get multiple tokens.

<script src="https://www.google.com/recaptcha/api.js?onload=v2_onload"></script>
<script src="https://www.google.com/recaptcha/api.js?onload=v3_onload&render=V3_SITE_KEY"></script>
<div class="g-recaptcha" data-size="invisible" data-sitekey="V2_INVISIBLE_SITE_KEY" data-callback="v2_callback"></div>
<script type="text/javascript">
    function v2_onload() { console.log('v2 loaded'); }
    function v3_onload() { console.log('v3 loaded'); }
    function v2_callback(token) { console.log('v2 token: ' + token); }
    function v3_callback(token) { console.log('v3 token: ' + token); }

    // call these manually
    function test_v2() { grecaptcha.execute(); }
    function test_v3() { grecaptcha.execute(V3_SITE_KEY/*, {action: '...'}*/).then(v3_callback); }
</script>

[yisusans]

I've done this and occasionally I get an error on my site that reads Invalid site key or not loaded in api.js. When I inspect the error, it turns out my v3 keys are being used for v2. This only happens occasionally. Does anyone else have this issue?

[ivan-slepchenko]

@yisusans Have you fixed your problem somehow?

[yisusans]

Yeah, I have...there was an issue w/ the react library I was using. Thanks! @ivan-slepchenko

[flaviossantana]

Hello, is it possible to use both versions (v2 and v3) in the same project? When trying to use I get the error below:

core.js:14597 ERROR Error: Invalid site key or not loaded in api.js: 6Ld4cH8UAAAAAEQo7ePHMKchWah2IPc93-LlzPDV at Object.rG [as execute] (recaptcha__pt_br.js:522)

The sitekey presented in the log and V3, plus seeing on the network in chrome I see that he is sending the sitekey of V2

https://www.google.com/recaptcha/api2/userverify?k=6LcFYJgUAAAAABYOTRc9dJs3lvIJ4Ot075kblPOi

[yisusans]

i had the same issue. how are you loading v2?

[yisusans]

but this might be a race condition issue w/ the way you're loading recaptcha v2 & v3.

[flaviossantana]

Hello, I was able to solve the problem. It was missing calling the method:

// clean script to make sure siteKey is set correctly (because previous script could be incorrect) this.scriptService.cleanup ();

before calling the method:

this.reCaptchaV3Service.execute ()

With that I solved the sitekey problem:

ReCaptchaV23DemoComponent.html: 171 ERROR Error: Invalid site key or not loaded in api.js: 6Let_5gUAAAAANi3fdTLGzZzXIR1DKUc6EuV9Ev0     at Object.rG [as execute] (recaptcha__en.js: 522)     at recaptcha_v3.service.ts: 31     at ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 391)     at Zone.push .. / node_modules / zone.js / dist / zone.js.Zone.run (zone.js: 150)     at NgZone.push ../ node_modules/@angular/core/fesm5/core.js.NgZone.runOutsideAngular (core.js: 17248)     at recaptcha_v3.service.ts: 30     at script.service.ts: 32     at ZoneDelegate.push ../ node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 391)     at Object.onInvoke (core.js: 17289)     at ZoneDelegate.push .. / node_modules / zone.js / dist / zone.js.ZoneDelegate.invoke (zone.js: 390)

Example source code: https://github.com/flaviossantana/ngx-captcha/blob/master/demo/src/re-captcha-v-2-3-demo.component.ts#L150

Thank you! / Obrigado!

[d0coat01]

Here's an approach that seems to work quite well for us.

According to ReCAPTCHA's API,

It is recommended to include your onload callbacks first.

The api is assigned to window.grecaptcha when it is loaded. Knowing that, you can clone the api into two separate variables as shown below:

<script>
  function recaptchaV2Callback() {
    window.grecaptchaV2 = Object.assign(Object.create(Object.getPrototypeOf(window.grecaptcha)), window.grecaptcha)
  }

  function recaptchaV3Callback() {
    window.grecaptchaV3 = Object.assign(Object.create(Object.getPrototypeOf(window.grecaptcha)), window.grecaptcha)
  }
</script>

<script src="https://www.recaptcha.net/recaptcha/api.js?onload=recaptchaV2Callback&render=explicit" async
  defer></script>

<script
  src="https://www.recaptcha.net/recaptcha/api.js?onload=recaptchaV3Callback&render={{ YOUR_V3_SITE_KEY }}"></script>

You can then just call each api separately such as window.grecaptchaV3.execute(...).

[rexlam0630]

Official way: https://developers.google.com/recaptcha/docs/faq

<html>
  <head>
    <title>reCAPTCHA demo: Running both v2 and v3</title>
    <script src="https://www.google.com/recaptcha/api.js?render=v3_site_key"></script>
    <script>
      grecaptcha.ready(() => {
        grecaptcha.render('html_element', {
           'sitekey' : 'v2_site_key'
        });
      });
    </script>
    <script>
      function onSubmit() {
        grecaptcha.ready(() => {
            grecaptcha.execute('v3_site_key', {action: 'homepage'}).then((token) => {
               ...
            });
        });
      }
    </script>
  </head>
</html>

[NautillusSs]

Using the official way, how did you differentiate in the backend between v2 and v3 to use the correct secret key for the 'verify' API?

Nevermind, I included the HTML elements relevant to each version wrapped in an if/else statement from go templates, and a hidden input element whose value says v3/v2 for the backend to use. Now with a low score, the webpage falls back onto v2 after reloading.

[rowan-m]

Closing old issues that are not related to the PHP client code.