First: reCAPTCHA, do you know what it is? No? Check out this video:

Now that you know, you probably want to add it to your Lightning Component... but there’s no standard way to do it, because reCAPTCHA is a JavaScript that is dynamic therefore we can’t add it as Static Resource. If you just need a Web-to-Case with reCAPTCHA, check here.

So, what should be done? Create your Lightning Component, add an iframe that calls a Visualforce Page and in there, do the call to the reCAPTCHA javascript and voilá!

Step by step:

Step 1: Create the Visualforce Page with reCAPTCHA 

<apex:page showHeader="false"> 
    <script src='https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit' />
    
    <div id="widgetId1" class="g-recaptcha" style="transform: scale(0.74);transform-origin: 0 0;-webkit-transform:scale(0.74);-webkit-transform-origin: 0 0"></div>

    <style>
        body, div{
            background:transparent !important;
        }
    </style>
    
    <script type="text/javascript">
        var onloadCallback = function() {
            grecaptcha.render('widgetId1', {
              'sitekey' : '6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI', 
              'data-size' : 'compact',
              'data-theme' : 'light'
            });
        };


        window.addEventListener("message", function(event) {
            var hostURL = 'https://miguel-duarte-dev-ed.lightning.force.com';
            if(event.origin !== hostURL){
                return;
            }
            
            if(event.data.action == "alohaCallingCAPTCHA"){  
                var message = document.getElementById("g-recaptcha-response").value;
                if (message == ""){
                    parent.postMessage({ action: "alohaCallingCAPTCHA", alohaResponseCAPTCHA : "NOK" }, hostURL);
                }
                else{
                    parent.postMessage({ action: "alohaCallingCAPTCHA", alohaResponseCAPTCHA : "OK" },  hostURL);
                }
            }

        }, false);
        
    </script>
</apex:page>

Did you notice the sitekey tag? That’s what you should change for your key that you should’ve created here. There’s also a window.addEventListener that will check for any messages that the Lightning Component asks and that will verify the reCAPTCHA response and reply accordingly.

Step 2: Create a lightning component with an iframe 

<aura:component controller="MyCAPTCHA" implements="force:appHostable,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >  
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

    <div class="container">
		<form class="slds-form--stacked">
			<div class="slds-form-element slds-is-required">
				<div class="slds-form-element__control">
					<ui:inputText aura:id="inputName" label="Name"
                        class="slds-input"
                        labelClass="slds-form-element__label"
                        value="{!v.myName}"
                        required="true"/>
                </div>
            </div>
    		<div class="slds-form-element">
                <div class="slds-form-element">
                    <div class="slds-form-element__control">
                        <ui:inputText aura:id="inputEmail" label="Email"
                            class="slds-input"
                            labelClass="slds-form-element__label"
                            value="{!v.myEmail}"
                            required="false"/>
                    </div>
                </div>
            </div>
            <div class="slds-form-element">
                <iframe aura:id="vfFrame" src="/apex/MyVfCAPTCHA" scrolling="no" frameborder="0" width="100%" allowtransparency="true"/>
            </div>
            
            <div class="slds-form-element">
				<ui:button label="Submit"
                       class="slds-button slds-button--neutral"
                       labelClass="label"
                       press="{!c.submitSomething}"/>
            </div>
        </form>
    </div>
</aura:component>

Did you notice the aura:handler tag in the top? That’s because I want to add a listener that will check for any messages that the iframe may reply.

Step 3: The Lightning Component Controller: 

({
    doInit : function(component) {
        var vfOrigin = "https://miguel-duarte-dev-ed--c.eu2.visual.force.com";
        window.addEventListener("message", function(event) {
            if (event.origin !== vfOrigin) {
                // Not the expected origin: Reject the message!
                return;
            }
            
            if(event.data.action == 'alohaCallingCAPTCHA' && event.data.alohaResponseCAPTCHA == 'NOK'){
                alert('Please do the captcha before submit!');
            }
            else if(event.data.action == 'alohaCallingCAPTCHA' && event.data.alohaResponseCAPTCHA == 'OK'){
                var urlEvent = $A.get("e.force:navigateToURL");
                urlEvent.setParams({
                        "url": vfOrigin   '/login/'
                });
                urlEvent.fire();
            }
        }, false);
    },

	submitSomething : function(component, event, helper) {
        var message = 'alohaCallingCAPTCHA';
		var vfOrigin = "https://miguel-duarte-dev-ed--c.eu2.visual.force.com";
        var vfWindow = component.find("vfFrame").getElement().contentWindow;
		vfWindow.postMessage({ action: "alohaCallingCAPTCHA" }, vfOrigin);

	}
})

Visually speaking it should do something like this:

You can use this solution to implement reCAPTCHA on you Lightning Component or any other Javascript component/framework!

If you have any questions/suggestions, let us know!

Thank you for reading!

Author