Please enable JS

Google reCAPTCHA v2 in Salesforce Custom Lightning Component

05 Apr 2017 / Written by  / News

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

 

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.

 

recaptcha lightning 01

 

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:

 

recaptcha lightning 02

 

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


Miguel Duarte
Technical Architect
This email address is being protected from spambots. You need JavaScript enabled to view it.

 


Related items


Rate this item
(0 votes)
Last modified on Monday, 19 March 2018 14:28

About us

Right IT Services is a full IT Project delivering provider including IT architecture services, solutions design, software development and testing.

Contacts

Rua Odette Saint Maurice

Lote 3B, Edifício L, Piso -1, Escritório A
1700-097 Lisboa | Portugal

+351 218 232 261

+351 911 981 920

contact@rightitservices.com

Follow us on Instagram

This site uses cookies and similar technologies.

If you not change browser settings, you agree to it. Learn more

I understand