Prerequisites

1. Google reCAPTCHA set for the Domain used by the Self Registration community page.
2. Client Key and Secret Key for the reCAPTCHA.
3. RIO Ready - Login and Register (Pre-Deploy) and RIO Ready - Login and Register packages are installed (see here).

Note: If you do not have a Google reCaptcha setup yet, please follow the instruction here to set your Google reCaptcha account (you will need a Google account for this).

Community Builder Setup

Add CSP Trusted Site

1. Login to Salesforce and go to “Setup”.
2. From Setup, in the Quick Find box, enter "CSP Trusted Sites".
3. Click "New Trusted Site".  
   
    
      
    
4. Enter a Name that can be easily recognized into the Trusted Site Name and put the following into the Trusted Site URL, and enable all CSP Directives:  
   
   www.recaptcha.net  
   
    
      
    
5. When complete, you can see recaptcha.net in the list:  
   
   

Set the reCAPTCHA Secret Key in Custom Setting

1. From Setup, in the Quick Find box, enter "Custom Settings".
2. Click on "Manage" for RIO Education Settings‍.  
   
    
      
    
3. Click on Edit at the top of the record then find the reCAPTCHA SecretKey field setting ( label = Captcha SecretKey ) and enter the reCAPTCHA Secret Key inside and then click Save at the top.
   
   
   
   
   

Note:

If you do not have Google reCAPTCHA yet, see this guide here.

If you are changing your Google reCAPTCHA account, then the secretKey above will need to be updated with your new secretKey.

If the reCAPTCHA is not appearing, check/tick the Enable Captcha field setting in the custom settings.

Setup Head Markup with reCAPTCHA script

1. From Setup, in the Quick Find box, enter Digital Experiences.
2. Go to “RIO Education Community” and click on "Builder".
3. Edit Head Markup for the Community by going to:  
   Settings -> Advanced -> Edit Head Markup.  
   
    
      
    
4. Paste the following into the Head Markup area then replace the sitekey value in the code with your reCaptcha sitekey, then click Save

<!--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': 'replace this with your ReCaptcha Site Key, keep the single quotes',
                'callback': verifyCallback,
                'expired-callback': expireCallback,
                'error-callback': errorCallback
            });
        };
        if (grecaptchaReady) {
            onloadCallback();
        }
    });
    document.addEventListener('grecaptchaReset', function() {
        grecaptcha.reset();
    }); 
</script>
<script src='https://www.recaptcha.net/recaptcha/api.js?render=explicit&onload=onloadCallback' async defer></script>
 

 ex:

Note: If you are changing your Google reCaptcha account, then the sitekey above will need to be updated with your new sitekey.

Set CSP Setting and allow script URL

1. Go to the Security & Privacy section in the same Settings page:  
   Settings -> Security & Privacy -> Security Level  
   
   Set the Security Level to:  
   
   Relaxed CSP: Permit Access to Inline Scripts and Allowed Hosts  
   
   
    
      
    
2. Check the Trusted Sites for Scripts and make sure they are active.
   
   If you have CSP Errors related to the reCAPTCHA script, click Allow URL:  
   
   
    
   
   We should then see the script in Blocked Resource that we just allowed moved into the Trusted Sites for Scripts section.

www.recaptcha.net
www.gstatic.com

CSP Error

This error "Can't Access Resources" indicates an issue with the Content Security Policy or CSP.

Please follow through the steps outlined above in the "Set CSP Setting and allow script URL" section above and ensure that all the blocked resources mentioned under CSP Errors that came from the 2 sources indicated "www.recaptcha.net" and "www.gstatic.com", are allowed to run.

Changing your reCaptcha account/site

If you have a new reCaptcha account or site that you wish to use for RIO Ready Registration's reCaptcha, then please change:

• the siteKey (in the community builder) that was mentioned in Setup Head Markup with reCAPTCHA script.
   
• the secretKey (in custom setting) that was mentioned in Set the reCAPTCHA Secret Key in Custom Setting with your new siteKey/secretKey pair.