Kuika's ReCaptcha element is used to protect your applications against bots and automated processes. By requiring user verification, it allows only real users to perform certain actions and blocks spam, malicious requests, or automated form submissions.
The Recaptcha element plays a particularly important role in security-critical scenarios such as form submissions, sign-ups, logins, contact forms, and critical process steps. User verification runs in the background, minimizing impact on user experience while enhancing application security.
The Recaptcha element is only supported in web applications.
1.1. Common Use Cases
Protecting form submissions: Used to prevent bot-generated spam submissions in contact forms, feedback forms, or support requests.
Sign-up and login screens: Provides user verification to prevent automated account creation or login attempts.
Password reset and verification steps: Reduces the risk of misuse in password renewal, email verification, or security steps.
Payment and critical transaction steps: Used to verify real users before creating orders, initiating payments, or sending important data.
2. Key Features
Provides protection against bots and automated processes. The Recaptcha element blocks automated and malicious requests to the application, ensuring that only real users can perform transactions.
Increases the level of security. It strengthens the overall security of the application against spam submissions, bot registrations, and automated attacks.
Ability to use the verification result in actions. Different action flows can be designed depending on whether the Recaptcha verification is successful or unsuccessful.
2.1. Settings Required to Use the ReCaptcha Element
To use the ReCaptcha element, different key information is required for each platform (Web, Android, iOS). These keys, obtained from the Google ReCaptcha service, must be generated specifically for each platform. The key information obtained separately for Web, Android, and iOS must be entered into the Google Recaptcha field in the Configuration Manager module specific to each platform to ensure the correct verification process.
Google Console ReCaptcha Settings
Follow these steps to obtain Google ReCaptcha keys:
Continue by clicking the “Select a project” button.
If you don't have a project, create a new one using the New Project button.
Enter the project name and click the “Create” button.
On the page that opens, click the “Enable” button.
Then click the “Create Key” button.
Fill in the “Display Name” field and select ‘Website’ as the “Choose Platform Type”.
Enter your website's domain name in the field that opens and click the “Done” button.
Once the domain name is saved, select the relevant options from the Key Type field and click the “Create Key” button.
The generated key will be listed on the page.
You can follow similar steps to generate keys for Android and iOS apps.
Getting an Android Key
Click the “Create Key” button on the ReCaptcha page.
Fill in the “Display Name” field and select “Android app” as the “Choose Platform Type”.
Enter the “Bundle ID”.
Click the ‘Done’ button to save.
Select the required options and click the “Create Key” button.
The generated key will be listed on the page.
Getting an iOS Key
On the ReCaptcha page, click the “Create Key” button.
Fill in the “Display Name” field and select “iOS app” as the “Choose Platform Type”.
Enter the “Bundle ID”.
Click the “Done” button to save.
After registering the Bundle ID, we will continue with the Apple Developer settings field immediately below.
Log in to your Apple Developer account and go to the Certificates, Identifiers & Profiles page.
From the “Keys” tab, click the “+” button to create a new “Private Key (.p8)” file.
Enter the “Key Name,” click the ‘Register’ button, and then click the “Download” button to download the .p8 file.
The .p8 file can only be downloaded once.
Upload the downloaded .p8 file to the ReCaptcha page.
For the “Key Identifier” field, take the “KEY ID” of the key created in the “Certificates, Identifiers & Profiles” section.
For the “Team ID” field, use the code displayed under your name at the top right of the same page.
After registering the domain name, select the relevant options from the Key Type field and click the “Create Key” button.
The generated key will be listed on the page.
Kuika ReCaptcha Integration
Up to this point, we have created Web, Android, and iOS keys. Now we will use the keys we have obtained on the Kuika platform.
If you are going to use it for a mobile application, you must first create a mobile application. Mobile application You can access our relevant content to create a mobile application.
WEB Integration
Go to the “Configuration Manager” module.
Find the “App Settings” tab and the “Google Recaptcha” field. For detailed information, you can review our Configuration Manager content.
Click the “Add New” button.
Fill in the “Name” field as desired in the window that opens.
Get the “Site Key” and “Secret Key” fields from the values in the Web Key created by Google.
Return to the Google Recaptcha page and click the Key Details button in the web key we created.
On the Details page, go to the Integrations tab and click the “Integrate with a third-party service or plugin” button.
The window that appears will contain the Secret Key.
“ID” value -> “Site Key”
“Secret Key” value -> “Secret Key”
After entering the required information, save it in the Configuration Manager module. You can create a similar configuration for Android and iOS applications by following the same steps.
Android Integration
Go to the “Configuration Manager” module.
In the “Android” tab, scroll to the bottom of the page and find the “Google Recaptcha” field.
Click the “Add New” button.
Fill in the ‘Name’ field as desired.
In the “Site Key” field, enter the “ID” value of the Android Key you created.
After entering the required information, save it.
iOS Integration
Go to the “Configuration Manager” module.
Scroll down to the bottom of the “iOS” tab and find the “Google Recaptcha” field.
Click the “Add New” button.
Fill in the “Name” field as desired.
Enter the ‘ID’ value of the iOS Key you created in the “Site Key” field.
Save after entering the required information.
After completing these steps, return to the UI Design module.
Add Validation to the ReCaptcha element using the ADD VALIDATION button on the right side.
Then, add the OnClick→ Verification→ Verify ReCaptcha Token action to the button where you want to add the Recaptcha verification. If you need to log out, add the Logout action.
In other words, to add Recaptcha verification, you can add the Verify ReCaptcha Token action to the button that requires verification and theLogout action to the button that requires logout.
If verification fails, check the key configurations in Google Console.
If you are receiving errors in API calls, ensure that the secret key is entered correctly.
If the reCAPTCHA element is not visible on the page, check the UI-side integration and complete any missing actions.
2.2. Actions That Can Be Added to the Recaptcha Element
The Recaptcha element does not support any actions and does not initiate any direct operations.
It only provides user verification status for control purposes and is used as a control point for security. Actions dependent on the verification result should be managed through elements or processes outside of Recaptcha.
3. How to Use the ReCaptcha Element?
In this section, we will cover the end-to-end use of the reCAPTCHA element through example scenarios.
Scenario: Sign In Screen – Secure Login with reCAPTCHA
In a business management or enterprise application, the Sign In screen is configured with integrated reCAPTCHA verification to allow users to access the system securely. This screen aims to prevent unauthorized access and automated login attempts while offering a simple user experience.
In the scenario:
The user initiates the login process by entering their email address and password.
Before the login process, user interaction is verified with the “I'm not a robot” reCAPTCHA verification.
The login process cannot be completed without completing the reCAPTCHA verification, and an informative warning message is displayed to the user.
Once verification is successfully completed, the user logs into the system and is directed to the application's main screen.
Step 1 - Adding ReCaptcha to the Ready Sign In Screen
Open the UI Design module:
Follow the necessary steps on the ReCaptcha Settings page on the Academy to create the Site Key and Secret Key.
The ReCaptcha type used must be set to V2 Checkbox.
In the Screens area on the left side panel, click on the Signin screen that comes ready for each project.
Add the Elements > Interactive > ReCaptcha element to the login button on the screen.
Click on the space next to the ReCaptcha element and set it to Col > Styling > Layout > Align > Center Vertically and Horizontally.
There is no styling area for ReCaptcha.
Step 2 - Adding the Verification Action
Click on the Sign In to Your Accountbuttonelement on the Sign in page. Add the Add Action > onClick > Verification > Verify Recaptcha Token action to the Button element.
Hold down the added action on the action box and move it to the first row.
Define the token in Components > Recaptcha > token in the token field within the Verify Recaptcha Token action.
Click on the Sign In to Your Accountbuttonelement and add a condition to the Sign In action within the defined actions using the Add Condition option.
Define the condition as Field > Action Result > VerifyRecaptchaToken and define the other fields as follows.
Finally, click on the ReCaptcha element and add validation from the Add Validation field.
If no additional validation is added, the element's own notification structure is used.
Click on Condition 1 and define the condition as follows.
Update the Invalid Message field to “Please check the reCAPTCHA verification.”
Preview
When the application is tested, it is configured so that reCAPTCHA verification is mandatory during the login process on the ready login screen. The user cannot log in without completing the verification, and an informative warning message is displayed on the screen when verification is not performed. This structure ensures that the login process is managed in a secure and controlled manner, while providing an additional layer of security against unauthorized and automated access attempts.
4. Common Properties
Some fields on the reCAPTCHA element are used commonly across all UI elements. Therefore, detailed explanations of the following properties can be found in the relevant general guide pages:
