Tip of the week # 213 : Set up reCAPTCHA for Experience Cloud Site

Set up reCAPTCHA for Experience Cloud Site

Description : Set up reCAPTCHA in the Experience Cloud sites to ensure that the provider applications are filled in by humans, not bots..
Steps are following :

---

1. Generate a Google reCAPTCHA site key, and copy the site key. For more information,
2. From Setup, in the Quick Find box, enter Digital Experiences, and select All Sites.
3. Click Builder next to the Experience Cloud site for your providers.
4. Configure the security settings
   • In the Settings section, select Security and Privacy.
   • Click Edit Head Markup, and then paste this code:
   • Make sure Lightning Locker is turned on.
   • To add Google as a trusted site, click Add Trusted Site. For Name, enter Google. For URL, enter https://www.google.com. Make sure Active is selected, and then click Add Site.
   • To add gstatic as a trusted site, click Add Trusted Site. For Name, enter gstatic. For URL, enter https://www.gstatic.com. Make sure Active is selected, and then click Add Site
5. • In the Settings section, select Security and Privacy.

   • Click Edit Head Markup, and then paste this code:

     
         
     		<script src="https://www.google.com/recaptcha/api.js"></script>
     <script type="text/javascript">
     /**
     * The custom LWC captcha component will fire 'grecaptchaRender' event to signal its readyness to show the Captcha.
     *
     * Below handles that event, renders the captcha component on the div thats passed in, and sets it up to fire various events based on the captcha life cycle.
     */
     document.addEventListener('grecaptchaRender', function(e) {
     grecaptcha.render(e.detail.element, {
     
     'callback': e.detail.callback,
     
     'expired-callback': e.detail.expiredCallback,
     
     'error-callback': e.detail.errorCallback,
     
     'sitekey' : e.detail.sitekey
     
     });
     
     });
     
     </script>
     
     Save your changes.
         
     	
     	

6. Add Google and Gstatic to the list of trusted URLs in your org:
   Click New Trusted URLs and add these URLs to the trusted URLs list: https://www.google.com and https://www.gstatic.com
7. From Setup, in the Quick Find box, enter Remote Site Settings, and select it. Click New Remote Site and add these URLs to the trusted URLs list:
   1. API name: Google
   URL: https://www.google.com
   Description: Enter a description.
   2. API name: gstatic
   URL: https://www.gstatic.com
   Description: Enter a description.
   

Happy Sharing...

Everyone has their own favorites, so please feel free to share with yours contacts and comments below for any type of help!

Use below Chrome Extension for Productivity and share your feedback. Download Link : https://chromewebstore.google.com/detail/quick-shortcuts/ldodfklenhficdgllchmlcldbpeidifp?utm_source=ext_app_menu