ajaxCFC Login Form
This weekend I had a chance to download ajaxCFC and play around with it a bit. If you are not familiar with ajaxCFC please be sure to click the link above to learn more about it. The short version of what it is though straight from the source of Rob Gonda's website is as follows. AjaxCFC is a ColdFusion framework meant to speed up ajax application development and deployment by providing developers seamless integration between JavaScript and ColdFusion, and providing built-in functions, such as security and debugging, to quickly adapt to any type of environment and helping to overcome cross-browser compatibility problems.
Now that we are all caught up lets go ahead and dive right into some code. The first thing you want to do download the ajaxCFC zip by clicking here. After extracting the zip file you will notice 3 folders inside of the ajaxCFC folder. The only one we are interested in right now is the core folder. In the core folder there is an ajax.cfc file and js folder. These are the the files we would like to copy into our example application. Create a new folder structure in your webroot ajax/loginexample and copy the files here. Now that we have our folder structure setup we are going to create 2 files and will explain them below. So of the information below is taken directly from the ajaxCFC documentation.
index.cfm<head>
<title>Ajax CFC Login Example</title>
<!-- ajaxCFC -->
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
</head>
<body>
<form name="frmLogin" method="post" onSubmit="return submitForm()">
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<div id="results"></div>
</body>
</html>
Ok, lets examine this file and find out what is going on here. '_ajaxConfig' will store the location of the listener CFC and location of the 'js' folder that was included in the ajax.zip file you downloaded. You are not forced to use the '_cfscriptLocation' variable as you may specify the CFC location directly in the ajax call.
<script type="text/javascript">_ajaxConfig = {'_cfscriptLocation':'Security.cfc', '_jsscriptFolder':'js/'};</script>
<script type="text/javascript" src="js/ajax.js"></script>
The first function submitForm() is called when the form is submitted and returns false so the form is not posted. When the function is called it calls our authenticateUser() method. In this method we get the values of the username and password fields in the form. To invoke an ajax component you need to use 'DWREngine._execute' in the following format: DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'method', args1, args2, args3, callBackFunction). So this means that we are calling the authenticate method in the component _cfscriptLocation and we pass the arguments username and password that we just set above. Finally we tell it the name of the method to call upon completion. In our authenticateResults method we display the results in and if there are errors we update the style of the username and password field so the end user knows where the error came from.
function submitForm() {
authenticateUser();
return false;
}
function authenticateUser() {
var username = $("username").value;
var password = $("password").value;
DWRUtil.useLoadingMessage();
DWREngine._execute(_ajaxConfig._cfscriptLocation, null, 'authenticate', username,password, authenticateResults);
}
function authenticateResults(r) {
// evaluate server side JS if( eval(r) == true ) {
$('results').innerHTML = "user ok";
}else {
$('results').innerHTML = "bad username / password try again";
document.getElementById("username").style.border = "1px solid red;";
document.getElementById("password").style.border = "1px solid red;";
}
}
</script>
Finally we setup our form that calls the method submitForm() on submit. And we declare a region that will hold our results.
<p>
<label for="username">Username:</label>
<input type="text" name="username" id="username" />
</p>
<p>
<label for="password">Password:</label>
<input type="text" name="password" id="password" />
</p>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<div id="results"></div>
Security.cfc
The first thing you will notice about our security component is that it extends our ajaxCFC that was included in the download. To create ajax listeners you will need to extend ajax.cfc. Next we have our function called authenticate that will accepet 2 arguments; username and password. The method is self explanatory and easy enough to replace with a call to your database.
<cffunction name="authenticate" access="public" returntype="boolean" hint="I will authenticate a user">
<cfargument name="username" type="string" required="true" />
<cfargument name="password" type="string" required="true" />
<cfset var isAuthenticated = false>
<!--- you would replace this with db functionality --->
<cfif arguments.username EQ "admin" AND arguments.password EQ "password">
<cfset isAuthenticated = true>
</cfif>
<cfreturn isAuthenticated>
</cffunction>
</cfcomponent>
I hope this tutorial help you to understand how easy it is to get started using ajaxCFC and just how cool it can be. This tutorial is not the greatest example just because there are many security concerns, but it is a great example how easy ajaxCFC is to setup. You can click on the link below for a fully functional example. Enter admin as the username and password as the password for authentication to pass.
Login Example