Introduction

Javascript User Login provides a way for internet users to login to a secure page. This is achieved by sending a user to a filename based upon their username and password which then relays the URL address of the secure back to the original page.

A folder on your website will essentially act as if it were a database of username's and password's. Once the user has logged in successfully a encrypted cookie is set that only allows that user to view "secured pages" for a specified amount of minutes. Encrypting the cookie eliminates or makes user tampering of cookies extremely hard and unlikely (editing of cookies is currently possible through the Web Developer Add-on for Firefox and other tools. Also some browsers can change the amount of time a cookie lasts based off of user settings.)

Traditionally webmasters have had trouble installing this Javascript. A Zip file with a full directory structure is available by clicking on "Download Project" below

Webmasters looking for the Javascript User Login version 3.0 should consult this files archives by clicking on " Previous Version" below. Archives are provided throught a Zip file that contains all versions of this script (except this version).

Demonstration

Code: Login Script

The login script may be placed on any publicly accessible webpage such as your homepage.

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <head> <title>Protected Area - Please Login</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="JavaScript" type="text/javascript"> // // Javascript User Login 4.0 // Some Rights Reserved // http://webdeveloper.50webs.com // // Script Preferences var accountsFolder = "accounts/"; //A relative path representing where the user account file is (e.g. "../" or "" or "users/") var fileExtention = ".htm"; // Extention of the user account file (e.g. ".htm" or ".html") var processingMsg = "Logging you in..."; // The message that will be displayed to the user when they press the login button var failedMsg = "Invalid Username/Password"; // The message that will be displayed to the user if they provide invalid credentials // Script Functions (Edit only if you agree to the terms of use) function jul_start() { jul_auth.location.replace("about:blank"); document.getElementById('username').disabled = false; document.getElementById('password').disabled = false; document.getElementById('username').value = ""; document.getElementById('password').value = ""; document.getElementById('username').focus(); var jul_buttons = '<input name="submit" type="submit" value="Login" /> <input name="reset" type="reset" value="Reset Form" />'; document.getElementById('jul_ctrl_box').innerHTML = jul_buttons; document.cookie = "jul_test=okay; max-age=" + 60*60*24 + "; path=/"; if (document.cookie.indexOf('jul_test') == -1) { document.getElementById('jul_ctrl_box').innerHTML = "Please Enable Cookies"; } } function jul_login() { document.getElementById('username').disabled = true; document.getElementById('password').disabled = true; document.getElementById('jul_ctrl_box').innerHTML = processingMsg; setTimeout("jul_fail();", 10000); // after 15 seconds display error message var username= document.getElementById('username').value.toLowerCase(); var password= document.getElementById('password').value.toLowerCase(); var accountURL= accountsFolder + username + "~" + password + fileExtention; // compiled filename that loads user-file jul_auth.location.replace(accountURL); } function jul_fail() { document.getElementById('jul_ctrl_box').innerHTML = failedMsg; setTimeout("jul_start();", 7000); } function jul_success(URL, name) { var auth= new Date() var authMi = "" + auth.getMinutes(); var authHo = "" + auth.getHours(); var authDa = "" + auth.getDate(); var authMo = "" + auth.getMonth(); var authYe = "" + auth.getFullYear(); authYe = authYe.slice(2,4); if ((authYe*1) >= 50) { authYe= authYe-50; } if ((authYe*1) == 0) { authYe= 51; } if (authMi.length < 2) { authMi = "0" + authMi } if (authHo.length < 2) { authHo = "0" + authHo } if (authDa.length < 2) { authDa = "0" + authDa } if (authMo.length < 2) { authMo = "0" + authMo } if (authYe.length < 2) { authYe = "0" + authYe } var sendout =""; var str = authYe + authMo + authDa + authHo + authMi + name; for (i=0;i<str.length;i++){ var char = "" var uni = str.charCodeAt(i); var char = "" + uni * authYe for (j=char.length;j<4;j++){ char= "0" + char; } sendout+= char } document.cookie = "jul_auth=" +sendout+ "; max-age=" + 60*60*24 + "; path=/"; location.href= "../" + URL; } </script> <style type="text/css"> .jul_table { border: 2px solid #8CC63E; width: 250px; } .jul_table td { font-family: Verdana, Arial, Helvetica, sans-serif; padding: 6px; } .jul_title { background-color: #8CC63E; color: #FFFFFF; text-align: center; font-weight: bold; font-size: 16px; } .jul_content { font-size: 12px; } .jul_input { font-size: 12px; } .jul_iframe { display: none; } </style> </head> <body> <center> <form action="javascript:jul_login();" method="get"> <table cellspacing="0" cellpadding="0" border="0" class="jul_table"> <tr> <td valign="top" colspan="2" class="jul_title">Protected Area</center> </p></td> </tr> <tr> <td width="76" class="jul_content">Username</td> <td width="170" align="right" class="jul_content"><input class="jul_input" type="text" name="username" id="username" /></td> </tr> <tr> <td class="jul_content">Password</td> <td class="jul_content" align="right"><input class="jul_input" type="password" name="password" id="password" /></td> </tr> </table> <div style="height:4px;"></div> <table cellspacing="0" cellpadding="0" border="0" class="jul_table"> <tr> <td class="jul_content" align="center"><div id="jul_ctrl_box">Please Enable JavaScript</div> <iframe src="about:blank" name="jul_auth" id="jul_auth" class="jul_iframe"></iframe> <script language="JavaScript" type="text/javascript">jul_start();</script> </td> </tr> </table></form> </td> </tr> </table> </body> </html>

Code: User-file

This is the file that is used to validate that a user exists. It should be saved using the following format: USERNAME~PASSWORD.htm. By default this file should be placed in an "accounts" folder (1 level up from the login script). This file also specifies what page the user should be redirected to once they have successfully logged in.

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>User-file</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript" type="text/javascript"> // // Javascript User Login 4.0 // User-file // Some Rights Reserved // http://webdeveloper.50webs.com // var membersPage= "membersonly.htm"; // Filename of the member's only page var displayName= "John Doe" // The user's display name parent.jul_success(membersPage, displayName);// Tells main page to relocate to url in above variable and to display their name </script> </head> <body> </body> </html>

Code: Password Protected Page

The code for this is optional, however not including this code disables newly implemented features such as sessions and displaying the username and time of login to the user.

<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Member's Only Page</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="javascript" type="text/javascript"> // // Javascript User Login 4.0 // Member's Only Page // Some Rights Reserved // http://webdeveloper.50webs.com // // Script Preferences var returnPage = "index.html" // The Page to return to if session expires. var sessionMax = "1" // Maximum amount of minutes the session will last (Must be a number 0-1439) var pageRefresh = ".125" // Amount of minutes until the webpage is refreshed (Any number. 0 will disable feature) var expiredSessionMsg = "Your session has expired."; // Message that will be displayed when the user is using an expired session // Script Functions (Edit only if you agree to the terms of use) function jul_logout() { document.cookie = "jul_auth=0000000000000000000000; max-age=" + 60*60*24 + "; path=/"; alert(expiredSessionMsg); location.replace(returnPage); } function jul_check() { document.getElementsByTagName('body')[0].style.display = 'block'; } var displayName = ""; var displayTime = ""; var displayLeft = ""; function jul_start() { var search = "jul_auth=" if(document.cookie.length > 0){ offset = document.cookie.indexOf(search); if (offset != -1){ offset += search.length; end = document.cookie.indexOf(";", offset); if (end == -1){ end = document.cookie.length; } var str = unescape(document.cookie.substring(offset, end)) } } if ((str == null) || (str == "")) { alert('Error:\nCookies are required to view this page.');jul_logout(); } var auth= new Date() var authSe = "" + auth.getSeconds(); var authMi = "" + auth.getMinutes(); var authHo = "" + auth.getHours(); var authDa = "" + auth.getDate(); var authMo = "" + auth.getMonth(); var authYe = "" + auth.getFullYear(); authYe = authYe.slice(2,4); if ((authYe*1) >= 50) { authYe= authYe-50; } if ((authYe*1) == 0) { authYe= 51; } if (authMi.length < 2) { authMi = "0" + authMi } if (authHo.length < 2) { authHo = "0" + authHo } if (authDa.length < 2) { authDa = "0" + authDa } if (authMo.length < 2) { authMo = "0" + authMo } if (authYe.length < 2) { authYe = "0" + authYe } var verifCorrect = authYe +authMo + authDa + authHo + authMi var strLength = str.length/4; verifStr = ""; for (i=0;i<strLength;i++){ var temp= ""; var startStr = i*4; var endStr = startStr + 4 var strArray = str.slice(startStr,endStr) temp = strArray / authYe; if (i < 10) { verifStr+= String.fromCharCode(temp); } if (i >= 10) { displayName+= String.fromCharCode(temp); } } var verifYe = verifStr.slice(0,2); var verifMo = verifStr.slice(2,4); var verifDa = verifStr.slice(4,6); var verifHo = verifStr.slice(6,8); var verifMi = verifStr.slice(8,10); var isOkay = "yes" if ((Math.abs((((authHo - verifHo)*60) + (authMi - verifMi)))) > sessionMax || (sessionMax > 1439)) {isOkay = "no";} if ((verifHo != authHo) || (verifDa != authDa) || (verifMo != authMo) || (verifYe != authYe)) {isOkay = "no";} if (isOkay == "no") { jul_logout() } if (pageRefresh != 0) { setTimeout("history.go(0);", (1000 * 60 * pageRefresh)); } // Eye-candy displayLeft = ((authHo - verifHo)*60) + (authMi - verifMi); if (verifHo > 12) {verifHo = verifHo-12;} displayTime = verifHo+ ":" +verifMi; remainTime = (sessionMax-displayLeft) + " minutes"; if ((sessionMax-displayLeft) == 0) {remainTime = (60-authSe) + " seconds";} } jul_start(); function jul_displayName() { document.write(displayName); } function jul_displayTime() { document.write("This session started at "+displayTime+ " and expires in " +remainTime+ "."); } </script> <style type="text/css"> body { display:none; } .jul_table { border: 0px; background-color: #8CC63E; width: 100%; } .jul_table td, a:link, a:visited { font-family: Verdana, Arial, Helvetica, sans-serif; padding: 6px; color: #FFFFFF; font-size: 16px; text-decoration: none; } </style> </head> <body onload="jul_check();"> <table cellspacing="0" cellpadding="0" border="0" class="jul_table" width="100%"> <tr> <td valign="top"><b>Member's Area</b></td> <td valign="top" align="right"><script language="JavaScript" type="text/javascript">jul_displayName();</script> |<a href="javascript:jul_logout();">Logout</a></td> </tr> </table> <script language="JavaScript" type="text/javascript">jul_displayTime();</script> </body> </html>

Further Resources

Get/View Page Updates	Terms of Use
Previous Versions	Download Project

This page is currently not available due to technical problems.
Please contact the webmaster regarding this error.

Report an Error | Return to Top