Jump to content


Check out our Community Blogs

Register and join over 40,000 other developers!


Recent Status Updates

View All Updates

Photo
* * * * * 2 votes

Use an Image as a Password!

align

26 replies to this topic

#1 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 18 May 2009 - 10:09 PM

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 ** 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;
}

  • 1

#2 Guest_Jordan_*

Guest_Jordan_*
  • Guest

Posted 19 May 2009 - 04:33 AM

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

#3 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 19 May 2009 - 05:08 AM

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.
  • 0

#4 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 19 May 2009 - 11:06 AM

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. :)
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#5 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 20 May 2009 - 05:17 AM

I am glad you guys like it.

Not really sure what you mean Xav you kinda lost me :P
  • 0

#6 Xav

Xav

    CC Mentor

  • VIP Member
  • PipPipPipPipPipPipPipPip
  • 8356 posts

Posted 20 May 2009 - 11:10 AM

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.
  • 0
If you enjoy reading this discussion and are thinking about commenting, why not click here to register and start participating in under a minute?

#7 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 20 May 2009 - 11:56 AM

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>

  • 0

#8 SteelSlasher

SteelSlasher

    CC Lurker

  • Just Joined
  • Pip
  • 1 posts

Posted 26 May 2009 - 02:06 AM

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.
  • 0

#9 kiddies

kiddies

    CC Addict

  • Advanced Member
  • PipPipPipPipPip
  • 129 posts

Posted 02 June 2009 - 07:34 AM

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

#10 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 02 June 2009 - 11:27 AM

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

#11 BlaineSch

BlaineSch

    CC Leader

  • Expert Member
  • PipPipPipPipPipPipPip
  • 1559 posts

Posted 09 August 2009 - 07:59 PM

I am glad you enjoyed it! If you end up ever using it, or are just feeling generous, +Rep is always appreciated.

Enjoy!
  • 0

#12 John

John

    CC Mentor

  • Moderator
  • 4450 posts
  • Location:New York, NY

Posted 10 August 2009 - 05:06 AM

Ohhh, this is the third time I've read this tutorial and I've finally realized what you are doing. I initially thought you were doing stenography which is why your code didn't make any sense and I never commented. :P

Not a bad idea.
  • 1