reCaptcha usage in cordova/phonegap application

Question

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?

Answer 1

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 [email protected]
• 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);
    });
  });
  

Answer 2

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)