 |
|||
 |
 |
Welcome to GateKeeper v2.2! This version of GateKeeper is very easy to install. A few simple bits of code and you're off. Here is an example...
Unless you know the password, you can't access the document. Actually the password is the name of the document. If you make your password red_rose, then just name the target document red_rose.html. Easy!
Once more because I have gotten a surprising number of letters asking how to change the password... The password is the name of the document. If you make your password red_rose, then just name the target document red_rose.html
By the way, the password for the previous example is redrum. Now that you see what it does, I'll show you how to easily add it to your pages. But, before I do, let me make something absolutely clear... this is a very low level security device. If you are a NSA employee, do not use this for hiding national secrets. If you are the President of MasterCard, do not put everyone's credit card numbers behind this thing. However, if you're a regular guy that has a page or two that you don't want every Tom, Dick and BlowHard visiting, then this should safely do the trick.
(If you're interested in server based http authentication you may want to look here.)
Here is how to add it to your pages:
What I'll do is have you build a small set of pages from scratch. You can then incorporate the appropriate elements into your pages.
There are only 2 documents that we must concern ourselves with...
First we'll make the starting page. Copy the following and save it in a new folder somewhere as index.html.
<HTML> <HEAD> <TITLE>My Page</TITLE> </HEAD> <BODY> </BODY> </HTML> |
Then add the following to the HEAD tag...
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT language="JavaScript"><!--
/*********************************************************
GateKeeper v2.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 = "Password Protected Area"
function gateKeeper() {
var password = prompt("Password required:", "");
this.location.href = password + ".html";
}
//--></SCRIPT>
</HEAD>
<BODY>
</BODY>
</HTML>
|
Now add the link:
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT language="JavaScript"><!--
/*********************************************************
GateKeeper v2.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 = "Password Protected Area"
function gateKeeper() {
var password = prompt("Password required:", "");
this.location.href = password + ".html";
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:gateKeeper()"
onMouseOver="self.status=statusMsg; return true"
onMouseOut="self.status=''; return true"
onClick="gateKeeper(); return false">Click here</A> for my secret page!
</BODY>
</HTML>
|
Then add a bit for those with Javascript disabled:
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
<SCRIPT language="JavaScript"><!--
/*********************************************************
GateKeeper v2.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 = "Password Protected Area"
function gateKeeper() {
var password = prompt("Password required:", "");
this.location.href = password + ".html";
}
//--></SCRIPT>
</HEAD>
<BODY>
<A HREF="javascript:gateKeeper()"
onMouseOver="self.status=statusMsg; return true"
onMouseOut="self.status=''; return true"
onClick="gateKeeper(); return false">Click here</A> for my secret page!
<NOSCRIPT><FONT COLOR="#FF0000">
<BR>Javascript is required to access this area.
Yours seems to be disabled.
</FONT></NOSCRIPT>
</BODY>
</HTML>
|
That's it for the starting page. Now we'll make the target document.
Copy the following and save it as whatever you want the password to be. If you want our password to be wiggleworm then save it as wiggleworm.html. I think I want my password to be redrum so I'll save it as redrum.html.
<HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <H1 ALIGN=center>My secret page!</H1> </BODY> </HTML> |
Now load index.html in your browser. Remember, the password is the name of the document so the password here will be redrum.
I've included these 2 docs in a self-contained zipfile if you need it.
Let me take this time 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.)
Well, that's it for the basic Gate Keeper. You can stop here, or read on to learn a few minor modifications or how to use it with frames.
You can easily change the default status bar message when the mouse is over the link. Open index.html and alter the following line...
[snip]...
// You can edit the following line to change the status bar message.
var statusMsg = "Password Protected Area"
...[snip]
|
Let's suppose that for whatever reason, you wanted to have the target doc in another directory (such as targets/). In other words, instead of looking for redrum.html you want it to look for targets/redrum.html (but you don't want your visitor to have to type in targets/).
Just edit the following line in the script from this...
this.location.href = password + ".html";
To this...
this.location.href = "targets/" + password + ".html";
TRY IT (password is redrum) Also notice in this example there is a blank html doc named index.html in the targets directory.
When the Gate Keeper prompt box appears, it says Password required:. You can change this by editing the following line in the script...
var password = prompt("Password required:", "");
TRY IT (password is redrum)
Just edit the following line in the script from this...
this.location.href = password + ".html";
To this...
parent.rightframe.location.href = password + ".html";
Here is a zip file containing the documents for the above example.
Where rightframe is the NAME of the target frame. The scripting goes on the page with the link. If you need to brush up on frames, wander on over to Frames Tutor for a refresher.
You can specify default text in the prompt box if you wish..
Here is an example. (password is redrum)
Just edit the following line in the script from this...
var password = prompt("Password required:", "");
To this...
var password = prompt("Password required:", "Enter your secret code here");
You could string together 2 prompt boxes for a mock username & password verification.
Here is an example. (username is slip, password is mahoney)
Here is the altered code for the above example...
[snip]...
function gateKeeper() {
var username = prompt("Enter your username:", "");
var password = prompt("Enter your password:", "");
this.location.href = username + "/" + password + ".html";
}
...[snip]
|
Now, I can hear a question bubbling up. The answer is.. no, you can't get them to appear on the same prompt box. It has to be one, then another.
And that's it for version 2 of the GateKeeper. Have fun with it!
| ||||||
