In: Computer Science
Using the zip file provided, create a secure login/registration app. Make sure that your game pages (at least two) are unavailable to unregistered users. Upload a zip file with your working PHP application.
Contents of zip
Index.php
-----------------
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<?php
// 1. display error
message in the session (if any): $_SESSION['error']
// 2. display either the
user's name and the game menu or the form/link below
// (display the menu by
using a php include of menu.html)
?>
<form
action="authenticate.php" method="post">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pwd"><br>
<input type="submit">
</form>
<a
href="register.php">Register a new login</a>
</body>
</html>
menu.html
---------------
<h3>Game Menu</h3>
<ul>
<li><a
href="guess.php">Guess</a></li>
</ul>
newUser.php
-------------------
<?php
session_start();
// 1. validate the input
// 2. make sure user is not already in the database
// 3. make sure that pwd and repeat match
// 4. insert a new row (be sure to hash the pwd first)
// 5. redirect to home page
header("Location: index.php");
?>
register.php
-------------
<!DOCTYPE html>
<html>
<head>
<meta
charset="UTF-8">
<title></title>
</head>
<body>
<form
action="newUser.php" method="post">
Username: <input type="text" name="user"><br>
Password: <input type="password" name="pwd"><br>
Repeat: <input type="password" name="repeat"><br>
<input type="submit">
</form>
</body>
</html>
games_ddl.sql
----------------
CREATE DATABASE games;
USE games;
CREATE TABLE users
(
id int primary key auto_increment,
username varchar(255),
password varchar(255)
);
-- insert a row into the users table for the
administrator:
-- username = foo
-- password = bar
INSERT INTO users (username, password) VALUES ('foo',
'$2y$10$IWDcVmWIHlx5nI5A.18gNOUDoJZgdfWJwFMamea9JaUK9M.iTx8g.');
Authenticate.php
---------------------
<?php
// 1. validate the form input (set $_SESSION['error'] if there
is a problem)
// 2. create a database connection (using the standard root
user)
// 3. select the password from the users table where the username
came from the form
// 4. use password_verify to see if the form password matches the
hashed password from db: password_verify($pwdFromFrom, $dbPwd)
returns a boolean
// 5. forward user to index.php
// 6. allow execution to continue and close db connection
?>
There are a few steps we need to take before we create our secure login system, we need to set up our web server environment and make sure we have the required extensions enabled.
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Login</title>
<link rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link href="style.css"
rel="stylesheet" type="text/css">
</head>
<body>
<div class="login">
<h1>Login</h1>
<form
action="authenticate.php" method="post">
<label for="username">
<i class="fas
fa-user"></i>
</label>
<input type="text" name="username"
placeholder="Username" id="username" required>
<label for="password">
<i class="fas
fa-lock"></i>
</label>
<input type="password" name="password"
placeholder="Password" id="password" required>
<input type="submit" value="Login">
</form>
</div>
</body>
</html>
style.css
* {
box-sizing: border-box;
font-family: -apple-system, BlinkMacSystemFont, "segoe
ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans",
"helvetica neue", Arial, sans-serif;
font-size: 16px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
background-color: #435165;
}
.login {
width: 400px;
background-color: #ffffff;
box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3);
margin: 100px auto;
}
.login h1 {
text-align: center;
color: #5b6574;
font-size: 24px;
padding: 20px 0 20px 0;
border-bottom: 1px solid #dee0e4;
}
.login form {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 20px;
}
.login form label {
display: flex;
justify-content: center;
align-items: center;
width: 50px;
height: 50px;
background-color: #3274d6;
color: #ffffff;
}
.login form input[type="password"], .login form input[type="text"]
{
width: 310px;
height: 50px;
border: 1px solid #dee0e4;
margin-bottom: 20px;
padding: 0 15px;
}
.login form input[type="submit"] {
width: 100%;
padding: 15px;
margin-top: 20px;
background-color: #3274d6;
border: 0;
cursor: pointer;
font-weight: bold;
color: #ffffff;
transition: background-color 0.2s;
}
.login form input[type="submit"]:hover {
background-color: #2868c7;
transition: background-color 0.2s;
}
phplogin
CREATE TABLE IF NOT EXISTS
`accounts` (
`id` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(50) NOT NULL,
`password` varchar(255) NOT NULL,
`email` varchar(100) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT
CHARSET=utf8;
INSERT INTO `accounts` (`id`, `username`, `password`, `email`) VALUES (1, 'test', '$2y$10$SfhYIDtn.iOuCW7zfoFLuuZHX6lja4lF4XA4JqNmpiH/.P3zB8JCa', '[email protected]');
authenticate.php
<?php
session_start();
// Change this to your connection info.
$DATABASE_HOST = 'localhost';
$DATABASE_USER = 'root';
$DATABASE_PASS = '';
$DATABASE_NAME = 'phplogin';
// Try and connect using the info above.
$con = mysqli_connect($DATABASE_HOST, $DATABASE_USER,
$DATABASE_PASS, $DATABASE_NAME);
if ( mysqli_connect_errno() ) {
// If there is an error with the connection, stop the
script and display the error.
exit('Failed to connect to MySQL: ' .
mysqli_connect_error());
}
// Now we check if the data
from the login form was submitted, isset() will check if the data
exists.
if ( !isset($_POST['username'], $_POST['password']) ) {
// Could not get the data that should have been
sent.
exit('Please fill both the username and password
fields!');
}
// Prepare our SQL,
preparing the SQL statement will prevent SQL injection.
if ($stmt = $con->prepare('SELECT id, password FROM accounts
WHERE username = ?')) {
// Bind parameters (s = string, i = int, b = blob,
etc), in our case the username is a string so we use "s"
$stmt->bind_param('s', $_POST['username']);
$stmt->execute();
// Store the result so we can check if the account
exists in the database.
$stmt->store_result();
$stmt->close();
}
?>