Ionic and reCAPTCHA


#1

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.


#2

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?


#3

Hi
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.


#4

is your login page lazy loaded?


#5

Hello,

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, ???


#6

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


#7

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


#8

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


#9

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


#10

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 ??


#11

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


#12

hello,

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

@NgModule({
  declarations: [
    HomePage,
  ],
  imports: [
    ReCaptchaModule ,
    IonicPageModule.forChild(HomePage),
  ],
  exports: [
    HomePage
  ]

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


#13

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


#14

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.


#15

Hello,
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


#16

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


#17

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


#18

I did it with:
https://www.primefaces.org/primeng/#/captcha
primeng also has some other nice components


#19

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 github.com/nombrekeff/ionic-recaptcha-plugin-android