Google recaptcha doesn't work with cordova projects

[muhammedabuali]

since cordova projects don't contain domain name the recaptcha throws
ERROR for site owner invalid domain for site key

[bluesliverx]

This seems to be a recent change - this used to work with localhost I'm pretty sure, even without localhost defined as one of the domains.

UPDATE: This does not actually seem to be recent. The main problem is that file: is used as the protocol for cordova projects. See here for the clearest description of what's going on: https://groups.google.com/forum/#!topic/recaptcha/AuN2f7JrZTA

[amostsai]

please see https://stackoverflow.com/questions/41518787/recaptcha-integration-with-ionic-hybrid-app/45364099#45364099

[fermedina]

Any update about this?

[jamescodesthings]

@fermedina or any other poor soul who ends up here.

I'll write this up a little better once it's production ready for my org, but to help in the mean time:

You can use a web recaptcha on iOS using the Ionic Web View, provided your recaptcha includes localhost as a whitelisted domain. The reason this works is the Ionic Web View uses a local server to help with CORS on iOS. So your app has a domain which is localhost:8080.

For Android it's a little more difficult, because your app won't have a domain, I investigated doing similar in Android as Ionic's Web View does for iOS (serving the app locally) but this leads to further complications. More than it's worth.

So, in lieu of a great solution I wrapped the Android Recaptcha code in a Cordova Plugin. You can find it here: cordova-plugin-recaptcha.

To do this you need an Android Recaptcha key, so your server-side may also need to account for multiple recaptcha sources. We did this by passing a flag for android to switch between the iOS and Android secret keys when validating the recaptcha.

In our own implementation in the cordova app, I then used cordova-plugin-device to check that the platform is iOS before serving the web recaptcha key with the site key for our web recaptcha. In the android version we check platform is android before making a call to the cordova plugin.

I can't guarantee it passes App Store Review as our app isn't yet in Prod, but it works as we need it to, validating recaptcha with our public-facing services for both android and iOS.

If you go down this route and have any trouble with the plugin please let me know. At the moment it hot-loads an Angular 1.x service in the js code because this was what we needed in our solution, but I could happily take this out if it causes anyone more trouble than its worth. I can also publish to NPM if it's of benefit, we originally planned to publish to our org's NPM repo but cordova doesn't play well with organisation scoped packages so we've held off, we can quite happily publish as a plain old NPM package upon request.

[fermedina]

@jamescodesthings very thanks! your plugin is for Angular 1, right? I need this functionality for Angular 2 or higher. I don't know how to use your plugin in my template.

[jamescodesthings]

No worries, it's a mixture of plain JS and Angular 1, but I kept to a fairly plain plugin format so that this wouldn't be too big a problem when I chuck it in an NG 2+ project.

Bear with me, it's been a little while since I did this in NG 2+.

In theory you can just use the plain JS version without too much hassle. You could create a service that then has access to the window object. From SO, something like:

import {provide} from '@angular/core';
bootstrap(..., [provide(Window, {useValue: window})]);

constructor(private window: Window) {
    // this.window
}

Then just use the plain js from window:

window.plugins.recaptcha.verify('site-key', success_callback, fail_callback);

In practice it depends a little on what your template is, do you have a public copy or an idea of how you're currently working? I could help fudge it on in.

[rowan-m]

This sounds like it would make a pretty good blog post. I'm also updating the library to support Android app validation amongst other things on the v1.2 branch, so that may help. Let me know if there's something you need in the library here.

[nombrekeff]

Any updates on this? We are facing the same issue. And we need to use it in our project.
We tried everything said in this post and a bunch of other things.

[vicjohnson1213]

For any still looking for the answer to this question, @jamescodesthings has a note in the documentation for cordova-plugin-recaptcha:

Provided the reCAPTCHA's domains to check includes 'localhost' and your app's config.xml includes:

<allow-navigation href="https://www.google.com/recaptcha/*" />

This addition got reCaptcha working for me in iOS. (reCaptcha was working out of the box on Android)

[rr-phillips]

For any still looking for the answer to this question, @jamescodesthings has a note in the documentation for cordova-plugin-recaptcha:

Provided the reCAPTCHA's domains to check includes 'localhost' and your app's config.xml includes:

<allow-navigation href="https://www.google.com/recaptcha/*" />

This addition got reCaptcha working for me in iOS. (reCaptcha was working out of the box on Android)

this literally saved me, i looked for a few hours and this was the thing that was missing, thank you!!

[k-sai-kiranmayee]

Hello @vicjohnson1213, I'm using Cordova too, have disabled the domain validation, still, getting the error Error for site owner. Invalid domain for site key, tried this <allow-navigation href="https://www.google.com/recaptcha/*" /> (however didn't install the plugin)
As discussed/mentioned in various forums since Cordova doesn't contain a domain name, all the files are accessed using file://)
Any suggestions/help, please!

[filipencus]

Some updates on this? Thanks.

[vicjohnson1213]

@k-sai-kiranmayee I'm not sure about that one. Sounds more like an issue with the ReCaptcha configuration more than the Cordova setup.

I wish I had more to help, but this Stack Overflow question has a few things you might want to try: https://stackoverflow.com/questions/30735694/recaptcha-error-invalid-domain-for-site-key

[k-sai-kiranmayee]

Thank you @vicjohnson1213 for the quick response and suggestion :)
I have already seen that question, however, in my case, the domain check is already disabled :( and I'm still getting that issue in the Cordova native app (works fantastically in web and mobile browser)
In https://www.google.com/recaptcha/admin, at the time of registration, we must specify at least one domain, later have unchecked the below and saved it

So now there won't be any domain validation right?
Any more information as to this origin (file://), please

Thank you!

[vicjohnson1213]

@k-sai-kiranmayee I doubt it's an issue with the file:// protocol since I haven't had any issues around that. Do you have localhost in your list of allowed domains? I'm not too sure exactly what that checkbox does, so it might be worth trying.

[k-sai-kiranmayee]

I doubt it's an issue with the file:// protocol since I haven't had any issues around that

@vicjohnson1213 Oh! Thank you, just a quick question, have you installed any plugin or other changes for this in cordova.xml or only <allow-navigation href="https://www.google.com/recaptcha/*" /> this is added?

And yes, tried your suggestion, have added only by adding localhost as domain, still the same :(

And really thank you for your help and responses :)

[vicjohnson1213]

@k-sai-kiranmayee Yeah, I was using the angular2-reacaptcha package (this was an Ionic app, hence the angular). But I can't see anything else in our code that I think would have any effect.

[k-sai-kiranmayee]

oh...Okay...I see that package is for the usage of ReCaptcha @vicjohnson1213 I'm using Vue, so used this vue-recaptcha-v3 and ours is a Cordova app built using Bitrise
Thank you for the help till now, and please do tell me if you find anymore :)

[k-sai-kiranmayee]

Hello, @vicjohnson1213 One more question please, which reCaptcha are you using?

[vicjohnson1213]

@k-sai-kiranmayee I think we're using invisible v2.

[k-sai-kiranmayee]

oh, thank you @vicjohnson1213, so following this SafetyNet reCAPTCHA API?

[AzurDrive]

Hello, everyone!
Has someone been lucky to fully clearing this out?

I have reCaptcha V3, and on my Cordova iOS app there is no window.grecaptcha object, means link to script is not even attached.

I have somewhat following settings

*COMMON*
 <access origin="https://*.google.com/*"/>
 <allow-navigation href="*://localhost"/>
 <allow-navigation href="https://www.google.com/recaptcha/*" />
    
platform=ios
 <preference name="Hostname" value="myapp.local" /> (cordova-plugin-ionic-webview)
 <allow-navigation href="http://myapp.local/*" />
 <allow-navigation href="https://www.google.com/recaptcha/*" />
        
 and in my google recaptcha console i have _localhost and myapp.local_ declared

still cant get it work on cordova iOS and Android.
Help, anyone?