vividcortex / angular-recaptcha Goto Github PK

Not able to Verify it with Google

Any Code snippet with integrating the response of angular recaptcha with PHP Server Code.

In order to validate the captcha server side, I need to pass a challenge, what variable/function will give me the correct challenge data?

I have user variable in my scope, and use it like this in my html:

on-success="setCaptcha(user, response)"

But in setCaptcha user in undefined, and response is OK.
Excepted user to be an object that I've passed.

on what scope does setCaptcha runs? It should run on the same scope as user (me) on.
and btw why did you decide to remove ng-model, and use callbacks instead? I think using it with ngModel was better,

How do i customize the recaptcha appearance like https://developers.google.com/recaptcha/docs/customization#Custom_Theming ???

I noticed that when I first load a page with the widget, the validity of "recaptcha" is set to false.

I fill in the form (including captcha), I make an asynchronous submit using angular, I get an error from the server, I reload the widget (vcRecaptchaService.reload). This does not set its validity to false again, so there's a small inconsistency.

Demo Not Working

Update:

Bug in JS

theme: '?=',

May i know why you used ?=

I mean as far as i know =? is valid but not sure about ?=

I'm getting this error and I can't seem to figure out why it's happening.

Uncaught TypeError: Cannot read property 'CROSS_ORIGIN_IFRAMES_FILTER' of undefined
Uncaught TypeError: _.d is not a function

Any ideas?

Hi

i've got error like this in my console log

Error: [$parse:syntax] http://errors.angularjs.org/1.2.16/$parse/syntax?p0=LdtcfUSAAAAAOBJrsfpYCrT3abxR9FzHh8Z9HhD&p1=is%20an%20unexpected%20token&p2=2&p3=6LdtcfUSAAAAAOBJrsfpYCrT3abxR9FzHh8Z9HhD&p4=LdtcfUSAAAAAOBJrsfpYCrT3abxR9FzHh8Z9HhD
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:6:450
    at $a.throwError (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:165:141)
    at $a.parse (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:164:6)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:96:122
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:52:36
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:7:386)
    at J (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:51:294)
    at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:399)
    at f (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js:46:416) <div id="form-views" ui-view="" class="ng-scope"> angular.js:9778

my HTML

<div
            vc-recaptcha
            ng-model="formData.captcha"
            tabindex="3"
            theme="clean"
            lang="en"
            key="6LdtcfUSAAAAAOBJrsfpYCrT3abxR9FzHh8Z9HhD"
        ></div>

I use it with angular 1.2.16 ..any idea?

Thanks

Hey guys this a great work from your part to make reCaptcha integration easier for Angular Projects.
Didn't knew where to reach out to you guys so posting it here.

I've also written a tutorial which uses this library, along with a server side example.

http://code.ciphertrick.com/2015/05/19/google-recaptcha-with-angularjs/

Thanks for this awesome library. :)

seems like reload of captcha is broken due to: "angular.element($document[0].querySelectorAll('.pls-container')).parent().remove();"

function cleanup(){
// removes elements reCaptcha added.
angular.element($document[0].querySelectorAll('.pls-container')).parent().remove();
}

I need to translate the recaptcha into other languages. Please, could you add the "lang" attribute to the angular directive?

Thank you.

I'm using grunt-contrib-uglify version ~0.4.0 to uglify my code before sending it to S3. It all works like a charm until I add angular-recaptcha to the mix. Then the javascript console log says: Cannot use 'in' operator to search for 'RecaptchaTemplates' in undefined

Not a JS expert here, but I've seen other libraries where they apply some minor changes to allow minification/uglification (if that word exists?).

Anyways, it might be a good idea to investigate this a little bit further and either:

• Fix it in this repo
• Communicate it to the grunt-contrib-uglify team

Is there any way to dynamically change the language of the captcha by using this module???

Can you please update the package.json main entry to use release/angular-recaptcha.js instead of src/vc-recaptcha.js or better yet, add that main entry to bower.json, so that bower knows which files to copy.

Your directive supports only direct values in attributes such as 'key' or 'lang'.
It will be useful if it would support expressions that will be evaluated once before Recaptcha creation.

Hello

Today when i bower install this module, it fetches 2.1.1 which still contains the cruicial misspelling. (https://github.com/VividCortex/angular-recaptcha/releases/tag/2.1.1)

Can you please build a new version fixing this? Otherwise using bower cannot be done with this project.

Regards

Has anyone had luck using this module with Angular 1.3+ when minifying their code?

I'm using Grunt for my production environment to concat all the vendor files together.

When loading up the app, I get the following error:

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:modulerr] Failed to instantiate module vcRecaptcha due to:
Error: [$injector:nomod] Module 'vcRecaptcha' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

I was having a previous issue with a different module ngDialog. However, after updating from 0.3.4 to 0.3.9 which is the latest, the similar error I'm getting for this module disappeared and now the error is showing up for this module.

To be a bit more clear, my code works great in development. Only when concat/minification/uglify happens does the error appear.

An example of my index.html and app.js file can be found in the ngDialog link above.

$ bower --version
1.3.12
$ bower list
bower check-new     Checking for new versions of the project dependencies..
myApp#0.0.1 /Users/user/Documents/myApp
├── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
├─┬ angular-animate#1.3.1 (1.3.12-build.33+sha.d1b6480 available, latest is 1.4.0-build.3807+sha.b3a9bd3)
│ └── angular#1.3.1 (latest is 1.4.0-build.3807+sha.b3a9bd3)
├─┬ angular-chosen-localytics#1791dcfd23
│ ├── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── chosen#e-tag:3faf39b4e
├─┬ angular-cookies#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├─┬ angular-google-maps#2.0.7 (2.0.12 available)
│ ├── angular#1.3.1
│ └── lodash#2.4.1 (latest is 3.0.0)
├── angular-meta#0.2.0
├─┬ angular-mocks#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├─┬ angular-moment#0.9.0
│ ├── angular#1.3.1 (1.3.12-build.33+sha.d1b6480 available, latest is 1.4.0-build.3807+sha.b3a9bd3)
│ └── moment#2.9.0
├── angular-payments#2472bc9bef
├─┬ angular-recaptcha#2.1.1
│ └── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
├─┬ angular-resource#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├─┬ angular-route#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├─┬ angular-sanitize#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├─┬ angular-scenario#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular#1.3.1
├── es5-shim#3.0.2 (latest is 4.0.5)
├── font-awesome#4.2.0 (4.3.0 available)
├── jquery#1.11.1 (1.11.2 available, latest is 2.1.3)
├── json3#3.3.2
├── lodash#2.4.1 (latest is 3.0.0)
├─┬ ng-breadcrumbs#0.4.1
│ ├── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
│ └── angular-route#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
├─┬ ngDialog#0.3.9
│ └── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
├─┬ ngcart#0.0.2-rc.1.0
│ └── angular#1.3.1 (1.4.0-build.3807+sha.b3a9bd3 available)
└── oauth-js#0.3.0 (latest is 0.4.0)

Thanks for taking a look!

http://techcrunch.com/2014/12/03/googles-recaptcha-mostly-does-away-with-those-annoying-captchas/

https://developers.google.com/recaptcha/docs/display

Thanks

I added recaptcha widget to my login and whether user submitted wrong credentials, I tried to reload recaptcha by using vcRecaptchaService.reload($scope.widgetId); (like an example) but the recaptcha is not reloaded and I also received a message in browser console:

Uncaught SecurityError: Blocked a frame with origin "https://www.google.com" from accessing a frame with origin "https://xxx.com". Protocols, domains, and ports must match.

thought both site using https protocol already.
Please let me know any suggestion.

As the title says, onCreate returns 0 for widgetId

Even though I have JavaScript enabled, I am sometimes given the fallback/no-js mode. Maybe it's something other than JavaScript it's checking for that I lack in my session.

It might be possible to support this mode - it generates a <textarea name="g-recaptcha-response"> where the user pastes a code - might be able to watch for this and set form as valid. It could be optional since it's probably an edge case and not as performant or idiomatic Angular.

With the new, v2, "no CAPTCHA" reCAPTCHA, if the checkbox is checked for a while, the session will automatically expire and invalidate the captcha. There should be a function/callback similar to onSuccess to trigger logic (which the developer could use to prevent form submission).

You have forgotten to say in the doc that it is required to add 'vcRecaptcha' as a dependency of the module

In my app, i show recaptcha only if the user fails to login 3 times in sequence. Recaptcha is always loaded, but hidden using ng-hide. Because of this, i can't submit my form cause it always is invalid, since recaptcha is not marked (and it's not marked because it's hidden).

I can, simply don't validate recaptcha?

I saw that in issue #29 you validate if recaptcha is checked. Why you don't create a parameter to DON'T validate recaptcha?

Hello,

I wanted to know if anyone has any idea or example code as to how to call the api js via requirejs config?

I saw that its required to do the following:
script src="https://www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit" async defer script

So how can I add an onload parameter to the requirejs config such that everything works in harmony?

Kindly assist someone,
Thank you.

When i use the service like that, i see the error.

vcRecaptchaService.getResponse()

But I have checked the directive with on-create event, captcha was loading and I see the captcha on the screen. I can use it but i can't get the response with getResponse().

What is the problem?

When I try to do vcRecaptchaService.reload() it seems to work but in my js console I get this every time I click my mouse or generally interact with my app in any way:

Error: Permission denied to access property '10_1417377045946'

I found a solution here (https://groups.google.com/forum/#!topic/recaptcha/CZNuFp1ct_Y) but it's a hack: $('.pls-container').remove();.

I did try to pass a widgetId but because of #39 I was only getting widgetId = 0. Despite this, I don't see why I shouldn't be able to just call reload().

Any ideas?

Hey,

I notice that when i want to hear the numbers, the voice dosent match to the display numbers.

After verifying I'm not a robot, I'm receiving the following error:

TypeError: undefined is not a function
at cleanup (VM22475 angular-recaptcha.js:188)
at VM22475 angular-recaptcha.js:152
at angular.js:16223
at e (angular.js:4905)
at angular.js:5285

Which seems to be occurring at the following line:

 function cleanup(){
   // removes elements reCaptcha added.
    angular.element($document.querySelectorAll('.pls-container')).parent().remove();
  }

Firstly Awesome directive...
I am using angular-recaptcha and i want to multiple widgets in an single application....
As told in documentation i used setWidgetId('widget1'); but in the console i got an error as invalid client Id....
Can u please share a fiddle or plunker explaining how to render multiple widgets using this directive..

Thanks,waiting for ur response...
sam....

Since the onload callback function on the API script's URL should be the callback in the service (vcRecapthaApiLoaded), it would be nice to allow for other callbacks so the dev can know when its been called. There should be a way to have a callback function called when recaptcha is loaded and angular-recaptcha is ready.

var app = angular.module('myModule', ['vcRecaptcha']);

app.config(['vcRecaptchaServiceProvider', function(vcRecaptchaServiceProvider) {
    vcRecaptchaServiceProvider.onLoad.push(function(recaptcha){
        // recaptcha is loaded, do something
    });
}]);

Here, onLoad is an array of functions, when the vcRecapthaApiLoaded callback is called, it would call the onLoad functions.

Current work-around:
Set the API script URL's onload callback to your custom function (with the logic you need) then manually call vcRecapthaApiLoaded from your function to notify angular-recaptcha that recaptcha is loaded.

I just looked at the API docs for recaptcha, it looks like they added an expired-callback attribute which expires and the user needs to solve a new CAPTCHA.
Currently, because this API attribute wasn't there previously, the solution depends on a timeout. It should be changed to use this new API method.

Hello,
if i just copy paste the example and add my public key I alway get
"sending the captcha response to the server null"

what may be the problem?

Now that most of the captcha checking happens on the client-side before submitting, if the directive is within a form (ngForm), we can set it to be invalid when the captcha is not checked.

This would help prevent form submission when the captcha is not checked.

You are using a timeout of 1000ms as a workaround for not knowing when the captcha is finished loading, but you can actually provide that callback in the options of the reCaptcha.create() call.

See: https://developers.google.com/recaptcha/docs/display#recaptcha_methods

and read the remarks for the create() function.

Hi,

How Can i Apply Different CSS to Captcha.

For example:

<script src="https://www.google.com/recaptcha/api.js?onload=myOnloadFunction&render=explicit" async defer></script>

var app = angular.module('myModule', ['vcRecaptcha']);

app.config(['vcRecaptchaServiceProvider', function(vcRecaptchaServiceProvider) {
    vcRecaptchaServiceProvider.setOnloadFunction('myOnloadFunction');
}]);

It will be nice if the recaptcha works as expected with the required (or ng-required) directive!!!

I have followed the same guide as in the demo. The recaptcha widget isn't being displayed as soon as the page loads. Only after i submit the form data, the widget appears and calls respective methods(setResponse).

angular-recaptcha build:2015-01-09 

div 
    vc-recaptcha 
    theme="'dark'"
    key="model.key"
    on-create="setWidgetId(widgetId)" 
    on-success="setResponse(response)" 
/div 

I'm also facing a lot problem with the server validation. The npm recaptcha projects seems to be outdated. Are there any documentation/guide towards the same?

Everything appears to work well in my application. Thanks for the great work.

However, I now have this error on every click on my site after leaving the registration form.

Uncaught SecurityError: Blocked a frame with origin "https://www.google.com" from accessing a frame with origin "http://localhost". The frame requesting access has a protocol of "https", the frame being accessed has a protocol of "http". Protocols must match.

nz cb=gapi.loaded_0:46
jz.send cb=gapi.loaded_0:44
Fz cb=gapi.loaded_0:48
(anonymous function) cb=gapi.loaded_0:48

Perhaps I need to unload the google api when moving off of the page? Watching the error count increase is not a good thing.

On load event not triggering after page load, so reCAPTCHA not loading.

Im loading scripts at the bottom of page in this order:
angular.min.js?v=1.3.7
angular-route.min.js?v=1.3.7
angular-recaptcha.min.js?v=2.0.0
recaptcha/api.js?onload=ngRecapthaApiLoaded&render=explicit&hl=en
ui-bootstrap.min.js?v=0.12.0

I want to use 2 recaptcha on a single page, how i can do it?

Thank you.

Is anyone seeing this issue? The widget is working in Ffox but not in Chrome?

Hello.

I was thinking about creating some tests (with coverage) for this repository and I'd like to know what you think about it. So I know if I should carry on or not.

I'd also like to setup the integration with travis and coveralls, if you like the idea.

Anyway, here's what I got so far:

https://github.com/ericmdantas/angular-recaptcha

really need to do it

Having serious trouble figuring out why recaptcha_ajax.js is producing this error? The theme shows, but no images load.

In the readme, the link to the demo file is broken (error 404).

Seems the version on NPM is out of date (currently 1.0.1). Mind publishing the latest? Thanks!

I've been noticing a flaky problem where the onload callback here
<script src='//www.google.com/recaptcha/api.js?onload=vcRecaptchaApiLoaded&render=explicit' async defer></script>
is called before the callback vcRecaptchaApiLoaded exists...

Is this a known issue? Any ideas to wait around for angular to load and the vcRecaptcha service to attach vcRecaptchaApiLoaded to the window?

We need a few specs (like code style) to be added to a contribution guide, which should be taken into account at the moment of submitting a PRs.