Use an Image as a Password!

[BlaineSch]

This tutorial will show you how to create a successful website that is password protected by images! Yes you heard me you can have an image password.

You can now have some sexy ladies (shown below) as your password

http://i40.tinypic.com/2u4hcnn.jpg

To get started first we need to create the database table! Since this is not a mysql tutorial nor am I good with databases I will simple put the code here:

<?PHP
mysql_query("CREATE TABLE userimg (email VARCHAR(40), password VARCHAR(40), bsid VARCHAR(40), admin VARCHAR(20) default 'user')") or die(mysql_query());
?>

I am kinda going to go in a circle - I usually start in the "middle" of the script and work my way around. So first I would usually say whats in the middle which in this case is a logged in user so lets create a function to see if the user is logged in. I have already said that I want my site to be sessions which I create so I will use that.

<?PHP
function checkloggedin($bsid) {
    //since it  is a md5 we know its 32 characters
    $id = ereg_replace('[^a-zA-Z0-9]', '', $bsid);
    if(strlen($id)==32) {
        //simply query just to check
        $query = mysql_query("SELECT * FROM `userimg` WHERE `bsid`='$id'");
        $row = mysql_fetch_assoc($query);
        if(strlen($row[admin]) != 0) {
            //returns their email for later use!
            return $row[email];
        }
    }
    //no results? then they are not logged in
    return false;
}
?>

Now lets go ahead and make a HTML form for users to register and login as which I usually display on the same page.

<?PHP
function showloginregister() {
    echo '<table>'.
            '<tr>'.
                '<td valign="top">'.
                    '<form method="post" action="index.php" enctype="multipart/form-data">'. //important!!!!
                    '<table class="main">'.
                        '<tr>'.
                            '<td class="header" colspan="2">Login Below</td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Email Address</td>'.
                            '<td><input type="text" name="emailaddr" class="long"></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td colspan="2"><input type="submit" name="v" value="Login Now!" /></td>'.
                        '</tr>'.
                    '</table>'.
                    '</form>'.
                '</td>'.
                '<td valign="top">'.
                    '<form method="post" action="index.php" enctype="multipart/form-data">'. //important!!!!            
                    '<table class="main">'.
                        '<tr>'.
                            '<td class="header" colspan="2">Login Below</td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Email Address</td>'.
                            '<td><input type="text" name="emailaddr" class="long"></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile1" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile2" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td colspan="2"><input type="submit" name="v" value="Register Now!" /></td>'.
                        '</tr>'.
                    '</table>'.
                    '</form>'.
                    '</td>'.
            '</tr>'.
        '</table>';
        exit;
}
?>

Since thats mostly HTML I will only say that you should note that there is an "exit()" at the end of that function for a reason and you should remember that when using this script it prevents private data from begin seen!

<?PHP
function processpost($post, $files) {
    //just creating a bsid since I use it in most of the script
    $bsid = md5($post[email].date('YmdHis'));
    if($post['v'] == "Register Now!") {
        //gets the 2 userfiles for registering and md5's them
        $file1 = md5(file_get_contents($files["userfile1"]["tmp_name"]));
        $file2 = md5(file_get_contents($files["userfile2"]["tmp_name"]));
        $email = $post[emailaddr];
        if($file1 == $file2) {
            //compares the two and checks the email on an old script I made (listed below)
            if(checkemail($email)) {
                //checks for duplicate emails
                $query = mysql_query("SELECT * FROM `userimg` WHERE `email`='$email' LIMIT 1");
                if(mysql_num_rows($query)==0) {
                    //registers then redirects the user
                    mysql_query("INSERT INTO `userimg` SET `email`='$email', `password`='$file1', `bsid`='$bsid'");
                    echo '<script>window.location="index.php?bsid='.$bsid.'";</script>';
                    exit;
                } else {
                    echo "Error: This email address is already taken!";
                    exit;
                }
            } else {
                echo "Error: Your email must be longer than 5 characters";
                exit;
            }
        } else {
            echo "Error: The images you entered did not match.";
            exit;
        }
    } elseif($post['v'] == "Login Now!") {
        //gets the user password
        $file1 = md5(file_get_contents($files["userfile"]["tmp_name"]));
        $email = $post[emailaddr];
        if(checkemail($email)) {
            //checks the email on a script I made a long time ago
            $query = mysql_query("SELECT * FROM `userimg` WHERE `email`='$email' && `password`='$file1' LIMIT 1") or die(mysql_error());
            if(mysql_num_rows($query)==1) {
                //if active update the row so only one user can be logged in at once - and redirect the user
                mysql_query("UPDATE `userimg` SET `bsid`='$bsid' WHERE `email`='$email'");
                echo '<script>window.location="index.php?bsid='.$bsid.'";</script>';
            } else {
                echo "Error: Your user/pass combo did not match!";
                exit;
            }
        } else {
            echo "Error: Your user/pass combo did not match!";
            exit;
        }
    }
    return true;
}
?>

In there you may have noticed a "checkemail()" which is actually a function I used in my Tutorial Create an Email List

<?PHP
function checkemail($email) {
    $regex = "^[a-zA-Z0-9][a-zA-Z0-9\.\_\-]+@[a-zA-Z0-9\_\-]+\.[a-zA-Z\_\-\.]+";
    $emails = ereg_replace($regex, "", $email);
    if((strlen($emails) == 0) && (strlen($email) != 0)) {
        return true;
    }
    return false;
} 
?>

Now we want to be able to define pages as "public" or "private" since not all pages you want to be restricted so lets go ahead and make a function to echo out a greeting or a login/register screen...

<?PHP
function showpage($user, $id, $bsid) {
    if(!$user) {
        //user is false if they are not logged in
        switch ($id) {
            //this should be defined on the page its called from
            case "public":
                //if public show greeting with data
                return "Welcome, Guest! - <a href='register.php'>Register!</a> - <a href='index.php'>Public Data</a> - <a href='private.php'>Private Data</a><br />";
                break;
            case "private":
                //show login has an exit to prevent data from being seen
                showloginregister(); 
                break;
        }
    } else {
        //user logged in display greeting and data
        return "Welcome, {$user}!  <a href='index.php?logout={$bsid}'>Logout!</a> - <a href='index.php?bsid={$bsid}'>Public Data</a> - <a href='private.php?bsid={$bsid}'>Private Data</a><br />";
    }
}
?>

This is pretty much it - I organized this a little bit better into the following pages to make this easier:

• functions.php
• index.php //public page
• private.php //private page
• register.php //forced show login page

Functions.php

<?PHP
/*
    functions.php
    this file contains all functions and connects to the database
*/
/*
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!INSERT MYSQL CONNECT HERE!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
*/
function runonce() {
    mysql_query("CREATE TABLE userimg (email VARCHAR(40), password VARCHAR(40), bsid VARCHAR(40), admin VARCHAR(20) default 'user')") or die(mysql_query());
}
function checkloggedin($bsid) {
    $id = ereg_replace('[^a-zA-Z0-9]', '', $bsid);
    if(strlen($id)==32) {
        $query = mysql_query("SELECT * FROM `userimg` WHERE `bsid`='$id'");
        $row = mysql_fetch_assoc($query);
        if(strlen($row[admin]) != 0) {
            return $row[email];
        }
    }
    return false;
}
function processpost($get, $post, $files) {
    if(strlen($get[logout]) == 32) {
        mysql_query("UPDATE `imguser` SET `bsid`='0000' WHERE `bsid`='$get[logout]'");
    }
    $bsid = md5($post[email].date('YmdHis'));
    if($post['v'] == "Register Now!") {
        $file1 = md5(file_get_contents($files["userfile1"]["tmp_name"]));
        $file2 = md5(file_get_contents($files["userfile2"]["tmp_name"]));
        $email = $post[emailaddr];
        if($file1 == $file2) {
            if(checkemail($email)) {
                $query = mysql_query("SELECT * FROM `userimg` WHERE `email`='$email' LIMIT 1");
                if(mysql_num_rows($query)==0) {
                    mysql_query("INSERT INTO `userimg` SET `email`='$email', `password`='$file1', `bsid`='$bsid'");
                    echo '<script>window.location="index.php?bsid='.$bsid.'";</script>';
                    exit;
                } else {
                    echo "Error: This email address is already taken!";
                    exit;
                }
            } else {
                echo "Error: Your email must be longer than 5 characters";
                exit;
            }
        } else {
            echo "Error: The images you entered did not match.";
            exit;
        }
    } elseif($post['v'] == "Login Now!") {
        $file1 = md5(file_get_contents($files["userfile"]["tmp_name"]));
        $email = $post[emailaddr];
        if(checkemail($email)) {
            $query = mysql_query("SELECT * FROM `userimg` WHERE `email`='$email' && `password`='$file1' LIMIT 1") or die(mysql_error());
            if(mysql_num_rows($query)==1) {
                mysql_query("UPDATE `userimg` SET `bsid`='$bsid' WHERE `email`='$email'");
                echo '<script>window.location="index.php?bsid='.$bsid.'";</script>';
            } else {
                echo "Error: Your user/pass combo did not match!";
                exit;
            }
        } else {
            echo "Error: Your user/pass combo did not match!";
            exit;
        }
    }
    return true;
}
function checkemail($email) {
    $regex = "^[a-zA-Z0-9][a-zA-Z0-9\.\_\-]+@[a-zA-Z0-9\_\-]+\.[a-zA-Z\_\-\.]+";
    $emails = ereg_replace($regex, "", $email);
    if((strlen($emails) == 0) && (strlen($email) != 0)) {
        return true;
    }
    return false;
} 
function showloginregister() {
    echo '<table>'.
            '<tr>'.
                '<td valign="top">'.
                    '<form method="post" action="index.php" enctype="multipart/form-data">'. //important!!!!
                    '<table class="main">'.
                        '<tr>'.
                            '<td class="header" colspan="2">Login Below</td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Email Address</td>'.
                            '<td><input type="text" name="emailaddr" class="long"></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td colspan="2"><input type="submit" name="v" value="Login Now!" /></td>'.
                        '</tr>'.
                    '</table>'.
                    '</form>'.
                '</td>'.
                '<td valign="top">'.
                    '<form method="post" action="index.php" enctype="multipart/form-data">'. //important!!!!            
                    '<table class="main">'.
                        '<tr>'.
                            '<td class="header" colspan="2">Login Below</td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Email Address</td>'.
                            '<td><input type="text" name="emailaddr" class="long"></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile1" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td>Password</td>'.
                            '<td><input name="userfile2" type="file" /></td>'.
                        '</tr>'.
                        '<tr>'.
                            '<td colspan="2"><input type="submit" name="v" value="Register Now!" /></td>'.
                        '</tr>'.
                    '</table>'.
                    '</form>'.
                    '</td>'.
            '</tr>'.
        '</table>';
        exit;
}
function showpage($user, $id, $bsid) {
    if(!$user) {
        switch ($id) {
            case "public":
                return "Welcome, Guest! - <a href='register.php'>Register!</a> - <a href='index.php'>Public Data</a> - <a href='private.php'>Private Data</a><br />";
                break;
            case "private":
                showloginregister(); 
                break;
        }
    } else {
        return "Welcome, {$user}!  <a href='index.php?logout={$bsid}'>Logout!</a> - <a href='index.php?bsid={$bsid}'>Public Data</a> - <a href='private.php?bsid={$bsid}'>Private Data</a><br />";
    }
}

Index.php

<?PHP
/*
    index.php
    this is an example of using public data
*/
?>
<html>
<head>
<title>Image Password Protected Website</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?PHP
$pagetype = "public"; //"public" or "private"
include('functions.php');
$user = checkloggedin($_GET['bsid']);
processpost($_GET, $_POST, $_FILES);
echo showpage($user, $pagetype, $_GET['bsid']);
?>
This is public data!
</body>
</html>

Private.php

<?PHP
/*
    private.php
    this is an example of using private data
*/
?>
<html>
<head>
<title>Image Password Protected Website</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?PHP
$pagetype = "private"; //"public" or "private"
include('functions.php');
$user = checkloggedin($_GET['bsid']);
processpost($_GET, $_POST, $_FILES);
$data = "This is private data!";
echo showpage($user, $pagetype, $_GET['bsid']);
?>
This is private data!
</body>
</html>

Register.php

<?PHP
/*
    register.php
    this is an example of how to force a login/register page on the user
*/
?>
<html>
<head>
<title>Image Password Protected Website</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<?PHP
//register.php
include('functions.php');
echo showpage(false, "private", "");
?>

Here is my style.css if you want your pages to look as pretty as mine!

body {
    background: #5c5a51;
}
a {
    color: #fff;
}
body, div, table, tr, td, span, input {
    font-family: verdana;
    font-size:9pt;
}
table.main {
    background: #d2d1ce;
    border: 2px solid #d2d1ce;
    width:375px;
}
td.header {
    background: #8d8a7c;
    padding:3px;
    font-weight: bold;
}
input.long {
    width:200px;
}
.one {
    background: #afada5;
} 

[Jordan]

That is awesome! I've never thought about doing that before. +rep!!

[BlaineSch]

Technically I suppose I did not actually hard code in an "image password" its really a "file password" so I suppose you can really use any file you want - id probably limit it based on size tho - oh well.

Glad you like it! I might improve the script up a bit and post the source up here as well.

[Xav]

Fantastic tutorial, +rep.

It would be even better if you could use an image as a password on any website instead of text - I was thinking of the way an image can call a PHP script (by setting the PHP header to an image) but what we would need is the opposite - password text that then called an image. Never mind.

[BlaineSch]

I am glad you guys like it.

Not really sure what you mean Xav you kinda lost me

[Xav]

Ya know the way how you can link to a PHP file using an <img> tag, that then generates an image?

Well I was thinking of something like that, but I then realised it would have to be in reverse. Using an image as a password on any standard website would mean some way of converting the image into a piece of text that could be inputted into the password field.

[BlaineSch]

What I think your saying is have a program that you upload a photo and it gives you the hash to use as a password?

<?PHP
echo md5(file_get_contents($_FILES["userfile"]["tmp_name"]));
?>
<form method="post" action="md5it.php" enctype="multipart/form-data"><table class="main"><tr><td class="header" colspan="2">Upload Below</td></tr><tr><td>Password</td><td><input name="userfile" type="file" /></td></tr><tr><td colspan="2"><input type="submit" name="v" value="Login Now!" /></td></tr></table></form>

[SteelSlasher]

This is a pretty good concept, and could be expanded in a way to restrict access to a single computer. I might extend in my spare time.

[kiddies]

nice n thanks for sharing.....i can learn it first....

[BlaineSch]

Thanks for the comments. Would be nice to see that tutorial SteelSlasher.