reCaptcha usage in cordova/phonegap application

问题

I am trying to integrate google recaptcha with cordova html5 application. But cordova uses file protocol in the application. So using captcha in the app gives "Error: invalid domain for site key".

I am using cordova 3.5.0 for building the application and <access origin="*" /> is added in config.xml.

Is recaptcha can be used only for web applications and not for hybrid/native aapplications?

回答1:

reCaptcha cannot be used directly in a cordova project because of protocol issues. Either

-we have to load reCaptcha url in a separate webview

-Use secure token way of loading reCaptcha that they introduced recently (https://developers.google.com/recaptcha/docs/secure_token)

回答2:

You should now use your App package name (November 2017). As part of your reCaptcha configuration you specify the domains or mobile package names that will use the service. If you use "localhost" for development, you must add it to the list of domains.

For mobile users, the API key pair is only unique to the specified package names (for example, com.google.recaptcha.test).

However, if your domain or package name list is extremely long, fluid, or unknown, you have the option to turn off the domain or package name checking on reCAPTCHA's end, and instead check on your server.

Use of secure tokens is not advised as this is now a depricated feature.

Reference:

Domain/Package Name Validation

回答3:

I successfully made it working by using cordova-plugin-ionic-webview

Note that my project was not a Ionic project, so any cordova project can use it

What I did :

Configure Re-Captcha admin console to allow myapp.local domain
Configure cordova-plugin-ionic-webview preferences :
- Add a <preference name="Hostname" value="myapp.local" /> in config.xml file
- Add a <allow-navigation href="https://www.google.com/recaptcha/*" /> in config.xml file
- Add a <allow-navigation href="http://myapp.local/*" /> in android's specific section in config.xml file
Install ionic webview plugin : cordova plugin add cordova-plugin-ionic-webview@4.1.3
Add recaptcha (v3 in my case) to your index.html file : <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?render=MY_RECAPTCHA_KEY_HERE"></script>

Call recaptcha API in your JS code :

grecaptcha.ready(function() {
  grecaptcha.execute("MY_RECAPTCHA_KEY_HERE", {action: 'my-page'}).then(function(token) {
    console.log("Acquired recaptcha token : ", token);
  }, function() {
    console.error("ReCaptcha token acquisition failed", arguments);
  });
});

来源：https://stackoverflow.com/questions/32611205/recaptcha-usage-in-cordova-phonegap-application

标签

javascript

cordova

phonegap-build

recaptcha