Ionic and reCAPTCHA

Hi everyone,
Has anyone integrated an Ionic app with captcha?, I know this is for prevent bots and that stuff, but I’m creating a PWA so It will be in a domain. I found this but I didnt understand how this guy made it work Ionic CAPTCHA. If anyone has any idea or any documentantion how could I implement this I will appreciate it.

First try to find a angular module for it. Your guy uses a angularJS plugin, maybe you can find one for angular.

second: Why do you need a captcha - for what purpose? access to your PWA or submiting a form?

thanks for replying, I need it for my app’s login… After searching I came across with this angular and recaptcha. They use angular2-recaptcha but I really dont know how do I implement it? I will appreciate if you can guide me.

is your login page lazy loaded?


maybe it is a try worth. Install it like described without the part with SystemJS config.

systemjs seems to be a modul loader.

I’am a bloody beginner in web things and maybe I make me now to a totally complete idiot, but

Isn’t webpack this doing now and more?

Best regards, ???

Yes, it is lazy loaded and of course the root page

I will try out and I will let you know if it works, thanks for replying!

ok, when its the root page you need to use app.module.ts as your module
When the Page is in your Entry components

And when you imported it in the module you can use the element it in your template

Im sorry, but I didnt get it and actually I checked out the app.module.ts and the root page is “MyApp” and I have my loginPage set as root in app.component.ts.

What I have to insert in the Entry compoments, the reCaptcha module ??

I asked if you had your page in there, you have to insert the reCaptcha module into imports and you have to import it on the top of the app.modules file


whgen your homePage is lazy loaded, then you should have a homepage.module.ts.

In the head

import { ReCaptchaModule } from 'angular2-recaptcha';

and you should have something like

  declarations: [
  imports: [
    ReCaptchaModule ,
  exports: [

now you can use it in your hml like a tag

<re-captcha site_key="<GOOGLE_RECAPTCHA_KEY>"></re-captcha>

If you eagerly load (thanks aaron) you make the same in app.module.ts, but can’t use both.

Best regards, anna-liebt

1 Like

So having the module imported, I only have to invoke their methods? thanks a lot for your help!

Honestly I thought I would be more difficult, at the begining I was thinking to try the way you are saying… thanks a lot for your help.

One last thing maybe you both know about this form.

take a look to methods section of documetation, how to grab a reference with @ViewChild and use it. Also aware of livecycle. @ViewChild reference is available at

ngAfterViewInit() {

You also need from google a key.

Best regards, anna-liebt

1 Like

Oh man…what have we done…I hate reCaptcha.

1 Like

I do too, if it was up to me I wont implement it, but well here I am. I will use the domaing I have in this moment to get the key, but I found some documentation that the domain to get the reCAPTCHA’s key has to be inside the project.

anna again thanks a lot for helping me, cheers

I did it with:
primeng also has some other nice components

Hi, I ended up making a plugin for this purpose, as we couldn’t get it working, and it was needed. Check it out and check if it’s what you need