Captcha Code in SAP UI5

Hi All,

In this blog I am going to explain how to generate a random captcha code with characters and numbers. And if you press the refresh button a new captcha code need to be generated in place of old captcha code.

And need to validate the captcha for that if we enter the same captcha it need to display an alert that shows whether the entered captcha is right or wrong if we do not enter any captcha and try to validate it need to display an alert with please enter the captcha.

Let’s see how I achieved this functionality.

Below is my view. I had taken two input fields one for the generated captcha code and other to enter manually. And also two buttons one for refreshingcaptcha code and one for validating.

View.view.xml:

<mvc:View controllerName="captcha.controller.View1" 
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}">
<content >
<Vbox class="sapUiResponsiveMargin">
<Text text="Please Enter the Captcha"/>
<Hbox >
<Input editable="false" id="generatecaptcha" value="" width="90%"/>
<Button press="onRefresh" text="Refresh"/>
</Hbox>
<Input id="captchacheck" value="" width="15%"/>
<Button press="onValidate" text="Check"/>
</Vbox>
</content>
</Page>
</pages>
</App>
</mvc:View>

For generating captcha code randomly I defined  a JS file.

captcha.js:

sap.ui.define(["./Captcha"], function() {
return {
customMethod: function() {
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 = Math.ceil(Math.random() * 10) + "";
	var c = alpha[Math.floor(Math.random() * alpha.length)];
	var d = alpha[Math.floor(Math.random() * alpha.length)];
	var e = Math.ceil(Math.random() * 10) + "";
	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;
var bCode = code.split(" ").join("");
return bCode;
}
};
});

I used this JS file in my controller where ever it is required.

So, on loading of the map I need to display the captcha code so, I require this JS file in onInit function();

onInit: function() {
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var sCaptcha = captcha.customMethod();		
that.byId("generatecaptcha").setValue(sCaptcha);
});
},

In the above path first captcha is my namespace and controller is my folder and second captcha is my file name.

When I click on refresh button again it need to change the code for that I place it again in the button function.

onRefresh: function() {
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var rCaptcha = captcha.customMethod();
that.byId("generatecaptcha").setValue(rCaptcha);
});
},

Now when I check for validation if validation is correct or wrong again a new captcha code need to generate with an alert. If the input is empty and we go for validation an alert need to display without changing the captcha code.

onValidate: function() {
var Input1 = this.byId("generatecaptcha").getValue();
var Input2 = this.byId("captchacheck").getValue();
if (Input2 === "") {
	alert("Please enter the captcha");
} 
else if (Input1 === Input2) {
alert("Validation is Correct");
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var captchaCorrect = captcha.customMethod();
that.byId("generatecaptcha").setValue(captchaCorrect);
});
this.byId("captchacheck").setValue("");
} 
else {
alert("Validation is wrong");
var that = this;
sap.ui.require(["captcha/controller/captcha"], function(captcha) {
var captchaWrong = captcha.customMethod();
that.byId("generatecaptcha").setValue(captchaWrong);
});
this.byId("captchacheck").setValue("");
}
}

alert for Correct validation.

alert for wrong validation

alert for empty validation

I hope this will help you to generate your own Captcha code