reCAPTCHA Verification

Published on November 3, 2021

You may have seen a dialog like this before when you are filling forms or creating accounts (on the right/bottom). It uses a servie called Google reCAPTCHA, which verifies that your users are humans, not robots.

Recently, Kodular added the Google reCAPTCHA component to the Google category, which many users have started to use. Let's try that out!

Note: Please read this carefully, otherwise you may lose information which are important.

🏷️ Tags: #kodular, #tutorials-and-guides, #google

Blocks Overview

Step 1. Setting up your project

  1. Create a new project.

  2. After you have opened your project, click on the Settings icon near the Designer button.

3. Go to Publishing.

4. Enter a package name for your project (for example, I used io.gordonlu.firebaseauthentication). A package name is used to identify your app. It should be something in the format of following: com.yourname.appname or io.yourname.appname or yourorganization.categoryname.appname, but it is completely up to you to design your own package name!

From @The_K_Studio:

"When user kept it empty, then Kodular will assign a default package name which is based on your email id which is used for login to your Kodular creator account.

For example. If your login email is :

example@test.com

then default package name will be :

io.kodular.example.yourappname"

Step 2. Setting up reCAPTCHA service (demo)

  1. Go to https://www.google.com/recaptcha/admin/create.

  2. You will see an interface for you to register your app for reCAPTCHA service.

  3. Fill in your package name for your project just now for the textbox for Label just for you to identify your project later.

  4. Select reCaptcha v2 for reCaptcha type. Then, you will see another list options opened for you: select reCaptcha Android.

  5. Enter your package name again next to the Add icon in Packages.

  6. Accept the reCaptcha terms of service.

  7. Click 'Submit'.

  8. You will see a new screen opened up for you. It has a Site key and a Secret key. Do not close this tab as we are going to use it later.

recaptcha.mp4

Step 3. Editing the Designer

  1. Drag out a Button and set its text to Verify reCAPTCHA.

  2. Drag out a Label and clear its text.

  3. Drag out a Snackbar to report the errors that may occur.

  4. From the Google category, drag out a Google reCaptcha component.

  5. Copy the Site key from the tab just now.

  6. Go to the Properties of Google_reCaptcha1, the Google_reCaptcha component you added just now.

  7. Paste the site key to the Site Key property.

  8. Navigate to the Blocks editor.

Step 4. Editing the Blocks

  1. Copy the secret key in the tab you opened in Step 2.8.

  2. Add a new variable and rename it to secret_key.

  3. Paste your secret key as a text block and drag it to the variable.

4. Drag the following blocks to the viewer. They generate a prompt for the user to choose, but they aren't shown yet.

5. Now, add the following blocks. The Prompt reCaptcha method triggers either the Prompt Succeeded or the Prompt Errored events.

6. To report an error, use these:

7. Last but not least, you must include this to indicate whether the response is successful or not. The Validate method triggers the Validate Response event.

Step 5. Testing your app out

Note: since your package name is not the package name of Kodular companion, do not test it with Kodular Companion. Compile/build the app to test it.

Great! You have finished this tutorial!

Make sure to check out the Kodular community for tips, and also try new things with the Creator!