Google reCAPTCHA in Lightning Component

Biswajeet   September 9, 2020   8 Comments on Google reCAPTCHA in Lightning Component

Configure the Google reCAPTCHA and get the Site Key & Secret Key:

  • Login to Google reCAPTCHA
  • Register a new site
  • Add Label e.g. Salesforce.com
  • Select reCAPTCHA type “reCAPTCHA v2”
  • Select “I’m not a robot” Checkbox option.
  • Add a domain e.g. yourorgurl.com
  • Accept the reCAPTCHA Terms of Service
  • Submit and get the Site Key & Secret Key

Create a VF page to configure Google reCAPTCHA in it and we have to embed the VF page in our lightning component.

GoogleReCaptcha VF Page:

<apex:page sidebar="false" showHeader="false" standardStylesheets="false" cache="false" id="pg" applyBodyTag="false" applyHtmlTag="false">
    <html>
        <head>
            <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' async='' defer=''/>
            <script type='text/javascript'>
                var verifyCallback = function(response){
                    parent.postMessage('VALID', 'https://biswajeet-dev-ed.lightning.force.com/');
                };
            
            var onloadCallback = function() {
                grecaptcha.render('reCAPTCHAWidget', {
                    'sitekey' : 'ADD_YOUR_GOOGLE_RECAPTCHA_SITE_KEY', 
                    'callback' : verifyCallback
                });
            };
            </script>
        </head>
        <body>
            <div id="reCAPTCHAWidget"></div>
        </body>
    </html>
</apex:page>

Embed the above created VF page in our lightning component to display Google reCAPTCHA.
Lightning Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:appHostable,forceCommunity:availableForAllPageTypes" access="global">
    
    <!--Attributes-->
    <aura:attribute name="isDisable" type="Boolean" default="true"/>
    <aura:attribute name="firstName" type="String"/>
    <aura:attribute name="lastName" type="String"/>
    
     <!--Handlers-->
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    
    <div class="slds-m-around--xxx-large slds-align_absolute-center" style="width:70%;">
        <fieldset class="slds-box slds-align_absolute-center" >
            
            <legend id="newform" class="slds-text-heading--small login-heading">
                Registration
            </legend>
            
            <lightning:input name="fName" label="First Name" value="{!v.firstName}"/>
            <br/>
            <lightning:input name="lName" label="Last Name"  value="{!v.lastName}"/>
            <br/>
            <iframe src="/apex/GoogleReCaptcha" scrolling="no" frameborder="0" width="100%" allowtransparency="true"></iframe>
            
            <div class="slds-align_absolute-center">
                <lightning:button onclick="{!c.handleSubmit}" disabled="{!v.isDisable}" variant="brand" name="btnSubmit" label="Submit"   />
            </div>
        </fieldset>
    </div>
</aura:component>

Lightning JS Controller:

({
    doInit : function(component, event, helper) {
        var vfURL = 'https://biswajeet-dev-ed.lightning.force.com/';
        window.addEventListener('message', function(event){
            if(event.origin !== vfURL){
                return;
            }
            if(event.data === 'VALID'){
                component.set('v.isDisable', false); 
            }
        }, false);
    },
    
    handleSubmit : function(component, event, helper) {
        
    },
})

  • Nilesh Borse

    Hi Biswajeet,
    Is there any way to increase the height of the captcha when there are images for verification?

    Thanks,
    NIlesh

  • Nageswar

    Hi Biswajeet,

    Thanks for sharing google reCaptha post and i stuck at the following error. I request you to help me in this regard.

    getting error as below
    ERROR for site owner:
    Invalid domain for site key

    I had given the valid site key.

    Regards,
    Nageswar.

    • Above defined vf page url and your component js controller url should be as per your community site url

  • Uday SFDC

    var verifyCallback = function(response){
    alert('test2');
    parent.postMessage('VALID', 'https://lwccap-dev-ed.my.salesforce.com');
    };

    var onloadCallback = function() {
    alert('test');
    grecaptcha.render('reCAPTCHAWidget', {
    'sitekey' : 'here my site key',
    'callback' : verifyCallback
    });
    };

  • Uday SFDC

    getting error as below
    ERROR for site owner:
    Invalid domain for site key

    what might be wrong – Could you please help

    • Check your site key and secret key properly.

    • Nageswar

      Hi Uday, May I know how this issue was solved ?. I am getting the same error, though i have given the valid domain and site key.

      I appreciate your help in this regard.

      Regards,
      Nageswar.

  • Great one but i have one question how to handle verify image selection pop up size issue