Assignment 5--User Log-in

Due: March 25, 2019

Add input elements for users to log in

Add two text fields to your game description page, one for a user name and one for a password. The password field should not display the actual characters of the password. Also add a log-in button near the text fields. The log-in button should have a JavaScript event handler that uses Ajax to validate the user log-in. Near the log-in button, make an element to display a short (~20 characters) message so that the user can be informed if the log-in fails. The message element could be a span or a div.

Use Ajax to validate the log-in

Write JavaScript code to get the user's log-in name and password and send them to the server for validation. The URL to use for this assignment is:

Use the POST method with two parameters: userName for the user name, and password for the password. Your JavaScript code must put the POST data in the same format that a web browser would, which is to have a parameter name, an equal sign, and then the parameter value. If there is more than one set of parameter name-value pairs, then they must be separated by an ampersand (&). For example, you could pass the user name and password like this:

(If there are spaces or other special characters in the data, then they need to be encoded, but that's not an issue for this assignment.)

NOTE: Do not put your text fields in a form or use a submit button. Doing so often leads to problems because by default the web browser will reload the page as part of handling form input and submit buttons.

Be sure to include the HTTP Content-Type header for the POST request. Here's an example of setting the Content-Type:

request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
Do not use the standard JavaScript function encodeURIComponent. My server script is not set up to use the data encoding format used by that function.

I recommend that you use a synchronous request, which is simpler. You can see an example of a synchronous request on the Ajax demo page.

The server will respond with a JSON object (in string form) that has three elements: result, userName, and timestamp.  result will be the string "valid" or the string "invalid". If result is "invalid", the other two elements will be undefined. If result is "valid", userName will be the login name and timestamp will be a string with a date and time.

You can see the list of valid user names and passwords that check.php uses at

You can use the JSON.parse() method to make a JavaScript object from the string returned by the server. For an example of that, look at the Synchronous POST part of the Ajax Demo (see the link below).

Display an error page on the log-in page if the password is not correct

If the password is not correct, stay on the same page and put a message in the message element that says that the password was incorrect.

Display the game page if the password is correct

If the password is correct, save the login information in local storage as described below and then take the user to your game page. (You can take the user to a page that is not your game page if you want, but the browser should not not display the log-in page after a successful log-in.)

Ajax Demo

There are some examples of using XMLHttpRequest (Ajax) on the following page:

Store user log-in information in local storage

If the password is correct, make a log-in info string that is a concatentation of the user log-in name, a space, and the timestamp string from the server. Store the log-in info string in local storage with the key cs2550timestamp

You can read about local storage in Chapter 16 of Fundamentals of Web Development, especially Section 16.7. You can also read about local storage in the Lesson 10 notes. The Lesson 10 notes include links to web sites that explain local storage. You might want to do a Web search to get additional information.

Note: If you use a Mac and want to use Safari for this assignment, you will need to disable the local files restrictions and the cross-origin restrictions for this assignment. There are menu items for that in the Develop menu. You can read about that here. Don't forget to re-enable those restrictions when you go back to regular web browsing.

Local storage is not the same thing as cookies. Do not use cookies for this assignment (or any other assignments in this class.)

Retrieve the log-in information string from local storage and display it on the game page

On your game page, use a script to retrieve the user log-in string from local storage. Display the user name and timestamp string somewhere on the game page. To receive full credit for this part of the assignment, the information must be on the game page, not on the page where the user enters his or her user name and password.

Make a button to clear local storage

Add a button to your game page (near the user-name and timestamp display) that clears local storage. You can remove the button for Assignment 6 and the project.

Security notes

This assignment is about working with XMLHttpRequest and local storage, and not about security. The password check described here does not prevent anyone from accessing the game page. By reading the JavaScript source code, an intruder can easily get enough information to circumvent the password check and go to the game page.

Furthermore, the password is sent to the server as plain text and so could be intercepted. A better approach would be to use a one-way hash function (such as SHA1) to encode the passwords on the server, and then set up the client to encode the password before sending it to the server.

Even the approach of encoding the password is susceptible to replay attacks, where an intruder captures the password and sends it to the server in a separate request. In a replay attack, the intruder doesn't actually know the password, but can send the encoded password to the server to access information stored there.

Turn in

Turn in a zip file containing your HTML, JavaScript, CSS, and image files as instructed on the main Assignment page.

  15 Log-in text fields and button, password field does not show characters
  20 Displays a message on the log-in page if user name and password are not correct
  30 Uses Ajax to validate log-in and displays the game page if the log-in is correct
  25 Stores log-in info in local storage and displays the user name and timestamp on the game page
  10 Button to clear local storage on the game page