Add input elements for users to log in
Use Ajax to validate the log-in
(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:
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 http://universe.tc.uvu.edu/cs2550/assignments/PasswordCheck/list.php
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.)
There are some examples of using XMLHttpRequest (Ajax) on the following page: universe.tc.uvu.edu/cs2550/notes/l9/AjaxDemo/index.html
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 keycs2550timestamp
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.
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.
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.
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