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 domai

Solution 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)

Solution 2:

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);
    });
  });
  

Solution 3:

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