...

View Full Version : How to password protect a page?



arad
08-24-2006, 05:06 AM
I need help with a code which should do the following: when clicking on an image the user should be prompted to enter a password that when entered correctly will take the user to that password protected page.

I have some code already that was done by another person who originally created the website, but I don't want the password to be visible anywhere (not in the code or when entering it in).

This is what I have so far:

function whereTo()
{
var magic_word = prompt("Enter Password","");
if(magic_word == "password")
{window.location = "index.html";}
else if (magic_word == "letmein")
{window.location = "staffsite.html";}
else
{window.location = "index.html";}
}

Then later in the code:
<a href="staffsite.html" onClick="whereTo();return false"><img src="images/tooth.gif" width="51" height="72" border="0"></a>

Any help is greatly appreciated.

_Aerospace_Eng_
08-24-2006, 06:33 AM
JS is not the language for password protection. Looks like you'll be learning a server side language. I recommend php.

Scriptbanger
08-24-2006, 06:56 AM
Here's a simple option. It let's you "password" protect as many pages as you want since the password(s) is/are actually the page file name minus the .htm extension. Not high security but effective for simple applications. _Aerospace_Eng_ (http://www.codingforums.com/member.php?u=18194) is right if you need anything more advanced.



<script>
function getPW(){
var password = ''
password=prompt('Please enter your password:','');
if (password != null) {
location.href= password + ".htm";
}
}
</script>

<a href="javascript:getPW();">Text or Image here</a>


Not sure if this helps or not.

arad
08-25-2006, 12:22 AM
It seems like the code you gave me is doing pretty much the same thing that my code is doing. It does help me a lot to know that I will need a server side language to have it more secured. For now I am going to keep what I have so far but I was wondering if you knew how to make the letters being typed in the password box invisible? (How to hash them)

Here's my code again:

function whereTo()
{
var magic_word = prompt("Enter Password","");
if(magic_word == "password")
{window.location = "index.html";}
else if (magic_word == "letmein")
{window.location = "staffsite.html";}
else
{window.location = "index.html";}
}

<a href="staffsite.html" onClick="whereTo();return false"><img src="images/tooth.gif" width="51" height="72" border="0"></a>

Thanks for the help in advance.



Here's a simple option. It let's you "password" protect as many pages as you want since the password(s) is/are actually the page file name minus the .htm extension. Not high security but effective for simple applications. _Aerospace_Eng_ (http://www.codingforums.com/member.php?u=18194) is right if you need anything more advanced.



<script>
function getPW(){
var password = ''
password=prompt('Please enter your password:','');
if (password != null) {
location.href= password + ".htm";
}
}
</script>

<a href="javascript:getPW();">Text or Image here</a>


Not sure if this helps or not.

Scriptbanger
08-25-2006, 09:56 PM
Are you wanting them to appear as ******?

If so, that works in a '<form><input type="password"></form>'. I don't think you can get a prompt box to do that.

You will need to either put the login onto the page with '<form><input type="password"></form>' or you will need to put it in a separate page and do a whole window.open routine where you design a pop-up that opens the second page that holds the password form.

GSimpson
08-26-2006, 08:00 AM
If you want to protect, very basicly have a link to your protected page from your image like so:


<a href="protectedpage.htm"><img src="image.gif"></a>

ok your protected page looks like this:


<html>
<head>
<title>Pass Protected.</title>
<script language="javascript" type="text/javascript">
var password;
var pass1="test";
password=prompt('Please Enter Your Password:');
if (password==pass1) { alert('Correct!'); }
else
{
window.location="index.htm";
}
</script>
</head>
<body>
<a href="http://ambitous-spirit.freehostia.com">your hidden content.</a>
</body>
</html>


Explain:

When you click the image link on 'previouspage.htm', you go to the password protected page, where it prompts for a password. The password that works is
'test'. You can add more passwords for more people or you can add usernames simply.To this very script in use go to http://www.freewebs.com/jsstest. However my htm and js isn't up-to-scratch so there my be mistakes.
Let me know for any questions.

arad
08-27-2006, 11:13 AM
Thanks for your guys' help. I tried your code but the letters are still showing up when you type in the password. I think I got the idea that if I want it protected I will need server side scripts such as php or sql.

I was also wondering if anybody knows how to get a script or something, to do the following: when the user receives a new email into their inbox I want a small window to pop-up from the bottom right corner of the screen telling them that they have a new email.

Thanks for your help.
AR

GSimpson
08-27-2006, 10:15 PM
Like as script banger said, I don't think you can **** a prompt box.
next,
if someone has there windows messenger open then it should tell them in outlook express popup, however they would have to be on your website and it would have to be an automatic thing that it displays. It won't have permission to access their gmail or what ever to see if it got a new e-mail.

So you'll probably find yourself using css on this one.
if you don't know what css is, its creating layouts and themes for your website.

arad
08-28-2006, 03:58 AM
Actually what I want is for example: for me to be able to receive this email notification. If I'm working on a computer at an office I would want to be notified if I have new email in my inbox. Patients send email to schedule an appointment and I would want to know right away if an email came in so I could check my inbox.

What I want is a small pop-up box to come up from the bottom right corner of the screen saying "You've got mail." I don't know if my email has to be open for this to work. (I want it to be kind of like the box that comes up saying your download is complete).


Like as script banger said, I don't think you can **** a prompt box.
next,
if someone has there windows messenger open then it should tell them in outlook express popup, however they would have to be on your website and it would have to be an automatic thing that it displays. It won't have permission to access their gmail or what ever to see if it got a new e-mail.

So you'll probably find yourself using css on this one.
if you don't know what css is, its creating layouts and themes for your website.

elfpickle
08-28-2006, 07:34 AM
THere is a way to pwd protect a page without the password being seen, using javascript, but as others have said. It's not as secure as a server side scripting language.

First thing you need to do is create a page with 2 frames. ie
---
<frameset rows="100,0" frameborder="NO" border="0" framespacing="0">
<frame src="./pagewithpicture.html" name="mainFrame">
<frame src="./secretpasswdpage.htm" name="bottomFrame" scrolling="NO" noresize>
</frameset>
<noframes>
---
obviously dont call it 'secretpasswdpage'. otherwise it will be easier to find. Notice i've made the mainFrame 100% of the screen and the bottomFrame 0%. This makes that page impossible to access from your main page. ie Cant right-click to view source or 'View' -> 'Source'


Now you have this page done. Next make the 'sercretpasswdpage.htm'. Make a basic page layout the same as below but with the passwd or passwords you wish to use.

---
<html>
<title></title>
<head>
</head>

<body onFocus="window.location="pagewithpicture.html">
<input name="pwds" type="hidden" id="pwds" value="yourpasswd" >
</body></noframes>
</html>
-----
Notice the onFocus command. This is so that if someone viewed the source of the main frameloader page they would see the secretpasswdpage.htm and try to load it into the browser so they could view source. This just automatically loads the picture page before it even loads the secretpasswdpage.htm. ( if they really wanted to they could use a download manager to download the html file then edit source. But you can also CHMOD so they dont have download rights.

Ok just about done. Note that if you wanted to get serious there are a few encryption algorithms floating around for jScript that could make it tough for people to work out.

Now we just need to put the code for clicking on the picture and entering the password. It looks like this

<script language="JavaScript1.2">
var attempts = 0
var maxattempts = 4
function startpasswd(){
status = "You have " + (maxattempts - attempts) + " attempts left!";
password = prompt("Enter Password to view page","");

if(attempts == maxattempts){window.location = "denied.html"; return;}

if(password == parent.bottomFrame.document.all['pwds'].value){ window.location = "done.html";}
else {
alert("Password Authentication Failure!");
++attempts;
status = "You have " + (maxattempts - attempts) + " attempts left!";
startpasswd();
}

}
</script>

and for the image add the onclick command below.

onclick="startpasswd()"


Simple done. It works pretty well and will keep out people who dont have any time to try and get in.

Sorry about the length of post:thumbsup:

elfpickle
08-28-2006, 12:34 PM
Here is a small encryption script i made which works ok. You can add it to the hidden frame page. Ill let you work that one out.



function encryptme(stbase){

var encrypted = new String;
var tmp = 0.0;
var str = stbase;

for (var i = 0; i < str.length; i++) {
tmp = str.charCodeAt(i);
tmp ^= 0x0F;
encrypted += String.fromCharCode(tmp);
}

if(encrypted == document.all['pwds'].value){

return(true);

}
else { return(false);
}
}
</script>


just put a hidden input field on the page with the id "pwds" and the value will be the encrypted password. To get this value you will have to run a string through the above function. write down the outputed encrypted value then add it. done

now on the main frame add.
--
if(parent.bottomFrame.encryptme(password)) { window.location = "blah.html"}

obviously you wont put the name of the page you want to load with the correct password. you would have to stuff around with pwd checks and opening new frames so the destination is hidden.
pretty simple:cool:

iota
08-28-2006, 01:18 PM
JS is not the language for password protection. Looks like you'll be learning a server side language. I recommend php.

I support Mr _Aero's idea. We've discussed about this last year or a long time ago.

The only way is to encrypt your JavaScript code before planning to protect with password.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum