Even with the inline JavaScript function - Google ReCAPTCHA couldn't find user-provided function: function (response) -

0
votes

I am using ReCAPTCHA version V2. On the callback function (i.e. data-callback), I am getting the following error message.

ReCAPTCHA couldn't find user-provided function: function (response)

Now, most of the posts/solutions I see on the web are related to a local callback function that doesn't get invoked when referred in data-callback attribute of the g-recaptcha div. However, in my case, even the inline function does not get invoked. Please have a look at the following image.

Screenshot-1: Screenshot-1

In fact, when I am using JavaScript native function such as alert(), it is still not working.

Screenshot-2: Screenshot-2

Here's the JS code I am using.

<script src='https://www.google.com/recaptcha/api.js'></script>

First try - callback function:

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="function (response) { alert('working: ', response);}"></div>

Second try - callback function:

<div class="g-recaptcha" data-sitekey="Please add your site key if you want to test" data-callback="Window.alert('hi');"></div>

I appreciate your help if you can help me understand why is the google API responding in a completely weird way.

1
javascriptdom-eventsrecaptchareact-google-recaptcha
You have to apply a function, not a function call. window.alert('hi') is a function call that belongs to a function body. Try to create a function with that code inside and add that function name there. - Christos Lytras
Thanks, @ChristosLytras for your comment. If you look at the second screenshot, I am using an inline function, it is not even working then. I have added the inline function call div in the First try - callback function HTML. Please have a look. Plus, I did create a method on top of the google API call, it didn't work either. - Mukesh Kumar
It's the same. Recaptcha tries to identify the function by it's name on window, so in your case it tries to validate something like this window[Window.alert('hi');] or this window[function (resp... and it doesn't get inline functions like that. There is an old method to write functions inside html attributes using js: ... but it's obsolete and you should just declare a normal function and then use just it's name. Remember data-callback is not an event attribute, it's just a data attribute that it's value is used to call a function. - Christos Lytras
Oh my God, you were absolutely right @ChristosLytras. Thank you so much. It just worked like a charm. - Mukesh Kumar

1 Answers

1
votes

Inline JavaScript function in Google ReCAPTCHA will never work.

If it could save somebody's time, I am posting his answer here.

All credit goes to @Christos Lytras. Many thanks to him for helping me understand the JS behind the Google ReCAPTCHA. What he said in the comment section about Recaptcha's JS tries to identify the function by its name in the global window object, is absolutely correct. Thus, my implementation was not working and will never work (at least in the V2 version).

In all my solutions when I was trying to implement an inline function, it was read as the window[function (){}]or window[Window.alert('hi');] which is incorrect JS syntax. Therefore, when I tried it the following way, it worked like charm.

Correct approach

<script>window.myCallBackFunction = function() { alert("HI"); }</script>
<script src='https://www.google.com/recaptcha/api.js'></script>
<div class="g-recaptcha" data-sitekey="XXX" data-callback="myCallBackFunction" ></div>

Please note: Just for more clarity, I have also tried implementing the callback function initially before posting this question and it didn't work because of the order of the scripts. Thanks to this answer on another question that helped me immensely but after @Christos Lytras's explaination. In the beginning, I was implementing it in the following order.

Incorrect approach

<script src='https://www.google.com/recaptcha/api.js'></script>
<script>window.myCallBackFunction = function() { alert("HI"); }</script>
<div class="g-recaptcha" data-sitekey="XXX" data-callback="myCallBackFunction" ></div>

I hope it could help somebody like me, in the future.