🚀⚡︎ How to Implement reCAPTCHA in Registration Page or Login Page of Experience cloud Site in Salesforce ⚡︎🚀

Hi Folks, In this blog we will try to understand how we can Implement reCAPTCHA in Registration Page of Experience cloud Site in Salesforce.

What is reCaptcha

reCaptcha is a CAPTCHA-style system that is used to verify that a computer user is human (normally in order to protect websites from bots).

Now, Let's start how to implement it.

Step 1:- Use the reCaptcha widget as follows:

The website owner must first register his site at https://www.google.com/recaptcha/admin and sign up to obtain a reCaptcha API key pair before using the widget on his website. The key pair contains two keys. The site key is one, and the secret key is another.

The site key is required to display the widget on the web page, whereas the secret key is used to authenticate the user using the site key and the user-submitted reCaptcha response. Because the secret key authorises communication between the website and the Google reCaptcha server, it must be kept private.

Click Submit button. After this you will get your site key and secret key.

Step 2:- Add Markup and ReCaptcha Keys to Your Sign-Up Form

1. Navigate to Setup and enter All Sites in the Quick Find box.
2. Click Builder next to the site that will host the visitor sign-up form.
3. Click the gear icon and click Edit Head Markup.

        4. Paste this code snippet into your Head Markup section. Substitute the site key that 

            Google gave you for the site key line in the snippet.

<!--reCaptcha v2 Checkbox-->

<script>

var grecaptchaReady = false;

var onloadCallback = function(){ grecaptchaReady = true; };

var verifyCallback = function(token) {

document.dispatchEvent(new CustomEvent('grecaptchaVerified',

{'detail': {response: token}}));

};

var expireCallback = function() {

document.dispatchEvent(new Event('grecaptchaExpired'));

};

var errorCallback = function() {

document.dispatchEvent(new Event('grecaptchaError'));

};

document.addEventListener('grecaptchaRender', function(e) {

onloadCallback = function() {

grecaptchaReady = true;

grecaptcha.render(e.detail.element, {

'sitekey': 'Your Site Key',

'callback': verifyCallback,

'expired-callback': expireCallback,

'error-callback': errorCallback

});

};

if (grecaptchaReady) {

onloadCallback();

}

});

document.addEventListener('grecaptchaReset', function() {

grecaptcha.reset();

});

</script>

<script

src='https://www.google.com/recaptcha/api.js?render=explicit&onload=onloadCallback'

async defer>

</script>

       

5. In the Settings section of your site, click Security. Choose Relaxed CSP from the  

    security level dropdown.
6. For the Clickjack protection level set to Allow Framing by Any Page.
7. Add www.google.com and https://www.gstatic.com.
8. Click CSP Trusted Sites under Trusted Sites for Scripts.

9. In the CSP Trusted Site Definition page that opens up, add www.google.com as a  

    Trusted Site. Save the changes. 

         10. Click Publish

    

    Step 3:- Create Your Custom Registration Page in LWC

     customRegistration.html

<template>

<lightning-card>

<div class="slds-p-around_medium">

<lightning-input label="First Name" onchange={handleFN}> </lightning-input>

<lightning-input label="Last Name" onchange={handleLN}> </lightning-input >

<lightning-input type="email" label="Email" onchange={handleEML}> </lightning-input>

<br>

<div class="slds-align_absolute-center">

<div class="recaptchaInvisible" >

</div>

</div>

<br>

<div if:true={showMessage}>

<p style="color: red;" > Please verify that you are not a robot </p>

</div>

<br>

<lightning-button label="Sign Up" onclick={handleRegister}></lightning-button>

</div>

</lightning-card>

</template>  

customRegistration.js

import { LightningElement,track } from 'lwc';

export default class CustomRegistration extends LightningElement {

firstName;

lastName;

email;

@track showMessage=false;

@track vrfyCaptcha=false;

connectedCallback()

{

document.addEventListener("grecaptchaVerified", (e) => {

if(e.detail.response!=null)

{

this.showMessage=false;

this.handleButton();

}

});

}

handleButton()

{

this.vrfyCaptcha=true;

}

renderedCallback()

{

var divElement = this.template.querySelector('div.recaptchaInvisible');

var payload = {element: divElement, badge: 'bottomright'};

document.dispatchEvent(new CustomEvent("grecaptchaRender", {"detail": payload}));

}

handleFN(event){

this.firstName=event.target.value;

}

handleLN(event){

this.lastName=event.target.value;

}

handleEML(event){

this.email=event.target.value;

}

handleRegister()

{

if(this.firstName == '' || this.lastName == '' || this.email == '')

{

// Show error to Complete these fields to the User

}

else

{

if(this.vrfyCaptcha==false)

{

// Showing Message to complete reCAPTCHA Verification

this.showMessage=true;

}

else

{

alert('Google Recatcha Verification Completed');

// Start Your Registration Process Like Creating Contact and then User in SF.

}

}

}

}

customRegistration.js-meta.xml

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

<apiVersion>55.0</apiVersion>

<masterLabel> Registarion Page with reCaptcha </masterLabel>

<isExposed>true</isExposed>

<targets>

<target>lightningCommunity__Default</target>

<target>lightningCommunity__Page</target>

</targets>

</LightningComponentBundle>

Step 4:- Replace the Existing Registration Component with our Custom LWC

1. Navigate to Setup and enter All Sites in the Quick Find box.
2. Click Builder next to the site that will host the visitor sign-up form.
3. Edit the Registration Component.

                   

Replace the existing Component with your LWC component. After replacing it will look like the below image:

Note: Don't worry about this error showing in the image. It is showing only in Builder not in user's Registration Page.

    Click Publish

Output-

If you have any comments or queries about this, please feel free to mention them in the comments section below.