reCaptcha breaks after the first page load

[agusl88]

The first time the captcha is loaded, it works fine, but if i go to another route, and then go back to the route where the captcha is, i get this error every time vcRecaptchaService.getResponse() is called.

Error: Invalid ReCAPTCHA client id: undefined
    at Error (native)
    at Object.zn [as getResponse] (https://www.gstatic.com/recaptcha/api2/r20150922132346/recaptcha__en.js:305:174)
    at Object.b.service.c.getResponse (http://localhost/js/compiled2.min.js:7:57329)
    at k.a.checkCaptcha (http://localhost/js/compiled2.min.js:7:143363)
    at k.a.validate (http://localhost/js/compiled2.min.js:7:142429)
    at Td.functionCall (http://localhost/js/compiled2.min.js:6:21882)
    at Qd.! (http://localhost/js/compiled2.min.js:6:13756)
    at Object.Td.unaryFn.l.constant [as get] (http://localhost/js/compiled2.min.js:6:18603)
    at k.a.$get.k.$digest (http://localhost/js/compiled2.min.js:5:20087)
    at k.a.$get.k.$apply (http://localhost/js/compiled2.min.js:5:21729)

I found a similar issue reported here https://github.com/VividCortex/angular-recaptcha/issues/78 but i didn't understand the workaround proposed by @frostshoxx

[TheSharpieOne]

vcRecaptchaService.getResponse() accepts an argument, the widgetId for the recaptcha widget your are trying to get the response for.

try vcRecaptchaService.getResponse(myWidgetId) where myWidgetId is the widget ID provided by the on-create callback.

on-create: It's called right after the widget is created. It receives a widget ID, which could be helpful if you have more than one reCaptcha in your site.

By "more than one reCaptcha in your site" that also means a single page application where the "same" recaptcha is loaded more than one.

This is the same issue as #81. A suggestion there is to use the on-success callback to get the response directly, when it is set. This way you do not have to manage the widget IDs.

on-success: It's called once the user resolves the captcha. It receives the response string you would need for verifying the response.

[agusl88]

Already tried, but it didn't work

<div vc-recaptcha theme="light" key="mykey'" on-create="createCallback(widgetId)" on-success="checkCaptcha()" on-expire="checkCaptcha()"></div>

    $scope.createCallback = function(widgetId){
      $scope.widgetId = widgetId;
    };

vcRecaptchaService.getResponse($scope.widgetId)

The first time the page with the captcha is loaded, the widgetId is 0. The 2nd time the widget id is 1, and the error remains:

Error: Invalid ReCAPTCHA client id: 1

[frostshoxx]

Try changing on-success="checkCaptcha()" to on-success="checkCaptcha(response)"

That "response" input param should be the same value of what you're supposed to get from vcRecaptchaService.getResponse($scope.widgetId).

you can have function checkCaptcha(response){ .... use "response" value to do any required validations. (no need to call vcRecaptchaService.getResponse($scope.widgetId) anymore) }

[agusl88]

Well i think i found the problem. I was including the google's recaptcha script on the view's template where the captcha is being used, i moved the script to the app main html and the error is gone. Not really sure why that was a problem.

[TheSharpieOne]

@agusl88: Sounds like the issue is resolved. If so, can you please close the issue.

[mtrias]

This seems to be resolved. Reopen otherwise.

[satyendera]

@agusl88 , if i don't have option to move script to the mail html (head) , is there any alternative solution ???