Please enable JS

Google reCAPTCHA v2 in Salesforce Custom Lightning Component

05 Avr 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
Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

 


Related items


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

À propos de nous

La Right IT Services vous garantie des solutions de IT, d'architecture de services, design et développement de software et respectifs test.

Entrer en contact

Rua Odette Saint Maurice

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

+351 218 232 261

+351 911 981 920

contact@rightitservices.com

Suis-nous sur Instagram

REMARQUE ! Ce site utilise des cookies et autres technologies similaires.

Si vous ne changez pas les paramètres de votre navigateur, vous êtes d'accord. En savoir plus

J'ai compris