reCAPTCHA is a Google project that has been created to make your forms in public websites more safe. The basic concept of this project is to stop the bots that are trying to fill web forms. By introducing some task that are very easy for the Humans but almost impossible for a bot. For instance reading some deformated text. The Google guys are very smart and they are usign the reCAPTCHA project for more goals than protect the web form. They are using it also to train them Artificial Intelligence systems. Well done guys!!!. Here you have all the details for the reCAPTCHA project
Before we start with this short tutorial we need to create a site key in the reCAPTCHA admin site. This site key will allow to the Google API for reCAPTCHA to validate our site. To get a valid site key you need to have a Google account. Then, once login, navigate to this site. Set the domain, in our case,
force.com. And select the
reCAPTCHA V2 checkbox. You can see the needed configuration in this image
Click in the
For this Lightning Component we are going to need several pieces. Of course, the main will be to create a Lightning Component, that will show the reCAPTCHA and a form that will be enabled when the reCAPTCHA has validated we are not a bot. But we also will need to create a VisualForce page. A VisualForce page?!?!? why??? Well this is because our friend the
Locker Service. If you don’t know the Lightning Locker Service I will recommend you to read this article. As a short summary I will say that the Locker Service is a piece that Salesforce created to enhance the security in the Lightning Components. His basic fuctions are two. Protect the DOM of the Lightning Components to avoid forbidden accesses, a Custom Component can access his DOM and the DOM of his children but it can’t access to other components DOM. And the second function of the Locker Service, is to protect the resource for security reasons, this is based on CSP and it will only allow to have the sources in some location. One of the forbidden accesses is to call JS sources from other domain directly, and as in our tutorial we need to call to google API from Salesforce, the Locker Service will cut this request. Here is where the VisualForce page come to help us to solve this restriction.
Where, the lightning code we are going to develop in this example is pretty basic. Is just a simple button and when the user will press this button an alert message will be show. But the button will be disabled until the user validates in the reCAPTCHA that he is not a Bot. Simple not? The last part is an iframe, a
lightning:container could be used aswell, to the VisualForce that actually prints the reCAPTCHA.
The source code of the Lightning component is this:
and the client-side controller is this:
In this client-side controller the more complex part is the
window.addEventListener. Is created to the communication with the VisualForce page. That code basically enables the button when it receives the message
Unlock from the VisualForce.
And this is the look&feel of this component once deployed
The VisualForce is what actually will display the reCAPTCHA, and when the reCAPTCHA validates that you are not a Bot then it will post a message to the Lightning Component to unlock the button.
Here is the code:
Some things that need a little explanation. First, the
script that loads the reCAPTCHA uses a function
onloadCallback. This callback is executed when the script finish it load. This function is very important for two reason. First it defines the
site key that we get in the first step of this tutorial. Second it will define the callback to be invoked when the reCAPTCHA validates that the user is a human. Second, the
form with a simple submit button which is hidden. This is a requirement of the reCAPTCHA, is there is no form then the reCAPTCHA doesn’t work.
You can see a video running this example here at YouTube
All the source code of this post is in this GitHub repository
Share onTwitter Facebook Google+ LinkedIn
Leave a Comment
Your email address will not be published. Required fields are marked *