1. Log in to the Kuika platform.
2. Select the project you will work on from the Apps screen.
3. Enter the UI Design module.

4. From the Elements panel on the left side, drag the Recaptcha element under the Interactive category and drop it on your screen.

In order to use the ReCaptcha element, different key information is required for each platform (Web, Android, iOS). These keys from the Google ReCaptcha service must be generated platform-specific. The key information received 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 the steps below to get Google ReCaptcha keys:

Getting WEB Key

1. Go to the Google ReCaptcha Key Generation page.

2. Click on the “Go to reCAPTCHA” button.

3. Continue by clicking the “Select a project” button.

4. If there is no project, create a new project with the New Project button.

5. Enter the project name and click the “Create” button.

6. On the page that opens, click the “Enable” button.

7. Then click on the “Create Key” button.

8. Fill in the “Display Name” field and select “Website” as “Choose Platform Type”.
9. Enter the domain name of your web page in the field that opens and click the “Done” button.

10. After the domain name is saved, select the relevant options from the Key Type field and click the “Create Key” button.

11. The created key will be listed on the page.
12. You can generate keys for Android and iOS applications by following similar steps.

Getting Android Key

1. Click on the “Create Key” button on the ReCaptcha page.
2. Fill in the “Display Name” field and select “Android app” as “Choose Platform Type”.
3. Enter the “Bundle ID”.
4. Save by clicking the “Done” button.
5. Select the required options and click the “Create Key” button.
6. The generated key will be listed on the page.

Getting iOS Key

1. Click on the “Create Key” button on the ReCaptcha page.
2. Fill in the “Display Name” field and select “iOS app” as “Choose Platform Type”.
3. Enter the “Bundle ID”.
4. Save it by clicking the “Done” button.

5. After registering the Bundle ID, we will continue with the Apple Developer settings field just below.
6. Log in to your Apple Developer account and go to Certificates, Identifiers & Profiles page.

7. Create a new “Private Key (.p8)” file by clicking the “+” button on the “Keys” tab.

8. Enter the “Key Name” and click on the “Register” button and download the .p8 file by clicking on the “Download” button.

The .p8 file can only be downloaded once.

9. Upload the downloaded .p8 file to the ReCaptcha page.

10. For the “Key Identifier” field, get the “KEY ID” of the key created in the “Certificates, Identifiers & Profiles” section.
11. For the “Team ID” field, use the code that appears under your name at the top right on the same page.
12. After the domain name is saved, select the relevant options from the Key Type field and click the “Create Key” button.
13. The generated key will be listed on the page.

Kuika ReCaptcha Integration

Up to this stage, we have created Web, Android and iOS keys. Now we will use the keys we have received on the Kuika platform.

If you are going to use it for mobile applications, you need to create a mobile application first. You can reach our related content to create a mobile application.

WEB Integration

1. Go to the “Configuration Manager” module.

2. In the “App Settings” tab and find the “Google Recaptcha” field. For detailed information, you can review our Configuration Manager content.
3. Click on the “Add New” button.

4. In the window that opens, fill in the “Name” field as desired.
5. Get the “Site Key” and “Secret Key” fields from the values in the Web Key generated by Google.
6. Go back to the Google Recaptcha page and click the Key Details button in the web key we created.

7. On the Details page, go to the Integrations tab and click on the “Integrate with a third-party service or plugin” button.
8. In the incoming window is the Secret Key.
   
   • “ID” value -> “Site Key”
   • “Secret Key” value -> “Secret Key”
9. After entering the required information, save it in the field in the Configuration Manager module. You can create a configuration for Android and iOS applications by following similar steps.

Android Integration

1. Go to the “Configuration Manager” module.
2. In the “Android” tab, scroll to the bottom of the page and find the “Google Recaptcha” field.
3. Click on the “Add New” button.
4. Fill in the “Name” field as desired.
5. In the “Site Key” field, enter the “ID” value of the Android Key you created.
6. Save after entering the required information.

iOS Integration

1. Go to the “Configuration Manager” module.
2. In the “iOS” tab, scroll to the bottom of the page and find the “Google Recaptcha” field.
3. Click on the “Add New” button.
4. Fill in the “Name” field as desired.
5. In the “Site Key” field, enter the “ID” value of the iOS Key you created.
6. Save after entering the required information.

After completing these steps, go back to the UI Design module.

Add Validation to the ReCaptcha element from 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 validation. If you need to logout, add the Logout action.

So, to add Recaptcha verification, you can add the Verify ReCaptcha Token action to the button that needs to be verified and the Logout action to the button that needs to be logged out. For more information, you can review the “Verify ReCaptcha Token” document.

Error and Troubleshooting

1. If verification fails, check key configurations in Google Console.
2. If you are getting errors in API calls, make sure the secret key is entered correctly.
3. If the reCAPTCHA element does not appear on the page, check the integration on the UI side and complete the missing actions.

Authorization

To manage access control at the element level, you can use the Authorization section in the Properties panel.

Access Types

Anonymous

Allows all users to view the element without logging in.

Restricted

Restricts access to only verified users or specific roles.

• Everyone: When enabled, all logged-in users can access the element.
• Roles: The roles allowed to access the element are selected here. To edit the role list, click the gear (⚙️) icon next to the Roles field to open the Role Management window. From this window, you can add new roles, create folders, or manage existing roles.

Unauthorized Behavior (Hide / Disable)

If the user does not have the required role, you can specify how the element should behave in the Choose field:

• Hide: If the user is not authorized, the element is completely hidden and does not appear on the screen.
• Disable: The element remains visible but becomes unclickable / unusable.

This setting is used to manage how unauthorized users encounter the element.

Visibility

Always Visible: The element is always visible.
Hidden: The element is hidden.
Sometimes Visible: The element becomes visible based on specific conditions.

When Sometimes Visible is used, AND / OR groups can be added directly, allowing visibility rules to be grouped and more complex scenarios to be managed easily.

To configure the setting:

• Select the element on the screen.
• Open the Properties panel on the right.
• Choose the appropriate option under Visibility.

Editability

• Enabled: Elements can be edited.
• Disabled: Element cannot be edited.
• Sometimes Enabled: The element can be edited or uneditable according to certain conditions.

Interface Design with Style Panel

By customizing your elements with the Styling Panel, you can create impressive interfaces for your web and mobile applications. In this section, you can configure the following settings:

• Layout: Sizing, alignment and padding settings. Settings include Size, Min Size and Align.
• Text: Font, style, color, size and spacing settings.
• Fill: Customize the background with color or images.
• Border: Add borders and corner radius settings.
• Shadow: Add a shadow effect to add depth to elements.

By following these steps, you can configure the Area Chart element to suit your needs.