Both reCaptcha v2 and v3 on same page

Viewed 5025

as I understand, it seems to be possible to use both v2 and v3 on the same page (see https://github.com/google/recaptcha/issues/279), but can't find any example of it :/

I already have HTML pages with invisible v2, and first, I want to evaluate the accuracy of the v3 score without breaking my current v2 (v3 will be only for test purposes). I was also wondering if it could be possible to use v3 and render v2 challenges for low scores.

Any idea ?

(sorry for my english, it's not my mother tongue ;)

2 Answers

The following example (written by Anton Cherniavskyi) works.

However, I think it only works with v2 invisible + v3, ie.: You can't use v2 checkbox + v3.

<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>
Related