How to Integrate Google reCaptcha v3 into the Salesforce Experience Site

Experience Cloud Sites in Salesforce are used to create and manage digital experiences for their customers, partners, and employees. These sites can be of many forms including customer portals, partner communities, employee intranets, and public-facing websites. These sites use Google reCAPTCHA to improve security by protecting web pages from spam and abuse caused by automated bots. Integrating reCAPTCHA into these experiences adds an extra layer of protection. This post will integrate Google Recaptcha v3 into the Salesforce experience site.

What is reCAPTCHA v3?

reCAPTCHA v3 is the latest version of Google’s reCAPTCHA service, which protects websites from spam and abuse by distinguishing between human users and bots. Unlike previous versions, reCAPTCHA v3 does not require users to complete tasks such as identifying objects in images or selecting checkboxes. Instead, it operates in the background and assigns a score to each user interaction, indicating whether it is legitimate or automated.

Benefits of reCAPTCHA v3

1. reCAPTCHA v3 works without disrupting the user experience. It examines user behaviour on the page to determine whether the user is a human or a robot.
2. reCAPTCHA v3 assigns a score between 0.0 and 1.0 to each request, with 1.0 indicating a strong likelihood that the user is human and 0.0 implying bot-like behaviour. Site administrators can use these scores to determine how to handle requests, such as granting access, requiring additional verification, or blocking the interaction.
3. Website owners can establish custom thresholds to determine what scores are acceptable. For example, they may choose to challenge users with a score below 0.5 by requiring them to complete additional verification steps.
4. Because it runs in the background, reCAPTCHA v3 significantly reduces friction for legitimate users, resulting in a more seamless and less intrusive experience than previous versions.

How reCAPTCHA v3 Works?

• Behaviour Analysis: reCAPTCHA v3 analyzes user interactions like scrolling, mouse movements, and keypresses to determine whether the user is a human or a bot.
• Machine Learning: It uses machine learning models trained on massive amounts of data to distinguish between normal user behaviour and suspicious activity.
• Score Generation: After analyzing the behaviour, reCAPTCHA v3 calculates a score and sends it to the website server. The website can then take the appropriate action based on the score.

Implement Google reCaptcha v3 in Salesforce Experience Cloud site

To implement Google reCaptcha v3 in Salesforce Sites, we need to follow the below steps

1. Register Experience Cloud Site in Google reCaptcha
2. Create Static Resources to enable Google reCaptcha
3. Create LWC to add reCaptcha in Experience Cloud Site
4. Test reCaptcha

1. Register Experience Cloud Site in Google reCaptcha

To register your experience cloud sites in Google reCaptcha, go to the site https://www.google.com/recaptcha. Open v3 Admin Console to start configuration.

This will open the website registration page. If you have already registered sites then it will show the below page. To add reCaptcha for a new site, click the plus (+) icon. This will open the site registration page.

If you have not registered any site then it will show below the registration page. Add below required information –

1. Label – Put unique labels like Patient Care Site etc.
2. reCaptcha type – Score Based (v3)
3. Domains – Put experience cloud site URL without HTTPS. You can add multiple sites also.

Continue to the next step to get the reCaptcha site key and secret. We required this in configuring reCaptcha in Salesforce.

2. Create Static Resources to enable Google reCaptcha

Create an HTML file that contains code for enabling client-side captcha validation. It will generate a token that we can pass to the LWC code using the postMessage feature for server-side validation.

This code is available from the Integration tab of Cloud Console.

It will show the reCaptcha setting for the domain. Go to the Integration tab and get the code from the top 2 points from the section Add reCaptcha to your website.

3. Create LWC to add reCaptcha in the Experience Cloud Site

Create an LWC to add the above-created HTML. This LWC will be used to verify user action using server-side verification. We can use Apex callout to perform site verification.

LWC Code

isReCaptchaValid method will be used to validate the token on the server side. Based on the response and business requirement you can build your business flow like showing another form when reCaptcha validation is not successful.

Apex Code (Server Side Verification)

We can verify the client-side generated token from Google reCaptcha API. We will call Google API from Apex to verify it. We will require a Named Credential to call Google API. We can create a Legacy Named Credential for this.

Google Captcha API Url – https://www.google.com/recaptcha/api/siteverify?secret={Recaptch Secret Key}

Replace {Recaptch Secret Key} with your actual secret key generated from step 1.

We will use this Named Credential in Apex Callout.

Add this Apex class to Experience Cloud Profile. Otherwise, you will get Apex permission issues.

4. Add LWC to Experience Cloud Sie and Test reCaptcha

Add the above-created LWC to the experience cloud site and test the page. It might require a publishing site.

References:

• Google Recaptcha V3 Implementation in Lightning Web Component
• How to use Google reCAPTCHA v3 in Lightning Web Component

Related Posts

• Ultimate Guide to URL Accessibility in LWC
• Dynamically Instantiate Components in LWC
• Generic Notification Component in LWC
• Reusable Custom Calendar LWC using FullCalendar Js Library
• Custom Toast with custom duration In LWC
• Dynamic Interaction Between Two LWCs
• Sending Wrapper object to Apex from LWC
• HeatMap Chart In LWC
• Generate and Create Signature in LWC

Related Posts

1. Optimizing Salesforce Apex Code
2. Optimizing Loop in Apex Code
3. Handle Heap Size for Apex Code Optimization
4. Enhance Apex Performance with Platform Caching
5. Apex Trigger Code Optimization
6. Optimize Code by Disabling Debug Mod
7. Optimize Apex Code by Metadata Caching

Need reCaptcha Implementation?

If you need reCaptcha implementation in your application, please get in touch with us.