• Home
• Tutorials
• Forums
• Reference
• Developers
• Advertise
• About Us

Secured Login with Flash Remoting

Secured Login with Flash Remoting

I have seen this coming up more and more recently, how can I log in easily, yet securely to a Flash application? Well, that is what we are going to tackle today. With a little Remoting, and a little CFMX, you will find that is quite an easy thing to do in fact.

Our example today will be to login as a student, to a Flash application which will show us our marks based on our unique Student ID.

Checklist:
- Flash MX with Remoting Authoring Components
- CFMX Server with Remoting Enabled
- Internet Information Services (IIS) or equivalent
- Microsoft Access database
- HTTPS protocol on our testing server

NB HTTPS

The reason we use HTTPS when we publish this tutorial is because of its security. It is very secure, and readily available to us for Flash development. Please contact your host to see if you have HTTPS available to you. It will aid in the prevention of packet interception and decryption, which is always a good thing.

STEP I Basic Backend

Our primary key will be a field called StudentID. As this is unique for each student, it is a great way to verify logins. We can also create any other number of fields to go along with each student ID, such as full name, phone number, individual mark assignments, etc? 

STEP 2 Minimal Middleware

The ColdFusion Component (CFC) is what will handle all of our data transaction. The CFC is structured as follows:

<CFCOMPONENT>
    <cffunction name="doLogin" hint="Verifies user login." returntype="any" access="remote">
        <cfargument name="myUser" type="numeric" required="true" default="0">
        <CFQUERY NAME="loginQuery" DATASOURCE="studentData" MAXROWS="1">
            SELECT    *
            FROM       studentInfo 
            WHERE     studentID = #arguments.myUser#
        </CFQUERY>
        <CFreturn loginQuery>
    </cffunction>
</CFCOMPONENT>

This is a very basic component. It has a function called doLogin, which we reference from Flash, and pass our variable to. This doLogin function has one argument it is expecting from Flash, myUser, and it is a number. Yours does not have to be, but our student IDs are numeric by nature.

We then perform a query which retrieves all the data associated with the studentID provided. If there is no matching studentID, it will return null. I have also used MAXROWS = 1 here to limit the records returned, as there should never be a duplicate studentID.

STEP 3 Fancy Frontend

Then we move onto the Flash. It is very straightforward, if you have followed the previous Remoting tutorials available on this site. I have also added a lot of fun little touches that make it that much easier for the user to navigate.

#include "NetServices.as"
#include "NetDebug.as"

I have removed the focus rectangle from the submit button, and optionally disabled the hand cursor from identifying it as a button.

// function for login button
    loginBut._focusrect = false;
    // loginBut.useHandCursor = false;
        loginBut.onRelease = function() {
        loginProvider();
    };

In HTML forms, most people hit the ENTER key, and expect the form to submit. Many people do this in Flash as well, and you would be amazed how many developers forget to add this functionality. Let?s not be one of them.

// this allows the enter key to be pressed for logging in
loginListener = new Object();
loginListener.onKeyDown = function() {
    if (Key.isDown(13)) {
        loginProvider();
    }
};
Key.addListener(loginListener);





This is what occurs when the login button is pressed, or enter is pressed It includes basic client side error- checking. The reason I prefer doing this client-side is I don?t like to use up my server resources when I don?t have to. By having the client machine perform these tasks, we save the server resources for processing legitimate requests only.

function loginProvider() {
// errorchecking the form
if (username.text == "") {
    errormessage.text = "Enter Student ID.";
    errormessage.textColor = 0xFF0000;
    Selection.setFocus(username);
} else if (username.length<9) {
    errormessage.text = "You have entered "+username.length+" characters. Your student ID number is 9 digits.";
    errormessage.textColor = 0xFF0000;
    Selection.setFocus(username);
} else {
    myService.doLogin({myUser:username.text});
    errormessage.textColor = 0x333333;
    errormessage.text = "requesting login..."; }
}

When the data is passed from CFMX, this function runs. It verifies if the text in the username field is the same as the studentID we retrieved. If it is, then the login has been successful.

function doLogin_Result(result) {
if (result.items[0].studentID == username.text) {
    errormessage.textColor = 0x000000;
    errormessage.text = "Welcome "+result.items[0].firstName;
} else {
    errormessage.textColor = 0xFF0000;
    errormessage.text = "Login unsuccessful. Please try again.";
    Selection.setFocus(username);
}




This is a handy little function. It allows the CF Server to display any server error messages, in detail, right in our Flash application. Tell me that isn?t cool !!!

// This is our generic error catcher. It returns all CFMX Server errors
function doLogin_Status(error) {
    errormessage.textColor = 0xFF0000;
    errormessage.text = error.description;
}


// --------------------------------------------------
// Application initialization
// --------------------------------------------------
if (inited == null) {
    // do this code only once
    inited = true;
    // set the default gateway URL (this is used only in authoring)
    NetServices.setDefaultGatewayUrl("http://www.diariesofwar.com/flashservices/gateway");
    // connect to the gateway
    gateway_conn = NetServices.createGatewayConnection();
    // get a reference to a service
    myService = gateway_conn.getService("humber.dataControl", this);
}
Selection.setFocus(username);
errormessage.text = "Enter Student ID below.";
stop();

And we are done. Not too bad at all. Thanks, as always, for reading this tutorial. If you any questions, please visit the Remoting section at www.flashgoddess.com/forum or email me directly at marcus@diariesofwar.com.