Flash Builder 4 login Air application using a cfc web service

00

The following post contains information on how to create a login Air application with Flash Builder 4 using a cfc web service.
You can download the Flash Builder 4 beta from Adobe Labs
More information about the Flex 4.0 SDK can be found here
The requirements are:
- Flash Builder 4 Beta 2
- Coldfusion 8+
- SQL server 2005+

Create a new flex project ‘Login_Webservice_cfc’

01

We first need to create the application layout. We choose the design view to make our life easier (ctrl+`), then drag and drop a Panel component from the Coponents views.

From the Properties View set the Title as ‘Login’ and set width and height as 250,150 respectively. Set the Panel to always be in the center of the screen by selecting the proper checkboxes from the Constrains area and set both values to ’0′.

02

After that, drag and drop a form component inside the panel from the componets view and set width and height to 100%. We next need to add two TextInput components; one for the Username and one for the Password inputs.

When you add a form component using the design view, Flash builder adds a FormItem wraper for you. So the code for each of your inputs will be similar to this:

Formitem


<mx:FormItem label="FirstInput">
    <s:TextInput id="FirstInput"/>
</mx:FormItem>

Set the labels and IDs using proper values (for the example I use ‘Username’ and ‘Password’ respectively).
At the end you will need a submit button to handle the form submission. Drag and drop a button from the component view below the two text inputs. Use the ‘SubmitBtn’ as an ID value and the ‘Login’ as label value.
As you can see, you need to remove the label value from the submit button FormItem. Click on it and just remove it.

The Login panel should look like this:
03

and the mxml code like this:

Panel component code


<s:Panel width="250" height="150" title="Login" horizontalCenter="0" verticalCenter="0">
<mx:Form width="100%" height="100%" left="0" top="0">
<mx:FormItem label="Username">
<s:TextInput id="Username"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="Password"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="SubmitBtn" label="Login"/>
</mx:FormItem>
</mx:Form>
</s:Panel>

If you build your application you will see that everything looks fine except for the password input that needs to display its value as password rather than as normal text. All you need is to add this as an input attribute:
displayAsPassword=”true

Now we need to connect our application to a Web service. For this example I use a coldfusion component (cfc). This is the code for my coldfusion component (.cfc):

Cfc component source


<cfcomponent output="false">
<cffunction access="remote" name="Authenticate" output="false" returntype="struct" hint="This Component authenticates User Accounts">
<cfargument name="Username" required="yes" type="string" />
<cfargument name="Password" required="yes" type="string" />

<cfquery name="Login" datasource="#Session.DSN#">
SELECT * FROM tblLogin
WHERE Username = '#Arguments.Username#'
AND Password = '#Arguments.Password#'
</cfquery>

<cfset ReturnObj = structNew() />
<cfif Login.recordcount gt 0>
<cfset ReturnObj.Success = true />
<cfset ReturnObj.Message = "Login successfull" />
<cfset ReturnObj.ReturnCode = 1 />
<cfset ReturnObj.Username = #Login.AccountName# />
<cfset ReturnObj.Password = #Login.AccountSurname# />
<cfelse>
<cfset ReturnObj.Success = false />
<cfset ReturnObj.Message = "Login incorrect" />
<cfset ReturnObj.ReturnCode = 2 />
</cfif>

<cfreturn ReturnObj>
</cffunction>
</cfcomponent>

Save the file as ‘login.cfc’ on your local web server.
You can see that we ask for two required arguments to be passed: Username and Password and then we create a structure and fill in it with some information. If we validate the user we also put the Name and the surname of the user within the structure.

Now I will use the Flash Builder to call the web service. The Flash builder makes our life easier with new functionality. From the Data/Services View, select ‘Connect to Data/Service’ and choose Web Service (the last one on the right hand side) and click next.

Now add the web service path ‘http://localhost/Login_Webservice_cfc/login.cfc?wsdl’, leave the rest of the settings as they are and click finish. Be aware that if the web service is on a remote machine you need to edit the ‘crossdomain.xml’ file for security reasons.

Now in the Data/Services View you can see the cfc method and the two required arguments.
04

Username and Password are required arguments and the return type will be Object, because we set the coldfusion function to use ‘struct’ as returntype.

We are almost there!

Drag the Authenticate function from the Data/Services view and drop it on the Submit button. Flash builder does all the hard work for you: it creates the actionscript classes and adds some pieces of code as well within your mxml file. Flash builder would just have made a submit handler for you and you need to edit it a bit.

Your function should look like this:

Login handler


protected function SubmitBtn_clickHandler(event:MouseEvent):void
{
AuthenticateResult.token = login.Authenticate(Username.text, Password.text);
}

I will edit the code a bit so I can have a result function as well as a custom fault handler function.
I also create some variables to hold the user’s data if the authentication is successful.
The full code will be like this:

Full mxml code


<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   xmlns:s="library://ns.adobe.com/flex/spark"
   xmlns:mx="library://ns.adobe.com/flex/halo" width="100%" height="100%" xmlns:login="services.login.*">
<fx:Script>
<![CDATA[
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.utils.ObjectUtil;
import mx.controls.Alert;

private var rs:Object;
private var Success:Boolean;
private var Message:String;
private var ReturnCode:int;
private var FullName:String;

//Failed to connect to the wsdl service
private function GeneralFailed_Handler(e:FaultEvent):void
{
Alert.show(e.fault.faultString, "Error connecting to the service");
}
//Login Handler
private function SubmitBtn_clickHandler(event:MouseEvent):void
{
AuthenticateResult.token = login.Authenticate(Username.text, Password.text);
}
//Result Handler for Account Authentication
private function AuthenticateResult_resultHandler(e:ResultEvent):void
{
//check the result
Alert.show(ObjectUtil.toString(e.result),"Login Results")

rs = new Object();
rs = e.result;
Success = rs['SUCCESS'];
Message = rs['MESSAGE'];
ReturnCode = rs['RETURNCODE'];

if(ReturnCode == 1)
{
FullName = rs['LOGIN']['NAME'] + " " + rs['LOGIN']['SURNAME'];

}else{
Alert.show(Message, "Try Again");
}
}

]]>
</fx:Script>

<fx:Declarations>
<login:Login id="login" fault="GeneralFailed_Handler(event)" showBusyCursor="true"/>

<s:CallResponder id="AuthenticateResult" result="AuthenticateResult_resultHandler(event)"/>
</fx:Declarations>

<s:Panel width="250" height="150" title="Login" horizontalCenter="0" verticalCenter="0">
<mx:Form width="100%" height="100%" left="0" top="0">
<mx:FormItem label="Username">
<s:TextInput id="Username"/>
</mx:FormItem>
<mx:FormItem label="Password">
<s:TextInput id="Password" displayAsPassword="true"/>
</mx:FormItem>
<mx:FormItem>
<s:Button id="SubmitBtn" label="Login" click="SubmitBtn_clickHandler(event)"/>
</mx:FormItem>
</mx:Form>
</s:Panel>
</s:Application>

Now, if you test your application you will see I have put two alert messages, one for a failed login and a general one to display the result of the submission form:
05

I hope you found this interesting and informative! :D

Enjoy!

Tags: , ,

  1. Jose Angel’s avatar

    Hi, I am trying to get some interactivity and functionality to my site. I have a mysql database and a coldfusion hosting service and I have most of the tools I need to build the funcionality I want to get. But I want to go pro with the security. I need a good and solid login process. I looked at your sample here but couldn’t make it work myself.

    Is there a way you could help me out? Send me a quote perhaps? All I need is a secure login right now but I’d like to have somebody assisting me in this process.

    Regards

    Reply

  2. Ernest Breau’s avatar

    I figured out how to get this all to work in a flexmobile project. I would like to know when you have decided that the user is authenticated, where can i store this information for all my views to be able to use it?

    Reply

  3. Kelly’s avatar

    Very Nice! Thank you!

    I had a problem with the #Login.AccountName# in the CFC in which I forgot to rename it to my database column name. Once I corrected the change it worked great.

    It was a pain working with Flex 3, especially with the CFC generator, but this Flash Builder 4 is amazing so far. Still some glitches, but definitely better than Flex 3.

    Reply

Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>