-
Notifications
You must be signed in to change notification settings - Fork 767
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Can Recaptcha V2 and V3 Be Used on The Same Web Page? #279
Comments
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. |
Anything updates on this? |
Why use v3 at all in this case? |
@splinter89 to save time for legit users |
Sorry, I don't see how you can save time without allowing more suspicious traffic. Anyway, you'll need to load api.js twice to use both recaptcha's on the same page. <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> |
I've done this and occasionally I get an error on my site that reads |
@yisusans Have you fixed your problem somehow? |
Yeah, I have...there was an issue w/ the react library I was using. Thanks! @ivan-slepchenko |
Hello, is it possible to use both versions (v2 and v3) in the same project?
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
|
i had the same issue. how are you loading v2? |
but this might be a race condition issue w/ the way you're loading recaptcha v2 & v3. |
Hello, I was able to solve the problem.
before calling the method:
With that I solved the sitekey problem:
Example source code: Thank you! / Obrigado! |
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 <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 |
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> |
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. |
Closing old issues that are not related to the PHP client code. |
An example use case is that a site might want to verify an user getting a low score from V3 with V2.
The text was updated successfully, but these errors were encountered: