GateKeeper version 3.2

	Protect a page with

Example.

This version of GateKeeper is also made by Joe Barta of Professional Web Design. As a "finishing touch" we now also take care of the cosmetics. First of all we make the box where you enter the password look a bit better. Furthermore the processing of the password entry is significantly improved. If an incorrect password is entered, we now no longer get the message that the page cannot be found, but instead we see a notification about the fact that a wrong password was entered, and the visitor is rerouted to an alternate page. Also time-out and the password can be stored locally in a "cookie".

Here on the left is a link to an example. The password is access

keeper3.exe

Try to enter a wrong password or click help, and find out what happens. By the way, you have to be on-line for this example to work properly. If you work off-line, directly from disk, the behaveour is unpredictable when you enter a wrong password. Most likely you will get a "page not found" notification in the password box.
In order to achieve the effect of the example above we need a rather complicated piece of JavaScript that we will work-out here. All files in the example above are available as aselfextracting zip file via the link on the left.

For the functioning of this script, a number of files are needed. We start with the page that contains the link to the protected area. The code for this page is here below.


<html>
<head>
<title>GateKeeper</title>

<script language="JavaScript">
<!-- Begin
/*******************************************************
             GateKeeper v3.2  -  by Joe Barta
       http://junior.apk.net/~jbarta/tutor/keeper/
     Permission is granted to freely use this script.
********************************************************/

// You can edit the following line to change
//the status bar message.
   var statusMsg = "Protected area, password required."

function gateKeeper() {
   gateKeeperBox = window.open('gatemain.htm',
   'theKeeper', 'width=230,height=100,resizable=yes');
}

//-->
</script>

</head>
<body bgcolor="#FFFFFF">

<a href="javascript:gateKeeper()"
   onMouseOver="self.status=statusMsg; return true"
   onMouseOut="self.status=''; return true"
   onClick="gateKeeper(); return false">Click here</A>
   for my protected page!
<noscript>
   <font color="#FF0000"><BR>For access to this
   protected area, Javascript support is required.
   Your browser does not seem to support that, or
   you turned-of the support for JavaScript.
</font>
</noscript>

</body>
</html>

The visitor's browser has to support JavaScript ofcourse, and if this is not the case the text between the noscript tags is displayed (blue here above). If we take a closer look at the link to the protected page, we see that if the visitor moves the mouse over the link, the statusbar will display the text that is defined in the variable statusMsg. The code that takes care of that is the green stuff above. When the link is clicked, the JavaScript function gateKeeper() is called, which takes care of the opening of the password window, containing the page gatemain.htm. The code that does that is the red stuff above.

Gatemain.htm is discussed below.

How GateKeeper works.

As I said before, gatemain.htm is displayed in the newly opened window. Is is a frameset with a nice piece of JavaScript code. The frameset consists of four vertically stacked frames, and all four frames are initially loaded with an empty page called gateblank.htm. The code for this page is below.

<html>
<head>
<title>GateBlank</title>
</head>
<body bgcolor="#FFFFFF">
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

Of the four frames that make-up gatemain.htm, only the upper three are visible. How this is done can be seen below in the definition of the frameset. The upper three frames simply occupy 100% of the available space, leaving 0% for the lower frame.


<FRAMESET rows="52%,24%,24%,*" BORDER="0" SPACING="0"
FRAMEBORDER="0" FRAMESPACING="0" onLoad="createDocs()">
  <FRAME SRC="gateblank.htm" NAME="topframe"    BORDER="0"
    MARGINWIDTH="0" MARGINHEIGHT="0" SPACING="0"
    FRAMEBORDER="0" FRAMESPACING="0" SCROLLING="NO">
  <FRAME SRC="gateblank.htm" NAME="middleframe" BORDER="0"
    MARGINWIDTH="0" MARGINHEIGHT="0" SPACING="0"
    FRAMEBORDER="0" FRAMESPACING="0" SCROLLING="NO">
  <FRAME SRC="gateblank.htm" NAME="idframe" BORDER="0"
    MARGINWIDTH="0" MARGINHEIGHT="0" SPACING="0"
    FRAMEBORDER="0" FRAMESPACING="0" SCROLLING="NO">
  <FRAME SRC="gateblank.htm" NAME="bottomframe" BORDER="0"
    MARGINWIDTH="0" MARGINHEIGHT="0" SPACING="0"
    FRAMEBORDER="0" FRAMESPACING="0" SCROLLING="NO">
</FRAMESET>

Example.

Beside the frameset, gatemain.htm also contains a large chunk of JavaScript between the HEAD tags. I will not explain this script in to much detail, but just give a global description of it's operation.

keeper3.exe

The files from the example are also available via the link on the left as a selfextracting archive.

In the top part of gatemain.htm, a number of variables are defined that are used later-on in the script. They are:

storedays:	The number of days that the cookie, that holds the stored password and timout value, is valid.
webmasterEmail:	E-Mail address of the webmaster
defaulttimer	The time-out value that is used when no value is stored in a cookie.
redirectpage:	The URL of the page a visitor is redirected to when he enters an invalid password.

Directle after the frameset is loaded, the function createDocs() is called. This function writes the form for entering the password in the page in the top frame, and the text with the links to 'Protected by GateKeeper' and 'Help' in the page in the third frame.

Once this is done, the script checks to see if a password was previously stored in a cookie. If this is the case, the password is entered and the form is processed. If no cookie with a previously stored password is found, the script waits until a password is entered in the box and the 'Enter' key is pressed. When the cookie is checked, the script also checks for a stored time-out value. If it finds a stored time-out value, it stores its value in the variable defaulttimer, replacing the default value.

When the form is processed, the script appends .htm to whatever is entered in the form, and tries to load the page with that URL in the bottom (invisible) frame. At the same time, a count-down timer is started with the initial value of defaulttimer, and the message "Verifying password" is written (in blue text) on the page in the second frame.

When the time-out timer has counted down to 0 before the target password page in loaded in the invisible frame, the function denyEntry() is started. The first thing this function does is overwriting the page in the second frame, showing a red background with the white text "password denied" Secondly, this function checks the value of the variable redirectpage. If the length of the contents of this variable is larger then 2, the window from which GateKeeper was called is transferred to this URL.

When the script succeeds in loading the target password page in the invisible frame before the time-out time has passed, the onLoad event if this page will start the function speedVerify(). This function first stops the time-out timer, overwrites the page in the second frame with a green background and the white text "Password Accepted" and then sends the window that called GateKeeper to the URL that is stored in the variable target that is defined on the password page just loaded in the invisible frame.

Now, what about the cookies and the help file?

The help page.

In the third frame of the GateKeeper box there is a link to 'Help'. You can click this link if you need help or want to save your password. Clicking this link opens an extra box, containing gatehelp.htm. This help screen gives answers to a few simple questions and also offers the opportunity to save a cookie storing your password and/or a time-out value. This cookie is checked during the start of gatemain.htm. This way, you can use a different time-out value than de default one in order to avoid problems if you are connecting via a slow link. If you also store your password in this cookie, this password is automatically entered while starting GateKeeper. If the password changes, or you want to remove it, you can also change or remove the password via this help page.

Installing GateKeeper on your own website.

keeper3.exe.

How do you install GateKeeper on your own website? Start with downloading the selfextracting archive keeper3.exe (via the link on the left) containing theGateKeeper example files.

Extract the files to the folder where you want GateKeeper.

Edit the file "gatemain.htm" to change a number of variables.


/*=======================================================
Define a few variables
========================================================*/
var storedays = "90";
var webmasterEmail = "someone@somewhere.com";
var defaulttimer = 10;
var redirectpage = "alternate.htm";

Above you see the first part of gatemain.htm, containing the variables to be changed.
In red you see the vaiable storedays. The value of it is the number of days that the cookie containing the password and/or time-out value remains valid.
In green you find webmasterEmail. You should enter your own email address here.
In blue you find the variable defaulttimer. The value here represents the time-out time in seconds. If you are working from a very slow server, or if you expect your visitors to connect via a very slow line, you may want to increase this value.
The last variable (purple) is redirectpage. Here you enter the URL of the page you want your visitor to see when he enters the wrong password.
Once these parameters are adjusted, you can save and close gatemain.htm.

Next you'll have to think about the password you want to use and change the name of the file access.htm accordingly. If f.i. you want to use "topsecret" as your password, this file needs to be called topsecret.htm. Remember that this naming is case sensitive on most web servers, so uppercase and lowercase characters are different. Now open the file you just renamed ,and change the value of target to the URL of the actual destination page. (below in red) To be clear, this is the URL of the page containing the information you wanted to protect.

// Replace secret/hide-out.htm below with the
// directory/filename of the destination page.
var target = "secret/hide-out.htm";

That is all that is needed to use GateKeeper on your own website. Again I would like to emphesize that this script only works 100% correct when used on-line. If you test the script off-line and you enter the wrong password, you will notice that something else will happen, depending on which browser you use. In most cases you will see a "page not found" message in the password box.

I would also like to make clear that you should have a file called index.htm both in the folder where GateKeeper resides and in the folder where the target page is. This is just to avoid that a visitor can simply browse his way thru your folders.

A nice variant to this version of GateKeeper, is the version where you do not only have to enter a password, but a username as well. This is called GateKeeperII and is discussed on the next page.

Last change on May 3^rd 2000.

Protect a page with

How GateKeeper works.

The help page.

Installing GateKeeper on your own website.