Google reCAPTCHA

Introduction

Google reCAPTCHA is a widely used extension that helps protect websites and applications from spam and abuse by verifying that users are not bots. It is developed by Google and is available as a service that can be easily integrated into websites and applications.

Steps to Use Google reCAPTCHA Extension

Go to Extensions in Fynd Platform.
Click Google reCAPTCHA extension.
Select the desired sales channel. Here, we have selected ‘Whitesplash’.
The customer can choose from Fynd’s default reCAPTCHA and Private Google reCAPTCHA.

Fynd’s Default reCAPTCHA

Invisible reCAPTCHA (Score-based): Fynd's extension analyzes how visitors behave on the website. It gives each visitor a score, indicating the likelihood of them being a bot. If the score is good, the user can log in, register, or use the "Contact Us" feature without any extra steps.
Fallback to Checkbox-based reCAPTCHA: If the score is too low and there's suspicion that the user might be a bot, the extension switches to the checkbox-based reCAPTCHA. The user is then asked to click on the "I am not a robot" challenge to prove they are human. Only when the checkbox is ticked, the suspicious users can proceed with the login or other interactions.

Enable/Disable the reCAPTCHA functionality by performing following steps

Go to Extensions on the Fynd Platform.
Click the Google Re-captcha Extension.
Select the desired sales channel.
Toggle the button to enable Google reCAPTCHA extension.
Click on Save button.
The Google reCAPTCHA logo appears on the location it is enabled for.

How to include Google reCAPTCHA in themes

Click Themes in Appearance section of sales channel on Fynd Platform.
Click Edit.
Select Login from SYSTEM PAGES dropdown.
Go to Page section
Select “Google reCAPTCHA” extension from the list of Extension in Above Login Button section (Refer Image)
Click Save.

How to add Re-captcha on any page in custom theme

To integrate Google reCAPTCHA, add the following settings code into your custom login/register/contact-us page, kindly place it between the template and script tags:

<!-- Your HTML template code here -->
<settings>
{
"props": [
    {
      "type": "extension",
      "id": "extension",
      "label": "Extension Positions",
      "info": "Handle extension in these positions",
      "positions": [
        {
          "value": "<setting-id>",
          "text": "<setting-caption>"
        }
      ],
      "default": {}
    }
]
}
</settings>
<!-- Your JavaScript code and closing tags here -->

To display the "I'm not a robot" checkbox at the desired location within your template, please add the following code in your template:

<fdk-extension
     v-if="getTemplates('<setting-id>').length"
     :templates="getTemplates('<setting-id>')"
/>

Add the below mentioned function getTemplates(position) to your Vue component's methods

getTemplates(position) {
   return this.page_config.props?.extension?.[position] || [];
}

Perform fdk theme sync.

Private Google reCAPTCHA

Using a private Google reCAPTCHA involves a few key steps to integrate it into your website or application. Here's a general outline of the process-

Register Your Site and Get API Keys

Click Google reCAPTCHA website link and register your site.
Register your website or application by providing the necessary details.

Label- Enter the label name to identify your website in future. For e.g., V3 key.
Domains- Enter a valid domain name for your website. For e.g.,link
reCAPTCHA type- Google reCAPTCHA offers different types of CAPTCHA challenges based on its versions. Select the score based version (v3).
Submit- Once all the details are entered, click submit and the keys are generated.
Google will provide you with two API keys: a Site key and a Secret key. These keys are essential for integrating reCAPTCHA on your site.

Score Based (v3)

reCAPTCHA v3 is a version of Google's reCAPTCHA service that operates based on a score system.
Customise the settings and actions as per your requirements.
Enter the Site key and Secret key generated during the registration process.
Select whether you want to show/hide the reCaptcha logo.
Select the range of v3 spam score threshold-
For example, if the score is high (close to 1.0), you can proceed with the form submission or login attempt without any additional challenges.
If the score is low (close to 0.0), you might want to implement additional verification steps or restrict access to certain features.
Configure the settings and click the save button.

Steps include Google reCAPTCHA in themes :

Click Themes in Appearance section of sales channel on Fynd Platform.
Click Edit.
Select Login from SYSTEM PAGES dropdown.
Go to Page section
Select “Google reCAPTCHA” extension from the list of Extension in Above Login Button section (Refer Image)
Click Save.

Challenge( v2)

Google reCAPTCHA v2 is a security feature used on websites to protect against spam and bots. It comes in two types:

Checkbox reCAPTCHA

It shows a checkbox with the message "I'm not a robot."
Users click the checkbox to confirm they are human.
Sometimes, additional challenges are shown if it suspects suspicious activity.

Invisible reCAPTCHA

It works in the background without showing any visible challenge.
Automatically verifies if the user is human based on their interactions.
If unsure, it may show an invisible challenge to confirm user authenticity.

Enter the google generated Site key and Separate key.
Select the theme color.
Save the configuration settings.

Steps include Google reCAPTCHA in themes :

Click Themes in Appearance section of sales channel on Fynd Platform.
Click Edit.
Select Login from System Pages dropdown.
Go to Page section
Select “Google reCAPTCHA” extension from the list of Extension in Above Login Button section (Refer Image)
Click Save.