angular - reCAPTCHA Ionic/cordova on Android

Question

i'm facing an issue with reCaptcha for Android on my Ionic app. I use https://github.com/DethAriel/ng-recaptcha in my form like this :

<ion-list no-lines>
   <ion-item no-padding>
      <ion-input [(ngModel)]="form.email" (ionChange)="checkButton()" name="email" type="email" placeholder="{{ 'pages.get_started.slide_1.input_1' | translate }}" clearInput="true"></ion-input>
   </ion-item>
   <ion-item no-padding>
      <ion-input [(ngModel)]="form.username" (ionChange)="checkButton()" name="username" type="text" placeholder="{{ 'pages.get_started.slide_1.input_2' | translate }}" clearInput="true"></ion-input>
   </ion-item>
   <ion-item no-padding>
      <ion-input [(ngModel)]="form.password" (ionChange)="checkButton()" name="password" type="password" placeholder="{{ 'pages.get_started.slide_1.input_3' | translate }}" clearInput="true"></ion-input>
   </ion-item>
   <ion-item no-padding>
      <re-captcha [(ngModel)]="form.captcha" (ionChange)="checkButton()" (resolved)="checkButton()" #captchaControl="ngModel" name="captcha" siteKey="{{ captchaKey }}" required></re-captcha>
   </ion-item>
</ion-list>

I use the correct public key with reCaptcha for Android. So normally it will check my package name. But i'm having a popup : Cannot contact reCAPTCHA service. Check your connection and try again. plus a Domain not valid for the sitekey. on reCaptcha view.

I had tried multiple package name in case it was that but no result. I'm testing this on my phone with no debug arguments so no localhost or things like this. It's working fine on browser platform with respective public key.

What can I do for resolve this ?

Answer 1

I ran through the same problem and the solution in my case was to add the cordova webview plugin. This way, it's not needed the ReCaptcha for android, it will work with the reCaptcha for websites.

Uninstall it if you already have installed: cordova plugin rm cordova-plugin-ionic-webview

Install latest version: cordova plugin add cordova-plugin-ionic-webview@latest

I used the Ngx-Captcha version 5.0.4 to be able to use on ionic 3. Currently, I'm using the reCaptcha V3, but it works to version 2 too.

[IOS]

In order to reCaptcha work in IOS with the WebView, you need to add the following to the config.xml: <allow-navigation href="https://www.google.com/recaptcha/*" />

Don't forget to add 'localhost' domain in the reCaptcha console.

For more details on how to use the ngx-captcha, check this question: how can I install correctly ngx-recaptcha on my project?