Introduction
This is my first guide in this community, hope you guys will like it. 
I didn’t seem to find a guide in this community (nor on the web) about this component, so I decided to share it here.
Google reCaptcha is a fairly new component in Kodular added just recently in the Fenix update. It is a useful component that prevents malicious traffic in your apps. Created as a service by Google, it helps you identify whether the user is a human or a bot by requesting the user to perform some simple operations, such as selecting images.
The whole process is pretty simple, it was free, and not really complicated. You could do this in probably like 15 minutes.
Step 1. Setting Up Your Project
-
In your Kodular project, among all of the list of categories, navigate to the
category. In the category, drag out a “Google reCaptcha” component and place it into the Viewer. -
As we can see, the component has only 1 property, which is the Site Key. Don’t worry about it (for now).
- On the right-top corner of your project, you will see a tiny gear
icon, which is the Settings part of your project. Click on it. A dialog will then appear.
- In the list of the dialog, click on “Publishing” and you will find a field for you to fill in the package name.
- Set a package name for your app if you haven’t, and write that down on a piece of paper (or you can remember it for now).
- Good. Now, go to the official reCaptcha website on a new tab in your computer, which is here.
reCaptcha was mostly used to verify users on websites. But fear not, it’s almost the same as in apps.
- Fill in your app name in the “Label” field. A label, according to Google, “makes it easy for you to identify it in the future”.
- In the “reCaptcha type”, select “reCAPTCHA V2”, then “reCAPTCHA Android”.
- In the “Packages” field, enter the package name for your app.
- Accept the reCAPTCHA Terms of Service.
- Check if everything is correct, then click
. Good!
- After that, you will be redirected to a screen where it shows your “site key” and “secret key”. They are important, do not close the tab yet. For now, head back to Kodular.
Step 2. Programming
- In the Blocks section of Kodular, create two variables that identify the site key and the secret key of the reCAPTCHA of your app.
- Go back to the Designer and add two more components:
-
Add a button from
User Interfaceso that the user can verify if they are a robot or a human. It should say
. -
Add a snackbar from
User Interfaceso that the user knows whether the verification is successful or not. -
Add a Google reCaptcha component from the Google category if you haven’t. Paste the site key that we have previously got in the
Site Keyproperty.
- In the blocks, add these.
-
When the verification button is clicked, we open a prompt that allows the user to select images to verify if they are humans or not. We use the
PromptReCaptchamethod here. -
If they successfully finished the prompt and the
PromptSuccededevent is invoked, we need Google to validate the user. This is where the secret key comes in handy. We call theValidatemethod. -
If they failed to finish the prompt, that means an error has occurred, and the
PromptErroredevent will be fired. We will stop here to tell the user that an error has occurred, and that they should try again. -
When Google has validated the response, they will tell us whether it is successful or not. The
successparameter of theValidateResponseevent will tell us that.
A small note
This whole program will only work in the compiled app (APK), since the package name of the companion is different from the package name you registered.
Demo video
Downloads
APK: (using my keys) reCaptcha.apk (5.9 MB)
AIA: (remember to add your keys)
reCaptcha.aia (2.3 KB)
Thanks a lot!
