reCAPTCHA v3 needs more APIs & docs for web apps

[Stephan Seidt]

Hey,

I’m using reCAPTCHA v3 because I didn’t want to force people to solve captcha challenges.

I’m loading the JavaScript API by appending a script tag on a contact page that I require reCAPTCHA on:

<script src="https://www.google.com/recaptcha/api.js?render=6Lfhu2gUAAAAAMpR6jj39_YSnKVP_QrnCwitdHfS" async></script>

Loading reCAPTCHA this way automatically renders a fixed position badge on the lower right and exposes a global grecaptcha object so I can use the API. The ready callback, execute functionality and server-side verification work perfectly.

My remaining problem is this:

After the contact form is submitted successfully, I need the reCAPTCHA badge to disappear, and any background data collection or processing to stop.

In essence, I want to deactivate or unload reCAPTCHA, and, should the user return to the contact page, re-enable it.

I would expect something like this in v3 to be available and documented:

- The ability to include the script tag without causing an explicit render. I don’t know how to do that with v3, and if I leave off the render parameter it seems like the API is loading v2.

- The ability to programmatically render a v3 reCAPTCHA into a target element.

- The ability to programmatically hide & disable a v3 reCAPTCHA. Web apps that don’t do hard page reloads need some way of doing this, otherwise the badge will stay on the screen forever. This is probably deal-breaker for many apps.

Thank you for your help!

Best wishes,

Stephan

[Saurabh Jain]

Did you find a solution to this problem? We are also facing the same, and wondering how can we unload reCaptcha V3 after the sensitive operation.

[Travis G]

I agree v3 is very poorly documented.  It's a mix of the v2 APIs with some parameters different; and we're left to search this message group to find out which ones.  

I also would really like to have a way to unload it - in a single page app having it always floating on top AFTER sign-in /sign-up /etc is a nuisance.  Need a .remove()  

Please improve the documentation google!

For anyone else reading: 

I was able to include a script tag with an explicit render using 'https://www.google.com/recaptcha/api.js?render=explicit&onload=reCaptchaCallback' as the src.  However I found that in the .render() call I have to pass 

size: 'invisible' 

- which doesn't actually make it invisible....not sure why.  Passing 'compact' or nothing seems to cause an Invalid Key Error.  

Would be great to have better documentation especially for SPAs.

[Jeromy Stewart]

Let me know if this helps you guys,

Below is an example of the basic use case that google seems to want V3 users to follow. 

For me their basic use case seems like it has one extra step that shouldn't be needed but nevertheless here it is.

Add this div to your form:

<div class="g-recaptcha" data-theme="dark" data-sitekey="<<[GOOGLE-RECAPTCHA-PUBLIC-SITE-KEY]>>"></div>

Once the script is added and you have an on script load callback assigned.

function scriptLoadCallback(){

    grecaptcha.execute(reCaptchaKey, {action: 'your_page_context'}).then(

    

        function(token){

            //make ajax call and send the token .. pseudo code below

            //I didn't want to take the space to write out the entire Ajax call

            myAjaxFn('folder/serverSideScript.php',{token: token},

            

                function(){

                    //final user experience tweak as a result of googles confidence in the submittion

                }

                

            );

        }

    );

    

}

//THE SERVER SIDE SCRIPT - PSEUDO CODE BELOW

//Sends a cors request to the verify url and sends the token 

//the cors/curl/getUrl/get_file* response contains the JSON data

//that you can use to evaluate the likelihood that the user is a bot

//finally send a response back and have the UI respond accordingly via javascript

token = get_post_var('token')

response = get_web_file_via_curl_or_other('https://www.google.com/recaptcha/api/siteverify?secret=[SECRET-KEY]&response=[token]');

final_result = json_decode(response);

if(final_result['success'] == true && final_result['action'] == 'your_page_context'){

    if(final_result['score'] > .6){

        //IT'S PROBABLY A HUMAN

        return true;

    }

}

//PROBABLY A BOT

return false

Note that the "action" is simply a contextual key that you use to see if the final JSON response returns the same action name so that you can use V3 throughout your site and track with confidence that the respose matches the correct page or form where the action occured.

[Jeromy Stewart]

I actually just realized that the use case I described is how I use it. The recommended use case is where the 'folder/serverSideScript.php' ajax call happens on form submit .. food for thought