This post will walk you through the implementation to use Google Recaptcha in Salesforce Visualforce with just 3 lines of code.
Sometimes, we need to expose some Visualforce pages to public users using Sites to get some user inputs. As the Site is public and anybody can access it, we must add some kind of validation to avoid the DOS (Denial of Service) attack. That’s where Google Recaptcha in Salesforce Visualforce comes in handy.
Implementation
First, we need to create Google Recaptcha Account. Click the below link to create an Account:
Create Google Recaptcha Account
Provide following details while registering:
- label : any name
- reCAPTCHA type : reCAPTCHA v2, and the “I am not a robot” checkbox
- Domains : Add Visualforce or Salesforce Site URL depending on the requirement
- Check Accept the reCAPTCHA Terms of Service checkbox.
In order to use Google Recaptcha in the Salesforce Visualforce page, add the Visualforce domain URL. And if you are exposing that Visualforce page using Sites, you would need to provide the Site URL.
The Visualforce URL would look something like the below:
https://something-dev-ed--c.visualforce.com/Finally click Submit.
Please refer to the screenshot below:
Once the form is submitted, Site Key and Secret Key will be generated and will be displayed on the next screen. You can note down the Site Key and Secret Key.
Google Recaptcha in Salesforce Visualforce
Create a Visualforce page. We need to do 2 things to add Google Recaptcha to the Visualforce page:
The first thing is to add the below script tag to load Google Recaptcha –
<script src="https://www.google.com/recaptcha/api.js" async="true" defer="true"></script>Add second is to add the below div tag and add your Site Key in the data-sitekey attribute of that div.
<div class="g-recaptcha" data-sitekey="Your Site Key"></div>That is all, that is enough to add Google Recaptcha in Visualforce Page with just 3 lines of code.
Google Recaptcha Validation in Salesforce Visualforce
The above code is enough to display the Google Recaptcha but we still need to handle validation and make sure that the user submits the Google Recaptcha before proceeding further.
After submitting a form, just call grecaptcha.getResponse() method in JavaScript which will return some large String if the user has successfully validated the Google Recaptcha. If nothing is returned, the user has not successfully submitted the Google Recaptcha and we can show the appropriate error.
Refer to the sample code below for validation:
function submitJS(){
if(!grecaptcha.getResponse()){
// Show Error
document.getElementById("error").style.display = "block";
}
}Also Read:
And this is what our complete Visualforce page would look like:
CaptchaVF.page
<apex:page >
<head>
<script src="https://www.google.com/recaptcha/api.js" async="true" defer="true"></script>
<style>
#wrapper{
margin-left:20px;
margin-top: 20px;
}
</style>
<script>
function submitJS(){
if(!grecaptcha.getResponse()){
document.getElementById("error").style.display = "block";
}
}
</script>
</head>
<apex:form >
<div id="wrapper">
First Name: <apex:inputText id="idFirstName" /> <br/><br/>
Last Name: <apex:inputText id="idLastName" /> <br/><br/>
<div class="g-recaptcha" data-sitekey="6Les6dYdAAAAABLAKT2GmlIk50ChLhgXmuqZKLX9"></div><br/>
<div id="error" style="color:red;display:none;">Please verify that you are not a Robot.</div><br/>
<apex:commandButton value="Submit" onclick="submitJS()" rerender="dummyPanel"/>
<apex:outputPanel id="dummyPanel"></apex:outputPanel>
</div>
</apex:form>
</apex:page>That is all from this post. This is how we can use Google Recaptcha in Salesforce Visualforce with just 3 lines of code.
If you don’t want to miss new implementations, please Subscribe here.
Also Read:
See you in the next implementation.
