Member Offer
  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Password protection area

Discussion in 'Website Design Forum:' started by SamC, Oct 8, 2009.

  1. SamC

    SamC Junior Member

    Evening,

    I'm finally close to putting together me own little site and I've hit a small coding wall...

    What I'm after is a seperate area(s) on the site that is only accessible by login/password.

    Basically I want a private portfolio area so that i can tailor parts of the site to certain clients/potential clients.

    Sadly i don't have the first idea as to how to go about this or how much work it would be.

    If anyone can let me know if this is a massive mountain to climb or a simply bit of coding that even the least html savvy can work out then that would be most appreciated.

    Oh - and of course when I'm happy with the site I shall be putting it up here for you all to make your comments, and tear lumps out of my clunky html and self indulgent design.

    S
     
  2. tbwcf

    tbwcf Active Member

    Hi Sam,

    You can password protect directories using htaccess (.htaccess is a text file which you name .htaccess and upload to your webserver - it basically helps configure your server for redirects/passwords etc).

    I've not actually done it myself but I know it can be done, if I pasted a link it would only be from google, so wack "htaccess password protect" or similar into google and you should be away!
     
  3. Harry

    Harry Senior Member

    Easiest way will be through .htaccess: Google

    EDIT: D'oh, beaten to it :(
     
  4. SamC

    SamC Junior Member

    Wonderful, thanks for your help - when my mind is clear in the morning I'll have a proper wander round the internet and let you know how i get on.

    What did we do before google?
     
  5. tbwcf

    tbwcf Active Member

    @Harry - great minds!

    @Sam - your welcome, before google some people read books, lots of books.
     
  6. Greg

    Greg Active Member

    Hi Sam,

    You can also do it if you have access to cPanel with your web hosting, just look for the Password Protect Directories option, allows you to add user/pass for individual folders on your hosting space, very straightforward to setup.

    [​IMG] cpanel web hosting instructions - Password protect directories

    Thanks,
    Greg
     
  7. Jazajay

    Jazajay Active Member

    Do you want the clients to be able to login and view unfinished work or work for thier eyes only?
    If you do a private section will be a lot more proffessional and only requies a smallish bit of code let me know and I'll put some up if you want.

    Jaz
     
  8. SamC

    SamC Junior Member

    Jaz - Thats excatly what I had in mind - any help will be most appreciated.

    Ta

    Sam
     
  9. glenwheeler

    glenwheeler Senior Member

    .htaccess yup! You might be able t create an area via your cp with your web host? Who ever you are with?..
     
  10. br3n

    br3n Senior Member

    I remember Xpannel had something for passworded folders?
     
  11. glenwheeler

    glenwheeler Senior Member

    cpanel does and so does helm aswell as dotnetpanel
     
  12. Jazajay

    Jazajay Active Member

    Okay well lets look at the security side of it first.
    1. We need to have a separate directory so as to keep all the secured files separate.
    2. We need to have a form for the user to enter their password and user names.
    3. We need to check if they are correct.
    4. If correct provide a second input field requiring a 36 digit alpha-numeric number for added security.
    5. Once the user name, password and 36 digit number have been verified to the correct user redirect to the secured page.
    6. On every secured page check to make sure they have been verified to who they say they are, if they haven't load the first login form requesting a password and username.

    We could go more in depth but if all you want is for clients to view pieces of work that should be suffice. The 36 digit number may be overkill, but TBH it would make a hacker think there is more than their is, and if they manage to crack it, very unlikely, they would have just wasted their time. I hate hackers, scum. May of been hacked once, not like I was down for 3 days or anything as a result. :mad:.

    Right ~
    1. Create a directory call it what ever you want, admin, secure-area what ever really, I'll call it admin.
    2. In that directory create a PHP file called login.php, a file called client-area.php, another directory called inc, and in the inc directory another PHP file called pass.php, a file called backup.php, a file called check.php and another file called backupcheck.php. Those 4 files all need to go in the inc directory.
    So your file structure should look like this ~

    Root folder
    ~admin folder
    ~~~login.php
    ~~~client-area.php
    ~~~inc folder
    ~~~~~check.php
    ~~~~~pass.php
    ~~~~~backup.php
    ~~~~~backupcheck.php

    I promise this looks more complicated than it is, and I've separated it so if you want to add more users, or take users away you only have to open up small files and edit small sections. I'll explain it all so don't worry.

    In the files place this ~

    Login.php
    In here we want to test to see if the form has been submitted, if it has load a separate file to test the username and password. If it hasn't load the login form.

    <?php session_start();
    if(isset($_POST['user']) || isset($_POST['animal'])){
    include("inc/pass.php");
    }else{
    ?>

    <form action="login.php" method="post">
    <p>
    <label for="user">User Name: </label><br />
    <input type="text" name="user" id="user" />
    </p>
    <p>
    <label for="pass">Password: </label><br />
    <input type="text" name="pass" id="pass" />
    </p>
    <p>
    <button type="submit">Log in</button>
    </p>
    </form>

    <?php }?>

    inc/pass.php
    This file tests to see if the username and password entered in the form match one that you have set up. To add more, just copy the elseif statement, add the user name and password in the highlighted example and your good to go.

    Example of adding a new user:
    elseif(
    $_POST['user']=="NEW_USER_NAME_GOES_IN_HERE" && $_POST['pass']=="NEW_PASSWORD_GOES_IN_HERE"){
    include("backup.php");
    }
    -----------------------------------------------

    <?php
    if($_POST['user']=="jaz" && $_POST['pass']=="jaz_is_a_nice_guy"){
    include("backup.php");
    }
    elseif(
    $_POST['user']=="jack" && $_POST['pass']=="apple"){
    include("backup.php");
    }
    elseif(
    $_POST['user']=="jane54@hotmail.com" && $_POST['pass']=="supermonkey"){
    include("backup.php");
    }
    elseif(...){
    include("backup.php");
    }
    ?>

    inc/backup.php
    This is the secondary form. This file start by loading backupcheck.php, if it is the first time this file has been accessed then it will load the secondary form asking for a 36 alpha_numeric number, so letters, numbers and some special characters.

    <?php include("backupcheck.php")?>
    <form action="login.php" method="post">
    <p>
    <label for="second">Please enter the secondary password: </label><br />
    <input type="text" name="animal" id="second" />
    <input type="hidden" name="user" value="<?php echo $_POST['user']?>" />
    </p>
    <p>
    <button type="submit">Log in</button>
    </p>
    </form>

    <?php }?>

    inc/backupcheck.php
    This file tests to see if the second login form has been submitted and if it has if the 36 alpha_numeric code matches to the username you set. It doesn't have to be 36 characters that's just what i set it to. you have total control.If it does it sets a PHP session so we can track them, and redirects them to their own area.

    When you set up a new user you will also have to set them up a new 36 character password in this file as well.
    To do that just copy and paste the elseif statement and change the variables, but add it before the last else statement so.
    Example of adding a new user:
    <?php
    if($_POST['user']=="EXACT_SAME_USER_NAME_YOU_ADDED_IN_PASS.PHP" && $_POST['animal']=="CHANGE_THIS_TO_WHAT_EVER_36_CHARACTERS_YOU_WANT"){
    $_SESSION['monkey']="this monkey's actually a dolphin"?>
    <meta http-equiv="refresh" content="0;url=http://yoursite.com/admin/client-area4.php"/>
    <?php
    }
    else{?>


    Also you will need to have created a new client area for them first and numbered it. So if they are your 4th client and you created their area as client-area4.php you will have to change the address in the meta refresh so it loads thier right area up.
    -----------------------------------------------


    <?php

    if($_POST['user']=="jaz" && $_POST['animal']=="13456423123457686532As_gFxZ4\Aw1Qp_"){
    $_SESSION['monkey']="this monkey's actually a dolphin"?>
    <meta http-equiv="refresh" content="0;url=http://yoursite.com/admin/client-area1.php"/>
    <?php
    }
    else
    if($_POST['user']=="jack" && $_POST['animal']=="13456423123457686532As_H4324\Aw1Qp_"){
    $_SESSION['monkey']="this monkey's actually a dolphin"?>
    <meta http-equiv="refresh" content="0;url=http://yoursite.com/admin/client-area2.php"/>
    <?php
    }
    else
    if($_POST['user']=="jane54@hotmial.com" && $_POST['animal']=="13456426789457686532As_gFxZ4\Aw1Qp_"){
    $_SESSION['monkey']="this monkey's actually a dolphin"?>
    <meta http-equiv="refresh" content="0;url=http://yoursite.com/admin/client-area3.php"/>
    <?php
    }
    else
    {?>

    Right now client area1, client area2, and client area3 are all separate pages containing work for your clients.

    Now the only way someone can access client-area1.php is if their name is jaz, the password they entered is jaz_is_a_nice_guy and they enter the correct 36 character back up password for his user name.

    Now again the only way someone can access client-area2.php is if their user name is jack, their password is apple and they enter his separate 36 digit number, and so on and so on.

    Each client-area1.php is a page you create tailored just for them. So for example it could just say ~

    Client-area2.php
    You know the client is Jack and you therefore know what work to show him.
    <?php include("inc/check.php")?>
    <html>
    <head></head>
    <body>

    <h1>Hello Jack</h1>
    <p>
    Your project is currently 80% complete.
    </p>
    <p>
    Below are the images of your current project.
    </p>
    <ul>
    <li><img src="yoursite.com/admin/img/john1.png" alt="" /></li>
    <li>
    <img src="yoursite.com/admin/img/john2.png" alt="" /></li>
    <li><img src="yoursite.com/admin/img/john2.png" alt="" /></li>
    </ul>
    <p>
    Any comments or suggestions please feel free to <a href="yoursite.com/admin/contact.html">contact me</a>.
    </p>
    <p>
    All the best SamC.
    </p>

    Now the only thing left to do is to check to make sure they are logged in, if they are not log them out.

    Note that check.php has to be called before any html output otherwise the header to redirect them will spit out an error and not work.

    inc/check.php
    This file checks to see if they are logged in if not sends them to the log in form to log in.

    <?php
    session_start();
    if(!isset($_SESSION['monkey']) ||
    $_SESSION['monkey']!=="this monkey's actually a dolphin"){

    header('Location: http://yoursite.com/admin/login.php/');
    }?>


     
  13. Jazajay

    Jazajay Active Member

    Right now when you create a new user, you create a new page for the client, you change the variables in the files above, and then just copy and paste them in an email to them.

    So ~

    Thank you for choosing us for all you graphic design needs.
    To check on our progress you can login in at
    yoursite.com/admin/login.php

    Your username is set to ~
    Mary

    Your password is set to ~
    Had a little lamb

    If you had a real client actually called Mary don't use that as their password. :D

    Once you log in you will be asked for a 36 character second password please enter this when it asks you.

    Your 36 character password is set to ~
    13456423123457686532As_H4324\Aw1Qp_

    This is to make sure your work stays private and for your eyes only.

    Any problems please don't hesitate to contact us
    Sam C

    Right I've just written that all off the cuff, it does look right, but if you get an error, first check to make sure you created the files in the correct directories if you have send me the error. Any ... in the code are meant to be continuations don't actually write them in or you will get errors.

    If you get an error let me know and I'll create the code on my server and correct any bug fixes, it does look fine TBH.

    If you need any help with it let me know and I'll help you implement it as well, any bits I haven't explained well enough again don't hesitate to let me know.

    O well guess I better go for a run and get on with some work no more trying to avoid what I have to do I guess. :cry:

    I've also just found out that there is a 10,000 character limit to the post, Greg don't suppose you can have a look into this for me?

    Cheers fella. :D


    Jaz

    Key:
    Red
    ~ PHP
    Blue ~ XHTML
    Green ~ Note
     
  14. Harry

    Harry Senior Member

    Should the passwords be stored a little more securely, with some kind of encryption? A salt perhaps?
     
  15. Jazajay

    Jazajay Active Member

    Yeah a salt's always good and you could add Sha2 hashing to it as well TBH.
    The passwords and usernames should ideally also be in a database but I thought that that may be overkill that and I would have to explain database connections, db input and output, SQL injection protection and how to protect against it and TBH that would take me a while to be thorough enough for my liking TBH, and what I've written will be more than secure enough for her needs by the sounds of it.

    The only way they could be got though is from someone on her exact sever with knowledge of hacking, and open up her exact files, hence why they are also spit, which is highly unlikely TBH, and even so would just get her clients work nothing of real importance.

    The 36 character secondary back up password will be that much of a pain, and would require a large amount of time I'm also not sure it would be needed.

    But yeah you could hash it using sha2 hash function then test the hash, or you could encrypt it with a salt and then double check, you could also add the sleep function for a 30second wait time per log in attempt, that would kill any brute force attempts and make any successful hacking of the entire system that hard it wouldn't be worth it.

    But it's down to the data Sam's trying to protect TBH. I mean if it's credit card info wack in SSL encryption as well and jease your've just got a more secure form than most on-line banking applications. So....it's down to data importance and the need to protect it.

    But if it's non-important data, still add the 36 character backup password that way it wastes any hackers time, if any1 even attempts it.
     
  16. SamC

    SamC Junior Member

    !!? I'm astounded by this !!? - I would quote your reply J but then i wouldn't have any space to reply.

    I hope that there's no time limit on these post staying up as i suspect that this will take me a while to get my head around.

    Seriously massive thanks for your help on this one - I have now decided that my site is looking a bit too souless so i'm gonna do some tweaks to the visuals and then get my head into the code. Not sure which way round yet I tend to switch between one and the other as soon as i get a bit annoyed.

    I'll let you know how this goes and when i inevitably get stuck.

    Thanks again - oh and a minor point, I'm not a she, just thought i'd mention it before it become too common and then goes on too much and becomes too awkward for me to correct it and i have to live with it and live some kind of weird design forum double life........ not that that's happened before..

    Ta again

    Sam
     
  17. tim

    tim Senior Member

    wow jaz and harry, that is amazing.
     
  18. Jazajay

    Jazajay Active Member

    @Sam
    O err.....Yeah I wrote him, you must have just miss read fella, that's it err.....yeah that's it. :D
    No worries got me out of doing some tedious link building work TBH, that is kinda boring when you have zero budget on a project. O the crappy, crappy links are so, so, so, so, vast, and so crappy. :cry:

    If you go to your DF section, you can view all your subscribed to posts. Go the back of the list and count up 19 and you will find this post, that you will be able to edit, but I'm sure you will be fine. Or you could bookmark this page and just refer to it later.

    @Tim
    Well what can I say Tim, the grudge match continues. :D
     
  19. I think the grudge match will never be over till Deathrace :lol:
     
  20. Jazajay

    Jazajay Active Member

    Why do you think I'm practising my running buddy? :D
     

Share This Page