How to Add reCAPTCHA to an Ionic App

reCAPTCHA is a nice service that usually added to a registration form and helps prevent bots from registering automatically. The service usually displays a small and easy challenge to a human but which would be difficult for a bot to answer. In this blog post we are going to show you how to add reCAPTCHA to an Ionic app.

Let’s start.

Create a new Ionic app based on Ionic Blank template.
Go to https://github.com/vividcortex/angular-recaptcha, download vcRecaptcha.js, and unzip the file.
Inside the App Builder, go Create New > JavaScript, name it vcRecaptcha, check Upload from file and select the angular-recaptcha.js file from your drive. For type, select Angular module and click Create JavaScript.
Now, open Screen1 and add an HTML component to the page.
Under the Properties panel, click Edit and add the following code:
```
<div vc-recaptcha key="'XXXXXXXX'" on-success="onSuccess()"></div>
```
where 'XXXXXXXXX' is the key generated on https://www.google.com/recaptcha/admin (your key must be inside the double quotes).
Switch to Scope view and add a new function, name it onSuccess, and add the following code to the editor:
```
Apperyio.navigateTo("Success");
```
onSuccess() is the scope function that executes when the correct Captcha is entered (here, another page will open).
To demonstrate this, create a new page and name it Success. Add a Text component to the page and paste Welcome! for its Text property.
Also, if you want to add a solving annotating images to your reCaptcha, go to Project > Routing, click Manage dependencies for Screen1, and check reCaptcha.

That’s it. You are ready to test your app with the reCAPTCHA.

reCaptcha example.

Looking for more examples? Check out our sample apps list. Every app has preconfigured app UI and app backend for you to try.

Blog