Tutorial Feature
Part 1: The Theory
Part 2: The Setup
Part 3: Requesting the Token
Part 4: Logging In
Part 5: Conclusion

Tutorial source files
Flash
Secure login with Flash

HTML
HTML quick tips

Photoshop
Converting Images to Black & White

Part 4: Logging In

Now we can set up the code that is needed to do the actual login. For this, we will need a server side script to be able to handle the login request, and code within the Flash application to initiate the request and decipher the return code.

Set Up the Login JSP

You will need to set up a JSP (or ASP, PHP, or servlet) that can respond to the login request. Included here is the code I used in a JSP called login.jsp. I placed this JSP file in the same location as I placed the requestToken.jsp file, which for me is at "/usr/local/jakarta-tomcat-4.0.4/webapps/ROOT/checkUser/login.jsp".

<?xml version="1.0"?>
<%@ page import="java.util.*" %>
<%@ page import="java.lang.*" %>
<%@ page import="java.security.*" %><%

// Get the username from the client request
String name = request.getParameter( "username" );
// Get the encoded password from the client request
String hashPassword = request.getParameter("password");
// This is the real password, illustrated in code for demonstration
// purposes only. Usually the password would come from a database and
// would already be encoded.

String realPassword = "foo";
// Initialize the request status
String status = "incomplete";
// Get the token from the session object
String passwordToken = session.getAttribute("passwordToken").toString();
// Append the token to the password
String tokenizedPassword = passwordToken + realPassword;
String tempString = "";

// Encode the token + password combination
byte[] buffer = tokenizedPassword.getBytes();
MessageDigest algorithm = MessageDigest.getInstance("MD5");
algorithm.reset();
algorithm.update(buffer);
byte[] digest = algorithm.digest();

// Convert the encoding from the stream data type to a string.
// Needed because the MD5 encoding algorithm outputs raw binary rather than a string

StringBuffer hexString = new StringBuffer();
for (int i=0;i<digest.length;i++)br /> {
  tempString = Integer.toHexString(0xFF & digest[i]);
  if (tempString.length() == 1)
  {
    tempString = "0" + tempString;
  }
  hexString.append(tempString);
}
String serverHash = hexString.toString();

// Compare the two encoded passwords
if (serverHash.compareTo(hashPassword) == 0)
{
  status = "Login Accepted";
}
else
{
  status = "Login Rejected";
}
%>
// Send the result back to the client
<status><%=status%></status>

Figure 6: Contents of login.jsp.

This code receives the username and the encoded password from the Flash application. It encodes the copy of the password that it already has and compares it with what it received from the Flash application. If they match, it returns a message to the Flash application indicating a successful login, otherwise it returns a message indicating that the login failed.

Set Up the Login ActionScript Code

The code that should be called when the user clicks on the login button follows in figure 7. This code should be placed along with the other code added thus far within the only keyframe thus far on the "Script" layer.

login_xml = new XML();

function invokeLogin()
{
  checksumOutput = calcMD5(token_str + passwordInput);

  login_xml.load("http://localhost:8080/checkUser/login.jsp?username=" + usernameInput + "&password=" + checksumOutput);
  login_xml.ignoreWhite = true;
  login_xml.onLoad = loginCallback;
}


function loginCallback(loaded)
{
  if (loaded == true)
  {
    rootNode = login_xml.firstChild;
    loginStatus = rootNode.firstChild;
  } else {
    loginStatus = "Server not responding";
  }
}

Figure 7: ActionScript to handle the login operation.

The invokeLogin() function will be called when the login button is pressed, and the loginCallback() function will be called when the server returns with the information on whether the login was successful.

Finally, add the code to allow the login button to call the correct function. Click on your login button, and add the following code:

on (release)
{
  _root.invokeLogin();
}

Figure 8: Code for the login button.

    < Previous: Requesting the Token Tutorial Start Next: Conclusion >    
 © Copyright 2004 Nathan Derksen