Bored of reCaptcha for Salesforce? Try this..!
Introduction:
If you’re really bored with using Google reCaptcha, develop your own custom captcha within Salesforce platform using simple Javascript. Choosing pictures from captcha would be difficult for native users.
Voyage on creating captcha:
What is captcha? Captcha is the instrument which guarantees client has been collaborating with PC/site frames. The fundamental utilization of captcha to keep away from computerized copy sections and counteract programmers to generate Bluff esteems. Rivalries organizations may do these things. Spam users are avoided completely using captcha to keep all these, we are using captcha.
Picture based captcha can be troublesome for Arabic talking clients. To conquer every one of these things. we created custom captcha inside force.com. We utilized this captcha for all custom site shapes. Indeed, even we can create captcha utilizing voice acknowledgment for dazzle individuals. To be basic for Arabic talking clients we made it in view of English and Arabic alphabets. I by and by feeling its intriguing to create and play with Arabic letters in order.
I’ve outlined visual force page for property offering organization in middle east Region. While doing that we confronted Entertaining issues. we kept captcha for that site page. just we utilized Google captcha for that page, where the customer is not upbeat, they felt it is troublesome them to utilize that captcha. Arabic Customer felt a bit hard to pick pictures from google captcha, they felt comprehensible. They anticipate that it will be all the more agreeable.
so we chose to make custom captcha inside salesforce stage. we utilized straightforward rationale to create custom captcha both in English and Arabic dialect. Truly its testing and fascinating to create it.
How we accomplished it? Just we made 2 content boxes. In the first content box, we caught 7 powerfully changing esteems utilizing java script. We took both English letter sets and Arabic letters in order to change progressively on each and every snap. Utilizing CSS and javascript we made those content boxes look Tastefully satisfactory.
we utilized the same captcha for all our site shapes. we made it tastefully extraordinary for every one of the structures relies on the look and feel of the structures
Notwithstanding for Arabic letters in order, we made its distinctive look and feel.
Arabic users can use Arabic keyboard to enter these alphabets.
Please find below code and alternate it accordingly. Code developed using Arabic alphabets.
<script type=”text/javascript”>
function Captcha(){
var alpha = new Array(‘ج’,’ث’,’ت’,’ب’,’أ’,’ر’,’ذ’,’د’,’خ’,’ح’,’ض’,’ص’,’ش’,’س’,’ز’,’ف’,’غ’,’ع’,’ظ’,’ط’,’ن’,’م’,’ل’,’ك’,’ق’,’ي’);
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + b + c + d + e + f + g;
document.getElementById(“j_id0:theForm:myHiddenVar8”).value = code
document.getElementById(‘j_id0:theForm:myHiddenVar8’).readOnly=true;
document.getElementById(“j_id0:theForm:myHiddenVar9″).value = ”
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById(‘mainCaptcha’).value);
var string2 = removeSpaces(document.getElementById(‘txtInput’).value);
if (string1 == string2){
return true;
}
else{
return false;
}
}
function removeSpaces(string){
return string.split(‘ ‘).join(”);
}
</script>
Code for captcha with English alphabets.
<script type=”text/javascript”>
function Captcha(){
var alpha = new Array(‘A’,’B’,’C’,’D’,’E’,’F’,’G’,’H’,’I’,’J’,’K’,’L’,’M’,’N’,’O’,’P’,’Q’,’R’,’S’,’T’,’U’,’V’,’W’,’X’,’Y’,’Z’,’a’,’b’,’c’,’d’,’e’,’f’,’g’,’h’,’i’,’j’,’k’,’l’,’m’,’n’,’o’,’p’,’q’,’r’,’s’,’t’,’u’,’v’,’w’,’x’,’y’,’z’);
var i;
for (i=0;i<6;i++){
var a = alpha[Math.floor(Math.random() * alpha.length)];
var b = alpha[Math.floor(Math.random() * alpha.length)];
var c = alpha[Math.floor(Math.random() * alpha.length)];
var d = alpha[Math.floor(Math.random() * alpha.length)];
var e = alpha[Math.floor(Math.random() * alpha.length)];
var f = alpha[Math.floor(Math.random() * alpha.length)];
var g = alpha[Math.floor(Math.random() * alpha.length)];
}
var code = a + b + c + d + e + f + g;
document.getElementById(“j_id0:theForm:myHiddenVar8”).value = code
document.getElementById(‘j_id0:theForm:myHiddenVar8’).readOnly=true;
document.getElementById(“j_id0:theForm:myHiddenVar9″).value = ”
}
function ValidCaptcha(){
var string1 = removeSpaces(document.getElementById(‘mainCaptcha’).value);
var string2 = removeSpaces(document.getElementById(‘txtInput’).value);
if (string1 == string2){
return true;
}
else{
return false;
}
}
function removeSpaces(string){
return string.split(‘ ‘).join(”);
}
</script>
Using below code for making those text boxes as a container to make it as look like captcha area.
<body onload=”Captcha();”>
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-WLQTMFS”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>
<div class=”container”>
<apex:form id=”theForm”>
<apex:panelGrid columns=”2″ >
<apex:outputLabel value=”Please Verify Captcha” style=”font-family:Verdana;font-size:12px; color: white;”/>
<apex:inputText value=”{!con.Main_Captcha__c}” id=”myHiddenVar8″ style=”width: 750px;color:#00008B;font-size:22pt;font-family:Kristen ITC; background:#C0C0C0;width:175px; font-color:#800000;height: 35px”/>
<!– <input type=”button” id=”refresh” value=”Refresh” onclick=”Captcha();” style=” margin-right: 4cm; background:#c00;width:75px;height:30px;color:white;font-size:12pt;” />–>
</td></tr>
<tr><td><div id=”CaptchaDiv”></div>
<apex:inputText value=”{!con.Text_Input__c}” id=”myHiddenVar9″ style=”width: 130px; height: 20px;font-size:12pt;” />
<INPUT type=”button” id=”button” onclick=”Captcha();” style=”background-image:url(‘https://c.eu5.content.force.com/servlet/servlet.ImageServer?id=01524000002gspl&oid=00D24000000Ha9L’); width:25px; height:25px;”/>
</apex:panelGrid>
All these are developed within salesforce platform using visual force components.
To make voice acknowledgment captcha we have to utilize Apex class.
Like Arabic and English alphabets, even we can manipulate with numbers. Also with a combination of numbers and English alphabets.
Code to develop numeric captcha is given below
trigger updatetransaction on Account_Statement__c(before insert){
map<id,Account_Statement__c > maptransaction = new map<id,Account_Statement__c>();
For(Account_Statement__c as: Trigger.new){
if()
}
}
=============
<script type=”text/javascript”>
// Captcha Script
function checkform(theform){
var why = “”;
if(theform.CaptchaInput.value == “”){
why += “- Please Enter CAPTCHA Code.\n”;
}
if(theform.CaptchaInput.value != “”){
if(ValidCaptcha(theform.CaptchaInput.value) == false){
why += “- The CAPTCHA Code Does Not Match.\n”;
}
}
if(why != “”){
alert(why);
return false;
}
}
var a = Math.ceil(Math.random() * 9)+ ”;
var b = Math.ceil(Math.random() * 9)+ ”;
var c = Math.ceil(Math.random() * 9)+ ”;
var d = Math.ceil(Math.random() * 9)+ ”;
var e = Math.ceil(Math.random() * 9)+ ”;
var code = a + b + c + d + e;
document.getElementById(“txtCaptcha”).value = code;
document.getElementById(“CaptchaDiv”).innerHTML = code;
// Validate input against the generated number
function ValidCaptcha(){
var str1 = removeSpaces(document.getElementById(‘txtCaptcha’).value);
var str2 = removeSpaces(document.getElementById(‘CaptchaInput’).value);
if (str1 == str2){
return true;
}else{
return false;
}
}
// Remove the spaces from the entered and generated code
function removeSpaces(string){
return string.split(‘ ‘).join(”);
}
</script>
Conclusion:
This is how we developed captcha for Arabic speaking users. Really it was entertaining to develop Arabic captcha within Salesforce platform for Arabic forms. Using this logic we can develop various forms of captcha like voice recognition captcha, voice/icon recognition captcha and so on.
About the Author:
Manikandan.A is certified Salesforce developer with over 2 years of Experience in implementing both sales and service cloud applications.
