Participant

Answered

Simple Password Protection on DW page

Forum|Forum|16 years ago
December 17, 2009
4 replies
30490 views

Hi, I am trying to employ a simple password-only protection to some pages on a website I'm building. I've found what should be the appropriate code at this site: http://javascriptkit.com/script/cut10.shtml

Here is their sample code, password only with a simple popup window to enter the password:

<SCRIPT>
function passWord() {
var testV = 1;
var pass1 = prompt('Please Enter Your Password',' ');
while (testV < 3) {
if (!pass1)
history.go(-1);
if (pass1.toLowerCase() == "letmein") {
alert('You Got it Right!');
window.open('protectpage.html');
break;
}
testV+=1;
var pass1 =
prompt('Access Denied - Password Incorrect, Please Try Again.','Password');
}
if (pass1.toLowerCase()!="password" & testV ==3)
history.go(-1);
return " ";
}
</SCRIPT>
<CENTER>
<FORM>
<input type="button" value="Enter Protected Area" onClick="passWord()">
</FORM>
</CENTER>

The difference is that instead of the centered input = button their sample has on the javascriptkit.com page, I'd like the form to be launched from the click of my Log In button I have in my design – or from clicking on the links for the three pages named: 'membermeetings.htm', 'boardmemberscommittee.htm', 'news_n_photos.htm'. Am I missing a <Form> wrap?

I could also use some tips on where and how much code to put into my <body> section; all of it, part of it?

Here is the code I entered in by adding "Call JavaScript" in behaviors:

onclick="MM_callJS('(\'function passWord() { var testV = 1; var pass1 = prompt(\\\'Please Enter Your Password\\\',\\\' \\\'); while (testV < 3) { if (!pass1) history.go(-1); if (pass1.toLowerCase() == \\"community\\") { alert(\\\'Welcome!\\\'); window.open(\\\'membermeetings.html\\\',\\\'boardmemberscommittee.htm\\\',\\\'news_n_photos.htm\\\'); break; } testV+=1; var pass1 = prompt(\\\'Access Denied - Password Incorrect, Please Try Again.\\\',\\\'Password\\\'); } if (pass1.toLowerCase()!=\\"password\\" & testV ==3) history.go(-1); return \\" \\"; }

Thanks in advance for your help! Brent

This topic has been closed for replies.

Correct answer WolfShade

Password protecting a folder is done on the webserver. The JavaScript at the top of this thread is insecure, as osgood_ pointed out that anyone can see the password by simply using "View Source".

If you want a secure login for a site, or a section of a site, you need a server-side solution (ie, ColdFusion/Lucee, PHP, JSP, etc.)

V/r,

^ _ ^

J

jodibuckley

Participant

I really need assistance. I'm totally new to this and my client wants me to password protect a folder within their site. I copied the first script at the top of this page and I don't know exactly where to insert the password within the script. Can you assist?

WolfShadeCorrect answer

Legend

Password protecting a folder is done on the webserver. The JavaScript at the top of this thread is insecure, as osgood_ pointed out that anyone can see the password by simply using "View Source".

If you want a secure login for a site, or a section of a site, you need a server-side solution (ie, ColdFusion/Lucee, PHP, JSP, etc.)

V/r,

^ _ ^

M

Mark.Kirkeby

Participating Frequently

seems like the most complicated way to lightly protect a web page, or directory,

Have you considered using .htaccess

you can call out and password protect by single pages, or you can put several pages in a directory and give a password to enter that directory

Here are a couple of resources

Comprehensive guide to .htaccess- password protection

Password Protect a Single File With HTAccess

http://www.htaccesstools.com/articles/password-protection/

B

bregent

Participating Frequently

>Have you considered using .htaccess

Yeah, that was mentioned early on (actually via the host control panel -- not .htaccess -- but essentially the same ) but was rejected by the OP because he thought it applied to the entire website. Nobody informed him that it can be applied to a folder and you can put everything you want to protect into that folder, or used on a single file.

O

osgood_

Legend

bregent wrote:

>Have you considered using .htaccess

Yeah, that was mentioned early on (actually via the host control panel -- not .htaccess -- but essentially the same ) but was rejected by the OP because he thought it applied to the entire website. Nobody informed him that it can be applied to a folder and you can put everything you want to protect into that folder, or used on a single file.

Wasn't it beacause they thought it produced an ugly pop alert box (via the control panel) which couldn't be integrated into the page?

EDITED Re-reading the post it does appear 'I'm only interested in protecting one specific page' in one reply.

I personally would not use the control panel to protect a page beacuse from what I remember it pops open a pretty ugly box outside of the websites widndow, although it will do the job alright.

O

osgood_

Legend

Here's a simple php solution which uses a Username (Pink) & Password (Elephant) combination. If the user gets the combination correct they are shown a link to the 'protected page', if they get it wrong they get a message asking them to 'go away'. You need your server to be running php to be able to use this method. It's safer than javascript because you can't get access to the Username or Password by looking the source code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Password Protected</title>
<?php
if (array_key_exists('ewTest' , $_POST)) {
$username = trim($_POST['username']);
$password = trim($_POST['password']);
if (($username == "Pink") && ($password == "Elephant"))
{
$response = "Youre welcome! <a href='http://www.bbc.co.uk'>Enter Here</a>";
}
else {
$response = "Go away!";
}
}
?>
</head>

<body>

<form id="form1" name="form1" method="post" action="passtest.php">
<label>Username</label><br />
<input type="text" name="username" id="username" value=""/><br />
<label>Password</label><br />
<input type="text" name="password" id="password" value=""/><br />
<input type="submit" name="ewTest" id="submit" value="Submit" />
</form>
<p>
<?php if(isset($response)) echo $response;?>
</p>

</body>
</html>

dewdezynAuthor

Participant

Thanks! Will this work on multiple pages? If so, how much of the

code (and which pieces/where) do I paste into the page codes?

I am trying to put a 'mild' protection on three pages of my website.

Thanks,

Brent DeWitt

DeWitt Design

216.534.6397

O

osgood_

Legend

dewdezyn wrote:
Thanks! Will this work on multiple pages? If so, how much of the
code (and which pieces/where) do I paste into the page codes?
I am trying to put a 'mild' protection on three pages of my website.
Thanks,
Brent DeWitt
DeWitt Design
216.534.6397

Yes it works on multiple pages. You would just duplicate the page, rename it something else and link the next page you want protected to it (read below)

Below is a page which has been styled up a bit more (see code below)

All you do is copy the whole of the code. Insert it into a new Dreamweaver document and save it as passwordProtected.php (remember this will only work if you have php running on your host server i.e., the server that your website is hosted on).

Link the first page you want protected to the 'passwordProtected.php' file.

You can change the 'username' & 'password' to anything you like. Just look for the line below in the code and change "Pink" & "Elephant" to what you require.

if (($username == "Pink") && ($password == "Elephant"))

Look for this line below and change 'http://www.bbc.co.uk' to the webpage you want protected.

$response = "Youre welcome! <a href='http://www.bbc.co.uk'>Enter Here</a>";

If you want to protect multiple pages just duplicate the 'passwordProtected.php' file, rename it something like 'passwordProtected_2.php', link your next protected page to it and change the url address in the php code.

Here is the complete page code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<?php
if (array_key_exists('ewTest' , $_POST)) {
$username = trim($_POST['username']);
$password = trim($_POST['password']);
if (($username == "Pink") && ($password == "Elephant"))
{
$response = "Youre welcome! <a href='http://www.bbc.co.uk'>Enter Here</a>";
}
else {
$response = "Sorry, you do not have permission to access this webpage!";
}
}
?>
<style type="text/css">
#wrapper {
width: 250px;
padding: 20px;
margin: 20px auto;
background-color:#CCC;
font-family: verdana, arial, helvetica, sans-serif;
font-size: 11px;
}
#wrapper p {
margin: 0 0 0 0;
padding: 0;
text-align: center;
}
input {
width: 250px;
}
input#submit {
width: 100px;
margin: 15px 0 0 0;
}
</style>
</head>

<body>

<div id="wrapper">
<p style="margin-bottom: 10px;">Please enter your Username & Password below. (Case sensitive)</p>
<form id="form1" name="form1" method="post" action="passtest.php">
<label>Username</label><br />
<input type="text" name="username" id="username" value=""/><br />
<label>Password</label><br />
<input type="text" name="password" id="password" value=""/><br />
<input type="submit" name="ewTest" id="submit" value="Submit" />
</form>
<p style="margin-top: 10px;">
<?php if(isset($response)) echo $response;?>
</p>
</div>

</body>
</html>

O

osgood_

Legend

The page is NOT safely protected because anyone can easily find the password by looking at the pages source code in any browser.

You need to look for a simple php solution or one of the other server languages like asp, coldfusion if you really want to protect the page.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded