Cincom VisualWorks Web Toolkit Tutorial : Using Cookies for the Logon Page

Using Cookies for the Logon Page

The lessons on theory are now over. It's time to put theory into action and create our logon process. First up, cookies.

This lesson will demonstrate how pull data from an HTML form and compare it to data residing in a file. If the login is unsuccessful, we will give the employee the opportunity to login again. If the login is successful, we will redirect the employee to a welcome page and remember who they are when they get there using cookies. This solution will use a J2EE servlet for validation.

1. If VisualWorks is not already running, please start running it now, load the Web Toolkit parcel and start a Wave HTTP server. You should also file in the code from Toyz Inc 1 and make sure the initialize method of the Filestuff class sets the correct location of the directory variable (i.e. the directory that contains the 3 data files).

2. Start with the file template.htm. You can find a copy of it here. Place this in the teach directory.

3. Modify the template.htm file so that it contains a form allowing the user to enter their employee number, first name and last name. Then save the file as logon1.htm in the teach directory. A sample file would look like the following:

Figure 1. The TEACH login screen

The HTML for logon1.htm is as follows (the more interesting sections of the file have been highlighted):

<html>
<head>
<title>Toyz Inc. Login Page</title>
<link rel="stylesheet" type="text/css" href="toyzinc.css">
</head>
<body bgcolor=white>
<center>
<hr width="75%" size=4>
<table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF>
<tr>
<td width="40%" align=right>
<img src=images/toyzinc.gif>
</td>
<td width="50%" align=left>
<h3>
Toyz Inc.
<br>
Employee
<br>
Accreditation &
<br>
Course
<br>
History
</h3>
</td>
</tr>
</table>
<hr width="75%" size=4>
<form action="servlet/ServletVerify1" method="post" name="form1">
<table width=50% cellpadding=5>
<tr>
<td bgcolor=mediumblue colspan=2>
<font color=#ffffff>
<b>Please Login</b></font>
</td>
</tr>
<tr>
<td width=30% align=right>
First Name:
</td>
<td width=70% align=left>
<input type="text" name="firstName" value="" size=25 maxlength=30>
</td>
</tr>
<tr>
<td width=30% align=right>
Last Name:
</td>
<td width=70% align=left>
<input type="text" name="lastName" value="" size=25 maxlength=30>
</td>
</tr>
<tr>
<td width=30% align=right>
Employee Number:
</td>
<td width=70% align=left>
<input type="password" name="passWord" value="" size=25 maxlength=30>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" name="action" value=" Proceed ">
</td>
</tr>
<tr>
<td colspan=2>
For security reasons, you must supply the above
information correctly in order to gain access to
the TEACH system.
</td>
</tr>
</table>
</form>
</center>
</body>
</html>

4. When the user clicks the submit button, the data from the form will be sent to the servlet ServletVerify1 since it is specified in the action attribute of the form tag.

5. From the main VisualWorks Launcher window, click the fourth button on the Toolbar or select the menu option Browse >> System. Make sure you are browsing by category instead of parcel or package.

6. Click on any category and enter the following in the bottom pane:


    Smalltalk.VisualWave defineClass: #ServletVerify1
	superclass: #{VisualWave.HttpServlet}
	indexedType: #none
	private: false
	instanceVariableNames: ''
	classInstanceVariableNames: ''
	imports: ''
	category: 'ToyzInc'

7. <Operate-Click> and select Accept. Select none if asked to choose a package.

8. Click the Instance tab for the class ServletVerify1 and create a protocol called serving.

9. Now enter the following in the bottom pane:

doPost: aRequest response: aResponse
| firstName lastName passWord goodLogin employees employeeCookie|
firstName := aRequest anyFormValueAt: 'firstName'.
lastName := aRequest anyFormValueAt: 'lastName'.
passWord := aRequest anyFormValueAt: 'passWord'.

goodLogin := 'NO'.
employees := (Toyz new) getEmployees.
employees do:
[ :each |
(passWord = each number) ifTrue:
[
(lastName = each lastName) ifTrue:
[
(firstName = each firstName) ifTrue:
[
goodLogin := 'YES'.
employeeCookie := HTTPCookie named: 'employee' value: (each firstName, ' ', each lastName).
employeeCookie expireAfterDays: 90.
aResponse addCookie: employeeCookie.
].
].
].
].

(goodLogin = 'YES')
ifTrue: [ aResponse redirectTo: '/teach/main1.ssp'. ]
ifFalse: [ aResponse redirectTo: '/teach/logon1.htm'.].

<Operate-Click> and select Accept.

The servlet ServletVerify1 will extract the data from the form and compare what the employee entered against the employee file. If there is a 3-way match (first name, last name and employee number), a cookie will be created and control is sent to main1.ssp. If there isn't a 3-way match, then control is sent back to logon1.htm.

Indeed, there is a lot going on here. Let's look at all this code line by line (or chunk by chunk) and make sure you understand what each line (or chunk) does.

doPost: aRequest response: aResponse

All servlets must have either a doPost: method or a doPost:response: method. Which method you use depends on whether or not you need the Response object. For our solution, we do (in order to redirect the user to an SSP page and to create a cookie).

firstName := aRequest anyFormValueAt: 'firstName'.
lastName := aRequest anyFormValueAt: 'lastName'.
passWord := aRequest anyFormValueAt: 'passWord'.

These lines extract the data from the 3 input fields on our form.

goodLogin := 'NO'.
employees := (Toyz new) getEmployees.
employees do:
  [ :each |
    (passWord = each number) ifTrue:
     [
      (lastName = each lastName) ifTrue:
       [
        (firstName = each firstName) ifTrue:
        [
        goodLogin := 'YES'.

With their matching block brackets (not shown), this block of code will match the values from the form with those found on the employee file. The variable employees will contain a collection of all employees as a result of the getEmployees method of the Toyz class. We then iterate through the collection looking for a match. The temporary variable goodLogin is first initialized to the value NO (we will first assume there will be no match) and will only be set to YES if all 3 values from the form match their counterparts from the file.

employeeCookie := HTTPCookie named: 'employee'
value: (each firstName, ' ', each lastName).
employeeCookie expireAfterDays: 90.
aResponse addCookie: employeeCookie.

These lines are our "cookie code". We will create a cookie named employee. The cookie will simply contain an employee's first name and last name. Using an instance of the HTTPCookie class, we will store that instance in a temporary variable called employeeCookie. Next we will set the expiration of the cookie to 90 days. This is an optional step but it is a good example of how to determine the life expectancy of a cookie. If this statement is omitted, the cookie will last forever (i.e. never expire). We then add the cookie to the response object using the addCookie: method which actually creates the cookie (writes the cookie file to the users machine).

(goodLogin = 'YES')
ifTrue: [ aResponse redirectTo: 'main1.ssp'.]
ifFalse: [ aResponse redirectTo: 'logon1.htm'.].

We test the value of the temporary variable goodLogin. The logic here is very simple. If the value is YES, then we found a match against the employee file and will redirect them to main1.ssp. If the value is NO, then we did not find a match against the employee file and will redirect them back to logon1.htm.

10. The final step in our login process is to create the file main1.ssp. The file will be relatively simple - read the cookie and welcome the employee to the TEACH home page. Again, start with the file template.htm, modify it so that it reads the cookie and output the contents of the cookie in the main area of the file. Then save the file as main1.ssp in the teach directory. A sample file would look like the following (the more interesting sections of the file have been highlighted):

<html>
<head>
<title>Toyz Inc. Home Page</title>
<link rel="stylesheet" type="text/css" href="toyzinc.css">
</head>
<body bgcolor=white>
<center>
<hr width="75%" size=4>
<table border=0 cellpadding=2 cellspacing=2 width=75% bgcolor=#FFFFFF>
<tr>
<td width="40%" align=right>
<img src=images/toyzinc.gif>
</td>
<td width="50%" align=left>
<h3>
Toyz Inc.
<br>
Employee
<br>
Accreditation &
<br>
Course
<br>
History
</h3>
</td>
</tr>
</table>
<hr width="75%" size=4>

<%
employeeCookie := request cookieValueAt: 'employee'.
response write: ('<h3>Hello ',employeeCookie,'</h3>').
%>

<h4>Welcome to the TEACH home page</h4>
</center>
</body>
</html>

This file is straight HTML except for 2 lines of code. The first line extracts the value of the cookie name employee and places it into the temporary variable of employeeCookie. The next line simply places the contents of employeeCookie within a set of headline tags.

You should now have 2 new files in the teach directory.

logon1.htm
main1.ssp

11. Feel free to test your logon process. Note that it will fail (if it does not fail, then it will be using the cookie set from the ASP lessons and display the name of the person you logged in as the last time you set the cookie). If you have a cookie manager, delete the cookie named employee from the localhost site.

Figure 2. The notifier window informing us of an error

12. Click the Debug button. Select the first unboundMethod and display the value of employeeCookie.

Figure 2. The Debugger states that employeeCookie is nil

This proves that what we attempted to do with cookies using servelts is indeed true. If you send a cookie with a redirect in the same response, many browsers will either ignore the cookie or store it for future requests, but not pass it back in the redirect request.

Figure 3. Note the message in the Transcript

We will fix this with session variables in the next lesson. But let's save our work in the image first.

13. From the System Browser, <Operate-Click> the category of ToyzInc and select File Out As.... Enter ToyzInc_j1.st as the filename.

Congratulations! Phase 1 of the J2EE login process is complete

You now should be able to:

	Extract data from an HTML form using a servlet
	Create a cookie in a servlet.
	Redirect the browser to a specific page from a servlet
	Attempt to read the contents of a cookie in an SSP