Javascript Tutorials

JavaScript Zone

Script Tutorials

Introduction
Pre-requisites
Installation
Notes

Password Access

Introduction

Related Links

This Javascript demonstrates how to use passwords to restrict access to parts of your web site, for example, adult content.

The users enter a password on the first screen. This password is then verified against a value held in a cookie (for example in a value created by the registration process), and if it matches the restricted second page is loaded, the entered password stored in a temporary cookie.

The second page then re-checks the entered password in the temporary cookie against the stored password cookie. If a match is found, the page is displayed. If the match fails, the user is returned to the first page.

Click on the link below for a demonstration of this script.

Password Demo

Pre-requisites

the visitor registration script must already be installed on your web pages

Installation

Cut and paste the following code to your html page as indicated:

In the following scripts, the first html page requests a password, in order to allow access to the second, restricted, page. 1/4. Add the following code to the <head> part of the first html page: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // cookie variables var expDays = 1; var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function GotoJokes(frm) { SetCookie('PT_TempPassword', "xxx", exp); // check registration if (!GetCookie('PT_VisitorName')) { alert("You must register with this site to access the Jokes Page."); return; } // check over 18 check if (!GetCookie('PT_Over18') || (GetCookie('PT_Over18') == 0) || (GetCookie('PT_Over18') == null) ) { alert("You must be over 18 to access the Jokes Page."); return; } // check password match if ( (frm.f_jokes.password.value == "") || (GetCookie('PT_Password') != frm.f_jokes.password.value) ) { alert("The correct password must be entered."); return; } // store entered password and go to jokes page SetCookie('PT_TempPassword', frm.f_jokes.password.value, exp); window.location.href = "jokesp.html"; // <-- ENTER YOUR RESTRICTED PAGE HERE !!! } // cookie functions function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } //--!> </script> 2/4. Add the following to the <BODY> part of the first page: <form name="f_jokes"> <p>Password: <input type=text name=password> </form> <p> Continue to the Jokes page if you are 18 years or older, absolutely nothing offends you, and you have no taste in jokes.<br><br></small> <center><a href="javascript:GotoJokes(this);">Go to Jokes</a></center> 3/4. Add the following to the <HEAD> part of the second (restricted) page: <SCRIPT LANGUAGE="JavaScript"> <!-- Begin // cookie variables var expDays = 1; // was 30, forces 'go to page 1' on new day var exp = new Date(); exp.setTime(exp.getTime() + (expDays*24*60*60*1000)); function CheckPassword(frm) { // check registration if (!GetCookie('PT_VisitorName')) { alert("You must register with this site to access the Jokes Page."); window.location.href = "jokezone.html"; // <-- HTML PAGE IF ACCESS DENIED return; } // check over 18 check if (!GetCookie('PT_Over18') || (GetCookie('PT_Over18') == 0) || (GetCookie('PT_Over18') == null) ) { alert("You must be over 18 to access the Jokes Page."); window.location.href = "jokezone.html"; // <-- HTML PAGE IF ACCESS DENIED return; } // check password match if ( !GetCookie('PT_TempPassword') || (GetCookie('PT_Password') != GetCookie('PT_TempPassword')) ) { alert("The correct password must be entered."); window.location.href = "jokezone.html"; // <-- HTML PAGE IF ACCESS DENIED return; } } function getCookieVal (offset) { var endstr = document.cookie.indexOf (";", offset); if (endstr == -1) endstr = document.cookie.length; return unescape(document.cookie.substring(offset, endstr)); } function GetCookie (name) { var arg = name + "="; var alen = arg.length; var clen = document.cookie.length; var i = 0; while (i < clen) { var j = i + alen; if (document.cookie.substring(i, j) == arg) return getCookieVal (j); i = document.cookie.indexOf(" ", i) + 1; if (i == 0) break; } return null; } function SetCookie (name, value) { var argv = SetCookie.arguments; var argc = SetCookie.arguments.length; var expires = (argc > 2) ? argv[2] : null; var path = (argc > 3) ? argv[3] : null; var domain = (argc > 4) ? argv[4] : null; var secure = (argc > 5) ? argv[5] : false; document.cookie = name + "=" + escape (value) + ((expires == null) ? "" : ("; expires=" + expires.toGMTString())) + ((path == null) ? "" : ("; path=" + path)) + ((domain == null) ? "" : ("; domain=" + domain)) + ((secure == true) ? "; secure" : ""); } function DeleteCookie (name) { var exp = new Date(); exp.setTime (exp.getTime() - 1); var cval = GetCookie (name); document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString(); } </script> 4/4. Add the following to the <BODY> statement on the second page: <BODY onload="javascript:CheckPassword(this);">

Notes

this tutorial demonstrates:
- how to use cookies
the code for maintaining cookies is taken from the original date last visited / number of visits javascript from the JavaScript Source - thanks
if you use this script, amend the variable names' prefix from pt_ to something meaningful to your site
this tutorial can be updated to use encrypted password techniques.

Page last updated 8th August 2001