reCAPTCHA Configuration Steps
reCAPTCHA Configuration Steps
STEP 1: Experience Builder Settings
In Experience Builder → Settings → Security,
Set the Script Security Level to “Allow Inline Scripts and Script Access to Whitelisted Third-party Hosts”
Add the following Trusted Sites for Scripts
  • https://www.google.com
  • https://www.gstatic.com
    • STEP 2: Include script to Head Markup
    Navigate to tab “reCAPTCHA Configuration” to get the script tags.
    In Experience Builder → Settings → Advanced, click on “Edit Head Markup”
    Copy the script tags to Head Markup.
    STEP 3: Update Custom Settings with Google ReCaptcha Keys
    Navigate to tab “reCAPTCHA Configuration”
    Update SiteKey and SecretKey
    Save.
    STEP 4: Add permission set to guest user

    Experience Builder -> Settings --> Guest User Profile --> View Users --> Permission Sets

    Click "Edit Assignments" and add permission set "reCaptcha for Community"

    STEP 5: Use reCAPTCHA component in Lightning Aura Component 
                                
    <aura:component implements="forceCommunity:availableForAllPageTypes"> 
        <lightning:input label="Name" name="name" /> 
        <lightning:textarea label="Message" name="Message"/> 
        <niantec:recaptcha aura:id="nicaptcha" 
                              captchaType="v2-checkbox" 
                              badge="inline" 
                              action="homepage" 
                              theme="light" 
                              oncallback="{!c.handleCallback}"
                              onverifycallback="{!c.handleVerifyCallback}"
                              onexpiredcallback="{!c.handleExpiredCallback}" 
                              onerrorcallback="{!c.handleErrorCallback}"> 
       </niantec:recaptcha> 
       <div class="slds-m-vertical_large"> 
           <lightning:button aura:id="submit" disabled="true" label="Submit" onclick="{!c.handleSubmit}"></lightning:button> 
       </div> 
       <div> 
           <lightning:button label="Reset" onclick="{!c.handleSubmit}"></lightning:button> 
           <lightning:button label="Execute" onclick="{!c.handleExecute}"></lightning:button> 
           <lightning:button label="getCaptcha" onclick="{!c.handleGetCaptcha}"></lightning:button> 
       </div> 
    </aura:component>
                            
                        
                                
({
    handleReset : function(component, event, helper) {
        var comp = component.find('nicaptcha');
        comp.reset();
        var submitButton = component.find('submit');
        submitButton.set("v.disabled", true);
    },
    handleExecute : function(component, event, helper) {
        var comp = component.find('nicaptcha');
        comp.execute();
    },
    handleGetCaptcha : function(component, event, helper) {
        var comp = component.find('nicaptcha');
        var response = comp.getCaptchaResponse();
        console.log('Response: ' + response);
    },
    handleCallback : function(component, event, helper) {
        var submitButton = component.find('submit');
        submitButton.set("v.disabled", false);
        console.log('Callback: ' + event.getParam('response'));
    },
    handleVerifyCallback : function(component, event, helper) {
        console.log('Verified Response: ' + event.getParam('response'));
    },
    handleExpiredCallback : function(component, event, helper) {
        var submitButton = component.find('submit');
        submitButton.set("v.disabled", true);
        console.log('Expired Callback');
    },
    handleErrorCallback : function(component, event, helper) {
        var submitButton = component.find('submit');
        submitButton.set("v.disabled", true);
        console.log('Error Callback');
    },
    handleSubmit : function(component, event, helper){
        var comp = component.find('nicaptcha');
        var response = comp.getCaptchaResponse();
        if(response != ''){
        	// Add Code to submit the form.
        }  
    },
})
    Documentation
    Attributes
    Attribute
    Value
    Default
    Required
    Description
    captchaType
    v2-checkbox
    v2-invisible
    v3
    Required
    Your Google reCAPTCHA SiteKey
    badge
    bottomright
    Optional
    Applies only for v2-invisible
    action
    homepage
    Optional
    Applies only for v3.
    theme
    dark
    light
    light
    Optional
    The color theme of the widget
    oncallback
    Optional

    The name of your callback function, executed when the user submits a successful response.

    The g-recaptcha-response token is passed to your callback.

                                            
{
    "response": string // g-captcha-response
}
    onverifycallback
    Optional

    The name of your callback function, executed when the captcha response is verified against the SecretKey.

    The g-recaptcha-response token is passed to your callback.

                                            
{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional (see Googles documentation for error codes
}

    onexpiredcallback
    Optional
    The name of your callback function, executed when the reCAPTCHA response expires and the user needs to re-verify
    onerrorcallback
    Optional

    The name of your callback function, executed when reCAPTCHA encounters an error (usually network connectivity)

    and cannot continue until connectivity is restored.

    If you specify a function here, you are responsible for informing the user that they should retry
    Methods (API)
    Method
    Value
    execute()
    Programmatically invoke the reCAPTCHA check. Used with v2-invisible and v3 reCAPTCHA
    reset()
    Resets the reCAPTCHA widget
    getCaptchaResponse()
    Gets the response for the reCAPTCHA widget.
    Global Apex Methods
    Method
    Description
    		 
    niantec.reCaptchaUtil.verifyCaptcha(
            String secretKey, 
            String captchaResponse
        )
    Programmatically invoke the reCAPTCHA verification.
    secretKey -> reCAPTCHA SecretKey
    captchaResponse -> reCAPTCHA Response

                                            
{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional (see Googles documentation for error codes
}