Control Panel
In this step you'll start building a control panel for your blog site.
It will require a login, so that only authenticated users can acces to the control panel.
Eventually you'll build pages that allow you to add/edit blog posts, upload files, and a few other things that will allow you to manage your blog site.
But in this step, you'll just focus the login screen and authentication code.
It will be a crude and simple approach, but in Advanced Topics (next semester) we'll discuss other ways of authenticating users.
Pre-Reqs
- Understanding of HTML forms, and GET/POST requests
- Understanding of sessions and cookies
- (OPTIONAL) Understanding hashing functions/algorithms
Setting Up the Control Panel
- Create a folder inside the my-new-site folder named control-panel
-
Inside the control-panel folder, create a file named login.php.
The login page should start out by looking like this.
Notice the following:
- It follows the same 'template' that we are using for the other pages on the site.
- This page is located inside the control-panel folder, so the links to the include files start with ../.
-
In the main content of the page, there is a form that allows users to enter a login name and a password.
-
The INPUT elements in the form each have a NAME attribute. This attribute is very important, because it will be used as a key in the the $_POST super global array when the form is submitted (posted).
-
Open the login page in the browser.
The form on the page is not pretty, but it will do for now.
-
Add an IF statement just under the $pageTitle and $pageDescription variables.
The code should look like this.
Note that this IF statement checks to see if the login form was POSTED.
If it was, then it extracts the user name and password entered.
Finally it checks the user input to see if it matches the real user name and password for logging in.
This is a crude authentication system, but it's simple.
-
By the way, here is some info about the Null Coalesce operator, which was introduced in PHP 7.
-
Refresh the page in the browser and try it out.
Note that if you enter the proper user name and password, you'll be redirected to a page that we have not yet created (the control panel home page).
Also note what happens if you don't enter the proper username and password.
-
Important - there are some security risks with displaying the password in our code as we have.
If our PHP installation gets corrupted, the web server could display PHP code in the browser.
We could make things more secure by hashing the password and storing it in a folder that is outside of the doc root directory.
Create the Control Panel Home Page
-
Create a file named index.php inside the control-panel folder.
Put this code into the page.
-
Test the login page again, to make sure that once you login, you get redirected to the control panel home page.
-
Note that the control panel has a link to a 'blog-list' page.
We will create that page soon.
-
Note that you can visit the control panel home page without logging in!
We want to make sure that if a user tries to visit this page without first logging in, they get redirected to the login page.
We'll do this by using sessions (and cookies).
Making use of Sessions
-
Open the config file and start a session by adding this function call at the top of the file, just after the opening PHP tag:
session_start();
-
Now every page on the site will use session tracking (since every page includes the config file).
We'll use sessions to store variables that can be saved on the web server as the user navigates from one page to another.
Sessions are a way of overcoming the stateless nature of HTTP.
-
Go back to the login.php page.
We'll set a session variable when you successfully log in, to indicate that you have been authenticated.
Then we can check that variable when you navigate to other pages in the site.
-
Update the IF statement so that it looks like this this screen shot.
Notice lines 18 and 19 in screen shot. Line 18 will generate a new session id, which is a good practice any time a user logs in (it helps to prevent session hijacking attacks).
Line 19 adds a new session variable named 'authenticated' to the $_SESSION super global array. Since all of our pages are using sessions, we can pull values from the $_SESSION array on any page.
This allows us to transfer 'state' as a user tranistions from on page to another.
In other words, we can set session variables in one page, and retreive those variables on other pages.
Checking to see if a user has been authenticated (logged in)
We will now create an include file that will be included in the control panel home page
(the reason why we are putting this code into an include file is that it will be used by other pages in the control panel as well).
It will verify that the user has been authenticated by checking our session variable.
If the session variable has not been set, then we'll redirect the user to the login page.
This will prevent people from seeing the control panel home page if they have not logged in.
-
Create a file in the control-panel folder and name it authentication-check.inc.php.
The code should look like this.
-
Note that it checks to see if the 'authenticated' session variable has been set (and set to 'yes').
If not, then the user is redirected to the login page.
-
Now go back to the control panel home page (control-panel/index.php) and include the file we just created.
Link to the file just after the link to our config file, like this.
-
Before we test it out, let's do one more thing.
It's a good idea to destroy a session when a user logs out, and to recreate it when they login.
By visiting the login.php page (via a GET request), the user is effectively logging out (they will presumable attempt to re-login when they submit the login form).
Think about a scenario where you may have two different user accounts for a website (do you have more than one Gmail account?).
So we'll add an ELSE IF block to the IF statement that checks the REQUEST_METHOD, in this block we'll put code that obliterates the session.
-
Open the login.php page and update the IF statement we created earlier by adding an ELSE IF block.
The entire statement should look like this.
By the way, this is a good article that explains how to properly destory a session.
-
Note that by destroying the session and recreating it when a user logs in, we are helping to reduce the possibility of a session hijacking attack
-
Let's try it out.
Open the login page in the browser but don't log in yet (this will destroy our session because of the code we just added).
Now try to visit the control panel home page, you should get redirected back to the login page.
Once you enter the correct username and password, you should be able to view the control panel home page.
-
We could use the Web Developer Tools to keep track of the session id cookie.
The session id should get updated every time we make a GET request to the login page.
Update the Nav Bar
- Open the header include file (header.inc.php)
- Add this PHP code just before the closing UL tag in the nav bar
-
Note that it checks the 'authenticated' session variable to see if the user has logged into the control panel.
If so, then a link to the control panel home page is added to the list.
Security Issues
Here are some things we can do to help secure the password (we'll discuss in class)
- MAKE SURE YOU CHANGE THE LOGIN NAME AND PASSWORD!
- Make sure to use HTTPS! (We'll do that later in the project, but we'll have to configure our Apache server to use an SSL certificate first)
-
Hash the values of the $password variable so that if anyone did see it, they would not know what the password is.
We would also have to apply the same hash to the $userNameEntered variable in order to compare it to the hashed $password.
- Create an include file that initializes the $userName and $password variable. Then we could put this file outside of the doc root dir.
- Use session_name() to create your own session id cookie (instead of the default PHPSESSID).
- To help prevent session hijacking, the book recommends storing the HTTP_USER_AGENT in session and checking it as well as verifying that the user has been authenticated.
- Also, the book also mentions that you shouldn't use unset() to destroy sessions. I think this means doing this: unset($_SESSION);. But I think it's OK to do this: unset($_SESSION['authenticated']);
- Note that if you are using Git, or some other code versioning system, then it's not a good idea to commit code with passwords.
Follow Up Questions:
- Explain the purpose of using a session variable to determine if a user has been authenticated (why can't we use a regular variable?)
- Session variables are stored on the web server, but where on the web server?
- Why is important for a login page to use HTTPS rather than HTTP?
- What is the ternary operator?
- What is the null coalesce operator in PHP 7?
- Explain the stateless nature of HTTP.