Member Login

Forums: Web Development, Http Authentication, Authentication
Email this Topic • Print this Page

I have been thinking about which way I want to go for my member login script on my site.

Today I thought about using the default password protected page on my server.

Where when you goto a specific folder that is "protected" it asks you to enter in your username/password in a pop up box.

I want to know if I can, possibly though php, allow a user to enter their username and password inside a text box on my site, and then it will send the information to the protected page, and let them log in without displaying the pop up login box.

I hope I explained that well.

Any ideas?

Topic Stats
Top Replies
Link to this Topic

Type: Discussion • Score: 2 • Views: 4,264 • Replies: 30

No top replies

You didn't explain it well. ;-) But I know what you are talking about.

You are talking about .htaccess passwords.

I'll do you one better than PHP. Here's a javascript:

Place the following in the HEAD portion of the page:

Code:

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin

function Login(form) {

var username = form.username.value;

var password = form.password.value;

var server = form.server.value;

if (username && password && server) {

var htsite = "http://" + username + ":" + password + "@" + server;

window.location = htsite;

}

else {

alert("Please enter your username and password.");

   }

}

//  End -->

</script>

And place the following in the BODY. Note that the Able2Know address needs to be changed to the path to the directory you ahve protected with .htaccess passwords.

Code:

<form name=login>

<input type="hidden" name="server" value="www.able2know.com/secure/">

Username:

<input type=text name=username size=20>

<br><br>

Password:

<input type=password name=password size=20>

<input type=button value="Login!" onClick="Login(this.form)" name="button">

</form>

0 Replies

Dude your ******* amazing, that was like 5 mins after i posted. Im gunna go try it thank you.

What I want to do is set up so users will enter their username: bobby, and their password: douglas and be directed to the domain.com/bobby folder.

If their login is incorrect, is there a way to make a default login error page?

0 Replies

Ok, for the first part of what you said you will need to do the following:

The server path in the above script is hardcoded as a hidden field. You will need to make that a input feild or make it work with the username variable (very easy, I'll show you if you need help).

As to number two there is no way to do this through code unless you hardcode the passwords into the script and that is a security risk.

But there is good news, through .htaccess you can stipulate a custom 403 page so if they fail the login you can direct them to a page of your creation (or if you place this follwoing code in each member's directory a custom page for each user.

All you have to do is put this into your .htaccess file. Change the address of course.

Code:ErrorDocument 403 http://www.able2know.com/forbidden.html

0 Replies

I have modified the script to work as you desire. The change I made was to use the username variable as the path to the secured area.

So for the hidden server field you just need to put the part of the protected URL that is between the http:// and the protected directory.

e.g. if the protected directories is http://www.able2know.com/username/ then under the hidden field just put www.able2know.com/

Here it is, make sure to test it as I ahve not.

HEAD

Code:

<SCRIPT LANGUAGE="JavaScript"> 

<!-- Begin 

function Login(form) { 

var username = form.username.value; 

var password = form.password.value; 

var server = form.server.value; 

if (username && password && server) { 

var htsite = "http://" + username + ":" + password + "@" + server + username; 

window.location = htsite; 

} 

else { 

alert("Please enter your username and password."); 

   } 

} 

//  End --> 

</script>

BODY

Code:

<form name=login> 

<input type="hidden" name="server" value="www.able2know.com/"> 

Username: 

<input type=text name=username size=20> 

<br><br> 

Password: 

<input type=password name=password size=20> 

<input type=button value="Login!" onClick="Login(this.form)" name="button"> 

</form>

0 Replies

simple yet very useful...great combination.

0 Replies

Awesome. So how does this look?

Code:

<tr>

 <form name=login> 

 <td colspan="2" width="235" height="79" background="images/login_bg.jpg" valign="top">

 <div style="padding-top:15px;padding-left:35px;">

 <table cellpadding="0" cellspacing="0" border="0">

 <tr>

 <td style="font-size:10px;">Username</td>

 <td style="padding-left:12px;">

  <input type="hidden" name="server" value="www.mrbobdouglas.com/">

  <input type="text" name="username" style="width:80;height:20" size="20"></td>

 </tr>

 <tr><td height="3"></td></tr>

 <tr>

  <td style="font-size:10px;">Password</td>

  <td style="padding-left:12px;">

 <input type="password" style="width:80;height:20" size="20">

 <input type=button value="Login!" onClick="Login(this.form)" name="button"> 

 </td>

 </tr>

 </table>

 </div>

 </td>

 </form>

</tr>

Let me just discuss what this will do.

There will be no interaction with the forum until a user clicks on the login button. Meaning, they will not be asked for their password until this happens.

Once they decide they would like to login, they will then enter their info, and cick submit. If their info is wrong, the javascript code that belongs in my head will display the error message, and not redirect them to the 401 error page, correct?

Once they login sucessfully, they will be taken to domain.com/username.

Is that correct?

0 Replies

I would like to use a picture to display the login button.

This is the current code that follows my

Code:

 </td>

 </tr>

 </table>

 </div>

 </td>

 </form>

</tr>

code.

Here is the code:

Code:

 <tr>

  <td colspan="2">

  <img src="images/login_enter.jpg" usemap="#enter" border="0" width="235" height="30"></td>

  <map name="enter">

  <area shape="rect" coords="70,0,155,25" href="#">

  </map>

 </tr>

Who is Hamster 653? How come he reads all my posts Crying or Very sad

0 Replies

This is the full code now that does not "input" the username/password:

Code:

<tr>

 <form name=login> 

 <td colspan="2" width="235" height="79" background="images/login_bg.jpg" valign="top">

 <div style="padding-top:15px;padding-left:35px;">

 <table cellpadding="0" cellspacing="0" border="0">

 <tr>

 <td style="font-size:10px;">Username</td>

 <td style="padding-left:12px;">

  <input type="hidden" name="server" value="www.mrbobdouglas.com/">

  <input type="text" name="username" style="width:80;height:20" size="20"></td>

 </tr>

 <tr><td height="3"></td></tr>

 <tr>

  <td style="font-size:10px;">Password</td>

  <td style="padding-left:12px;">

 <input type="password" style="width:80;height:20" size="20">

 </td>

 </tr>

 </table>

 </div>

 </td>

  <tr>

  <td colspan="2">

  <img src="images/login_enter.jpg" usemap="#enter" border="0" width="235" height="30"></td>

  <map name="enter">

  <area shape="rect" coords="70,0,155,25" href="#">

  </map>

 </tr>

 </form>

</tr>

Oh, I am wanting to use the image map for the login button.

Sorry for the multiple posts, I just keep thinking about this.

0 Replies

I'm not sure I follow what you want to do. Can you clarify?

0 Replies

I want to use the image map that i have. So a user clicks on the image map for them to "submit."

0 Replies

Ah, sounds like you've got some creative ideas for the implementation.

Lemme know if you need anything from me.

0 Replies

I PMed you the links to the page I am going to use this on.

Still thinking about the image map part though.

Code:<input name="submit" type="image" src="login_enter.jpg">

Is used to use an image

0 Replies

Ok, lemme see if I understand. You basically want to use an image as the button right?

Just use code like this:

Code:<a href="javascript:void(document.FORMNAME.submit())"><img src="imagename.gif"></a>

0 Replies

But I want to map out part of the image, and only use the shape="rect" coords="70,0,155,25".

If you notice the links i sent you that the "Enter" area is the mapped picture. Thats how I want it to stay.

0 Replies

So your saying use this:

Code:

<tr>

 <form name=login> 

 <td colspan="2" width="235" height="79" background="images/login_bg.jpg" valign="top">

 <div style="padding-top:15px;padding-left:35px;">

 <table cellpadding="0" cellspacing="0" border="0">

 <tr>

 <td style="font-size:10px;">Username</td>

 <td style="padding-left:12px;">

  <input type="hidden" name="server" value="www.mrbobdouglas.com/">

  <input type="text" name="username" style="width:80;height:20" size="20"></td>

 </tr>

 <tr><td height="3"></td></tr>

 <tr>

  <td style="font-size:10px;">Password</td>

  <td style="padding-left:12px;">

 <input type="password" style="width:80;height:20" size="20">

 </td>

 </tr>

 </table>

 </div>

 </td>

  <tr>

  <td colspan="2">

  <img src="images/login_enter.jpg" usemap="#enter" border="0" width="235" height="30"></td>

  <map name="enter">

  <area shape="rect" coords="70,0,155,25" href="javascript:void(document.login.submit())">

  </map>

 </tr>

 </form>

</tr>

0 Replies

It doesn't seem to be doing anything except for changing the name of the page.

I update the file on my server (the login.php).

You can test the username:bobby
and the password:bobby

The folder is also located at domain.com/bobby

I know that you can log into ftp using a specific URL, when you click on it, the name will display as ftp://[email protected]:[email protected] or something similar to that.

Is there a way to do that using the default password protected directory?

0 Replies

Ok, I tested the very basic script on your site (from code on my computer) and it worked perfectly.

What is the point of failure? When you try to make the submit work from a button?

I'll test the modification code I think the missing trailing slash might be mucking things up.

0 Replies

What is the point of failure?
I already have the page set up, just need to link to it I guess.

So you tested the very first piece of code that you posted?
The code currently on my site brings me to this page:

http://www.domain.com/login.php?server=www.domain.com/&username=bobby

0 Replies

Ok, I rewrote the script from scratch and tested it on your site. It works now.

I'd forgotten the trailing slash in the path in the javascript. I do not know if this is the problem you are facing because I did not look at the code on your site.

Code:

<html>

<head>

<SCRIPT LANGUAGE="JavaScript"> 

<!-- Begin 

function Login(form) { 

var username = form.username.value; 

var password = form.password.value; 

var server = form.server.value; 

if (username && password && server) { 

var htsite = "http://" + username + ":" + password + "@" + server + username + "/"; 

window.location = htsite; 

} 

else { 

alert("Please enter your username and password."); 

   } 

} 

//  End --> 

</script>

</head>



<body>

<form name=login> 

<input type="hidden" name="server" value="www.mrbobdouglas.com/"> 

Username: 

<input type=text name=username size=20> 

<br><br> 

Password: 

<input type=password name=password size=20> 

<input type=button value="Login!" onClick="Login(this.form)" name="button"> 

</form>

</body>

</html>

I will rewrite this with an image submit button and post the code in a sec. The earlier ocde I posted for an image submit won't work because the submit executes a javascript function.

0 Replies

Member Login

Related Topics

Quick Links

My Account

able2know