ReCaptcha

1. After logging in to the Kuika platform, open the project you will work on from the “Apps” screen.

     2. In the “UI Design” (1) module, drag and drop the ReCaptcha element (4) under the “Interactive” (3) category from the “Elements” (2) panel on the left side.

‍

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.

You can customize user access with “Anonymous Access” and “All Roles Access” authorization options on the screens and elements of your application. While “Anonymous Access” enables access without any account information query, “All Roles Access” provides access by verifying user account information.

For element level authorization, you can manage the security and user experience of your application by selecting the relevant element and editing the “Authorization” settings from the Properties panel.

It allows you to adjust the visibility of screens or elements. Visibility in Elements allows you to regulate visibility based on a specific state or condition. For each element, you can make it always visible, hidden, or visible and hidden depending on a condition.

1. Click on the element on the screen.
2. Open the “Properties” panel on the right side.
3. Click on the “Visibility” field and make one of the following selections according to the needs of your application. Kuika offers Always Visible, Hidden, Sometimes Visible options to control the visibility of the screens in your application.

• Always Visible: Ensures that the screens in your app are always visible. ‍
• Hidden: Allows hiding screens in your application. ‍
• Sometimes Visible: Makes screens in your application conditionally visible.

Allows you to make elements editable.

• Enabled: Selecting this option makes the element editable.
• Disabled: In this case, the element cannot be edited.
• Sometimes Enabled: This option means that the element is sometimes editable and sometimes not, depending on certain conditions.

By customizing your elements with the Styling Panel, you can create unique and impressive user interfaces in your web and mobile applications.

The sections defined below vary depending on the element.

• Layout‍: Here you can make visual adjustments such as sizing, alignment and padding of elements. These settings also affect the layout of other elements within the element. Properties include Size, Min Size and Align; however, some elements may not support the Display property.
• Text: The element's text properties can be edited here through font family, style, color, size, spacing and other options. This section supports all Text related adjustments.
• Fill: You can use the Fill setting to customize the element's background with color or images.
• Border: You can give your elements a more aesthetic look by adding borders and adjusting the corner radii.
• Shadow: You can add a shadow effect to elements used in web applications to give a sense of depth. However, the shadow feature may not be supported as some elements are not suitable for mobile applications.