Introduction
Most web sites are run on servers which use the Apache software. This offers some very useful features for websites. For example, it allows you to password protect access to files in any directory – if the user does not know the password they cannot view the pages! It is very easy to add to your website with just 2 files (note both the files start with a dot).
.htaccess
Before letting any user access a file, Apache checks to see if this file exists in the directory with the file you are trying to access. If it exists, then it will use the values in the file. Here is a simple example from our website.
order allow,deny allow from all require valid-user Authname "Password access required." Authtype Basic AuthUserFile /var/www/vhosts/idrsolutions.com/files/Cust/.htpasswd
This example does TWO things. Firstly it defines the access rules for this location. All files in the directory where the file is found can only be accessed with a login and password. Secondly, it defines that this will be found in a file /var/www/vhosts/idrsolutions.com/files/Cust/.htpasswd – this does not have to be the same directory but often is to simplify administration.
In order to use this feature, you need to know how the real paths on the server relate to your website. On our system, Apache maps our website http://www.idrsolutions.com to /var/www/vhosts/idrsolutions.com/ so anything in http://www.idrsolutions.com/files/Cust will be protected. (Note that this is often a Unix server so assume all values are case sensitive). You will need to ask whoever maintains your website for this information (although it is often /var/www/vhosts/mySite/).
.htpasswd
This file contains the login and passwords. It consists of a set of lines with
loginName: password (encrypted).
So when I added the user mark with the password test to my file, I added a line
mark:$6$7X9OefNE$3JxPhSS6gDWew1QZAJqS2JlUNt2Ly/r7uIMKpRkc1dsgRpaEEeYsiTYKDuk6.c9XjIFEZxXdgGTtQNhur2KyW/
A tip for when you add a user is to keep the entries in alphabetical order. This makes it much easier to manage.
When I try to access anything in this directory, a password box will popup and I will need to type in the username mark and the password test. If I do not, I will be told I cannot access the page.
The encrypted password is easily generated by a small php script on your website. I have this small file htpass.php on my website to generate the passwords for me.
usr = '';
if (isset($_POST['password']))
if($_POST['password']!= "" AND $_POST['user']!= "" ) {
$usr = $_POST['user'];
$pass = $_POST['password'];
$ht_pass = crypt($pass);
}
print "Password Encryption";
?>This looks like this when I open the link in my web browser.
Note that every time you rerun it, you will get a different (and still valid key to use).
Once you add this file to .htpasswd, the user will be able to access content in the directory (until you remove the line from the .htpasswd file).
Next steps
So there you have a very simple and easy way to control access to your website content based on password. If you would like to explore additional options or find out more details, I recommend the Apache website tutorial.
This article is part of a series of articles with suggestions for enhancing your HTML5 content. You can also read about Adding Annotations with Annotator.js, Adding Fullscreen using the JavaScript FullScreen API and Optimising Images using PNGQuant.