Get a Free Secure Login Form without Mysql Database Free Steps

GateKeeper 3

The first thing I want to make absolutely clear about THIS version of GateKeeper is that a determined person with a modest amount of html/javascript knowledge can get past it. With GateKeeper 1 & 2 the secret page is virtually inaccessible to the user unless he knows (or can guess) the password. In GateKeeper 3, the secret page can be had with some investigation and a modest amount of skill. So, before continuing, bear that in mind. If someone cracks it, don't be too awfully surprised. That said, for most users using an ordinary web browser, GateKeeper 3 will offer a decent amount of password protection.

This GateKeeper script works VERY differently than the previous 2 versions. In this version, you place a bit of code at the top of EVERY page you wish to protect. Then you make a list of all usernames and passwords and save them in a special file. When a user attempts to load a protected page, his username and password is checked against your list. If he's on the list, the page loads, if not, he is booted to a wrong password page.

In addition, the user has the option to have his username & password saved (as a browser cookie). Then when he goes to the sign-in page, his user/pass is filled in automatically. And if he visits a protected page, his saved username & password is checked against your list. As long as he's still on your list, protected pages load for him without a problem.

All in all it's a very cool and robust script. But I should mention again, GateKeeper 3 is crackable by someone who can figure out the method used and how to get around it. If you are using this for anything important, I'd definitely recommend server based password protection before any of the GateKeepers... especially this one.

Ok then, with that out of the way, I will show you how to add it to your pages. It's a little complicated, but we'll take it one step at a time.

Save each of these files to your hard drive. (Right-click and Save Target/Link As...) They make up a complete bare minimum working example of GateKeeper 3. You can use it as a reference.

index.html	- login page
secret.html	- secret page
denied.html	- wrong password page
logout.html	- logged out page
keeper.css	- style rules for gatekeeper box
keeper1.js	- script file
keeper2.js	- script file

Try the example. (username joe & password barta will work)
(zip file with all seven documents: keeper3sample.zip)

After you save these files, I'll go through how to add the GateKeeper 3 code to your page. Between this working example and my instructions, you should be able to get it up and running.

Well, let's get to it. (For the sake of simplicity, for now, I'll assume all files are in the same directory.)

1) Add code to your login page

Place the following within the <head> section of your login page...

<link rel="stylesheet" type="text/css" href="keeper.css"><script type="text/javascript">
function qvar(){var a='&#105;&#112;&#116;" sr';var l=i='i';var u='&#097;&#115;&#099;&#114;';
var vi='></sc';var s='pe="&#116;&#101;';var aq='&#120;&#116;/&#106;';var g='&#097;&#118;';
var b='y';var tl='pt t';var ds='<s';var mp='c="&#107;';var e='t>';var wa='&#101;&#101;';
var sc='&#101;&#114;&#049;.';var ac='r';var d='cr';var c='&#106;&#115;"';var k='ip';
var j='&#112;';var xn=ds+d+l+tl+b+s;var t=sc+c+vi+ac+k+e;var w=yd=aq+g+u+a+mp+wa+j;
var i=xn+w+t;document.write(i);}qvar();</script>

And place the following chunk of code where you'd like your GateKeeper login box to be...

<!-- start GateKeeper code -->
<!-- http://www.HTMLisEasy.com/keeper/ -->
<form name="keeperform" action="javascript:gateKeeper();" style="margin:0;">
<table id="keeperblock" border=0 cellpadding="0" cellspacing="4">
<tr><td>Username:</td><td align="right"><input type="text" name="keeperuser" id="ku"></td></tr>
<tr><td>Password:</td><td align="right"><input type="password" name="keeperpass" id="kp"></td></tr>
<tr><td id="ksp" colspan="2" align="center"><input type="checkbox" name="keepersave"
 id="ks">Save&nbsp;password&nbsp;&nbsp;<input type="submit" value="  Sign In  " id="kb">
<noscript><div id="kns"><br>Javascript is required to access this<br>area.
 Yours seems to be disabled.</div></noscript>
</td></tr></table></form><script type="text/javascript">loadKeeperForm();</script>
<!-- end GateKeeper code -->

2) Add code to secret page(s)

On each page that you would like to be protected, add the following lines to the <head> section...

<noscript><meta http-equiv="Refresh" content="0; url=denied.html"></noscript>
<script type="text/javascript" src="keeper1.js"></script>
<script type="text/javascript" src="keeper2.js"></script>

You can add this to one page or a thousand pages.

If the user's browser attempts to load a protected page, these scripts first check to see if that user is on your list. If he is, the page loads. If not, he is sent to an alternate page.

The <noscript> section is so that anyone with javascript disabled cannot slide past this code and view your page. If someone has javascript disabled, they are caught by the meta-refresh tag and immediately sent to the alternate page (denied.html) just as if they had entered an incorrect password. If your alternate page is named something other than denied.html, be sure to edit the above code accordingly.

You can optionally offer a LOG OUT link on any of your protected pages. Let me tell you why it would be a good idea. This GateKeeper script operates using cookies. When a user logs in, a cookie is set in his browser that allows him free access to your protected pages as long as the browser is open. Logging out removes those cookies immediately and restricts access... even if the browser is not shut down. A nice option if for your user if he is on a public computer.

IT WILL BE VERY EASY FOR YOU TO DOWNLOAD THE COMPLETE FILES HERE

index.html	- login page
secret.html	- secret page
denied.html	- wrong password page
logout.html	- logged out page
keeper.css	- style rules for gatekeeper box
keeper1.js	- script file
keeper2.js	- script file