the  
GATEKEEPER
v3.2
Part 3
Part 1 | Part 2 | Part 3 | Part 4 (GateKeeper-II) | Version 2.2
Installation Overview | HTTP Authentication | The Vault

Before continuing, I want to explain something that is very important to the success of the Gate Keeper. On most servers, in order to prevent a listing of the directory's contents, you must have in that directory a document named index.html. This is the default document.

Let me explain further. If you want to access a particular document on a server you would type in (or link to) something like this...

http://yada.yada.com/mystuff/mypage.html

You would get mypage.html.

Let's suppose instead you chopped off the filename and just typed in the address of the directory...

http://yada.yada.com/mystuff/

On most servers, you would get a listing of every single file in that directory... unless there was a default document in that directory. Normally you want to name your default document index.html. (On a few servers the default document may need to be named default.htm or index.htm or even something else.)

What else can you do with GateKeeper? Well, you can change the mouseover message when the cursor is over the link. Look at your last excercise again. Note the status bar when the cursor is over the link...

Notice it says Password Protected Area. Let's change that to Members Only Chat Area. Open index.html and change the following line... 

[snip]...

// You can edit the following line to change the status bar message.
   var statusMsg = "Members Only Chat Area"

...[snip]

Now try it.

Let's suppose you had a members only page. And let's suppose that someone wanted to access that members only page but they weren't a member. They enter a bogus password and it gets denied. Wouldn't it be nice to immediately send them to your new member sign up page?

First you need an alternate page. Save the following as signup.html. Save it in the stuff folder. 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#CCCC99">
<H2 ALIGN="center">New Member Sign Up Page</H2>
</BODY>
</HTML>

Now open gatemain.html and add the redirect page... 

[snip]...

/*===============================================================
Define a few variables
================================================================*/
var storedays = "90";     // length of time (in days) to store saved password
var webmasterEmail = "";  // webmaster's email address
var defaulttimer = 10;    // Default length of time for GateKeeper to find the password doc.
var redirectpage = "signup.html"     // send visitors to this page if password is denied, full or relative url

...[snip]

Now look what happens when someone enters a bad password...

Try it.

Can I get this thing to work within frames?

Absolutely. Let's suppose you had 2 frames side by side. You want to click on a link in the left frame, have the GateKeeper pop up, and on entering a valid password, the target page opens up in the right frame.

Here is an example. (password is frumpy)

And here is a zip file that contains that example. (If you have problems with zip files, these documents can be found here ready to copy.)

It is a simple matter to convert our first example to this frames thing. First, rename index.html to left.html. Then you need two more documents, a right frame document and a master page. Save the following as right.html. 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF">
<H3 ALIGN="center">right.html</H3>
</BODY>
</HTML>

And save the following as index.html (you did rename the other index.html to left.html?) 

<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>

<FRAMESET COLS="20%,80%">
  <FRAME SRC="left.html" NAME="leftframe">
  <FRAME SRC="right.html" NAME="rightframe">
</FRAMESET>

</HTML>

Now open frumpy.html and add the following. 

[snip]...

function letThrough() {
  parent.opener.parent.rightframe.location.href = target;
  if(parent.keeperBoxStayOpen == 0) {
     parent.close();
  }
}

...[snip]

This simply tells the script to load into the main browser frame named rightframe.

If you were using a redirect on entering a bad password, you would have to edit yet another line. (Near the end of gatemain.html) 

[snip]...

      if (redirectpage.length > 2) {
         parent.opener.parent.rightframe.location.href = redirectpage;
      }

...[snip]

There's another item of configurability that I'm going to mention, although unless you hear of a definite problem, I suggest you leave it as it is. After sending out the call for frumpy.html, the script pauses for 10 seconds to give the server a few moments to send the page, and the browser a few moments to load the page. Only after 10 seconds has passed, will it check for the password. Keep in mind that this delay is normally only apparent when an incorrect password is entered. If a correct password is entered, as soon as frumpy.html is loaded it proceeds to fill the browser with the target page and kill the gatekeeper window. Usually that ends the first script before the 10 seconds are up.

Also know that this item is adjustable by the user. If only the occasional user is on a really slow connection, he can adjust his delay for himself via the help page.

If you believe that many of your users are on very slow connections, or if you get a lot of complaints about the password being denied and you suspect that this is the problem, you can increase this delay for everyone. Open gatemain.html and alter the following to however many seconds you want... 

[snip]...

var storedays = "90";     // length of time (in days) to store saved password
var webmasterEmail = "";  // webmaster's email address
var defaulttimer = 10;    // Default length of time for GateKeeper to find the password doc.
var redirectpage = ""     // send visitors to this page if password is denied, full or relative url

...[snip]

Now would be a good time to look at and experiment with the items in the help file. When the GateKeeper box pops up, click on the Help link. The first thing you'll see is a place to save & unsave your password. Try this to see how it works. Further down the page you'll see the area where the user can increase the Password Denied delay. Even further down is an area where a user can report a problem to you, me or both of us. My email address is already coded in. If you want to get feedback from this you will have to add your email address to gatemain.html.

So, open gatemain.html and add your email address... 

[snip]...

var storedays = "90";     // length of time (in days) to store saved password
var webmasterEmail = "you@your.place";  // webmaster's email address
var defaulttimer = 10;    // Default length of time for GateKeeper to find the password doc.
var redirectpage = ""     // send visitors to this page if password is denied, full or relative url

...[snip]

While we have this open, note the line right above it. It defines the variable storedays. this is the number of days that the user's password will be saved. After 90 days he will have to enter it manually again. You can alter this to save for as many days as you like.

Well ladies & gents, that about covers the use of GateKeeper v3.2. I'll run down an overview of items you need to think about when setting this up...


    Mandatory:
  1. Add the GateKeeper files. Everything that starts with "gate".
  2. Add and configure the intermediate page. You can simply modify frumpy.html for this. You need to rename it to whatever password you want to use and you must alter the path/target variable.
  3. Add the scripting to the link and to the HEAD of the page that the link is on.
     
    Optional:
  4. Change the status bar message.
  5. Add a redirect page for wrong passwords.
  6. Make the proper adjustments if you're using it in frames.
  7. Adjust the default time delay.
  8. Add your email address to the help page. This is not mandatory, but it's still a good idea.
  9. Adjust the number of days the password is saved.

I thought you said there was a way to use a both a password AND a username? Did you forget about that?

Not at all. It's just saved for the next part. It's not really an adjustment to the GateKeeper. It's different enough that I decided to call it GateKeeper-II and devote an entire section to it. Learn about it in part 4.

Part 4...

Part 1 | Part 2 | Part 3 | Part 4 (GateKeeper-II) | Version 2.2
Installation Overview | HTTP Authentication | The Vault

General Table
of Contents		 So, you want to make a Web Page!
Table Tutor - Form Tutor - Frames Tutor		 Barebones
HTML Guide
PROFESSIONAL WEB DESIGN Joke BreakJoke Break