Image Verification with a twist. Clicking instead of typing.

fr8

Ive seen this done on a couple of sites. Instead of having the random image that shows up on other sites that you then type into a form. These sites just have you click the image in one of two spots.

Example:
The image has 5 words in it. 2 of those words happen to be the same.

Now instead of typing in the word. All the user had to do is click one of the matching words in the image.

Now I know how to do Image Verification. But i dont know how to setup the clicking aspect. Ive searched the source code of the pages and none of the javascript (including the .js files located off page) code has to do with the image clicking aspect. Infact the image is plain form html.

and i dont think the file name is part of it. as the word for that image was "Musty".

Any ideas?

samudasu

I have an idea but you'll have to test it. When using <input type=image src="image.gif" name="sub">, clicking on the image transmits the x and y coordinates of the spot where you clicked. ($POST['sub_x'] and $POST['sub_y']). Now imagining your image with 5 words in it. If you figure the beginning xy coordinates and ending xy coordinates of the correct words then you should be able to do a simple if else statement to see if sub_x and sub_y fall within the xy coordinates for one of the correct words.

Installer

I agree with samudasu, except that the coordinates will be available as simply "$POST['x']" and "$POST['y']" (or "$GET['x']" and "$GET['y']") when the clicked-on image is a form input element.

Here's a test script:

if (!isset($_POST['marker']) && !isset($_GET['marker'])) {
    echo 'GET:<form method="get" action="' . $_SERVER['PHP_SELF'] . '">';
    echo '<input type="hidden" name="marker" value="set" />';
    echo '<input type="image" src="./1.jpg" border="0" />';
    echo '</form>';
    echo 'POST:<form method="post" action="' . $_SERVER['PHP_SELF'] . '">';
    echo '<input type="hidden" name="marker" value="set" />';
    echo '<input type="image" src="./test.jpg" border="0" />';
    echo '</form>';
} else {
    if (isset($_POST['marker'])) {
        echo '$_POST:' . '<br />';
        foreach ($_POST as $key => $val) {
            echo $key . ' => ' . $val . '<br />';
        }
    } else {
        echo '$_GET:' . '<br />';
        foreach ($_GET as $key => $val) {
            echo $key . ' => ' . $val . '<br />';
        }
    }
}

samudasu

According to the php manual, $POST['sub_x'] and $POST['sub_y'] would be the variables returned from <input type=image src="image.gif" name="sub">.

external variables

Installer

You're right, and I didn't read your first post closely enough. But if you look at the html line quoted by fr8, it doesn't have a name attribute, so the indexes would be only 'x' and 'y', as my test script shows.

fr8

cool. now to do some testing. will get some code up when it works or i get stuck. 🙂

fr8

Now if im setting up the random words like so.

// couple known varibles that may be useful to answer the question.
$width = 400;
$height = 220;

$text1 = array_rand($random);
imagettftext($im, 18, mt_rand(-30, 30), mt_rand(45, 65), mt_rand(65, 85), $forground_color, $font, $random[$text1]);
unset($random[$text1]);

$text2 = array_rand($random);
imagettftext($im, 18, mt_rand(-30, 30), mt_rand(275, 325), mt_rand(55, 75), $forground_color, $font, $random[$text2]);
unset($random[$text2]);

$text3 = array_rand($random);
imagettftext($im, 18, mt_rand(-30, 30), mt_rand(135, 175), mt_rand(75, 155), $forground_color, $font, $random[$text3]);
unset($random[$text3]);

$text4 = array_rand($random);
imagettftext($im, 18, mt_rand(-30, 30), mt_rand(55, 75), mt_rand(155, 165), $forground_color, $font, $random[$text4]);
unset($random[$text4]);

$text5 = array_rand($random);
imagettftext($im, 18, mt_rand(-30, 30), mt_rand(300, 325), mt_rand(125, 175), $forground_color, $font, $random[$text5]);
unset($random[$text5]);

Any ideas how i can map the xy of the clicks?

Things that ive yet to figure the best way to do is to find out which two $text match and how to use the $_POST x and y to determin where a VALID click came from?

What im trying not to do is not pass any more POST varibles other than the uid and the xy.

foid025

What about the random image selection to display? I suppose you should make an array of phpimages, and randomly select one of them, and use that one twice, and pass that array index as a session variable to your signup verification page. Follow?

Otherwise as to maping the xy, just do an HTML image map? Seems that would be the easiest!

Good luck!

crazychris

store the co-ords in the session, then compare and unset on the destination/checking page.

Alternativly...

Make some kind of crypt function to convert the co-ords into a hex/ascii/decimal string, name the image as this string, then scan the $POST keys for the x and _y names, decode back to co-ords and viola!

Good method, like it a lot, and can be twisted further.

how about clicking on one of the 2 same sized squares (easier to map points) and put 20 different sized/coloured squares on the image.

samudasu

This is what i had in mind when first replying to your post. This is a simple example, more code could be used to insert a random image on each load of the form. This code is meant to be used with pre made images with the coordinates already figured and stored somewhere. The hidden field(not used in this example) is for getting the image name or an image id that you would use to query a database for the image coordinates. I've included an attached image to use with this example.

<html>
<body>
click image<br />
<form action="verifyimage.php" method="post">
<input type="image" name="sub" src="image.gif" />
<input type="hidden" name="image" value="image.gif" />
</form>
</body>
</html>

<?php

// beginning and ending coordinates for first correct word. (Should come from database).
$bx1 = 45;
$ex1 = 120;
$by1 = 140;
$ey1 = 165;

// beginning and ending coordinates for the second correct word. (Should come from database).
$bx2 = 275;
$ex2 = 350;
$by2 = 40;
$ey2 = 70;

extract($_POST);
if ((($sub_x >= $bx1) && ($sub_x <= $ex1) && ($sub_y >= $by1) && ($sub_y <= $ey1)) || 
(($sub_x >= $bx2) && ($sub_x <= $ex2) && ($sub_y >= $by2) && ($sub_y <= $ey2)) ) {
	print "success message here<br />";
} else {
	print "error message here<br />";
}

?>

fr8

foid025 wrote:
What about the random image selection to display? I suppose you should make an array of phpimages, and randomly select one of them, and use that one twice, and pass that array index as a session variable to your signup verification page. Follow?

Otherwise as to maping the xy, just do an HTML image map? Seems that would be the easiest!

Good luck!

Well the image is trully random, im using GD to create it on the fly. Lines and dots are put all over it to obscure it from OCR and the text is randomly tilted with the "imagettftext" gd/php command. Only thing that is not random is the size of the image. That is fixed.

As for the image map. I want to stay away from that. To me if I put some thought into it, i think i could break it and make some type of app/webapp that would automate it and ruin what im tyring to do. As for the way at which im tyring to do it. It would be a totaly different level of trying to break it or at least I think so.

fr8

crazychris wrote:
store the co-ords in the session, then compare and unset on the destination/checking page.

Alternativly...

Make some kind of crypt function to convert the co-ords into a hex/ascii/decimal string, name the image as this string, then scan the $POST keys for the x and _y names, decode back to co-ords and viola!

Good method, like it a lot, and can be twisted further.

how about clicking on one of the 2 same sized squares (easier to map points) and put 20 different sized/coloured squares on the image.

id like to do that but how do i get the co-ords. i only know two of the 4 co-ords is to make a square. and this square is not parallele. it randomly changes its axis.

imagettftext($im, 18, mt_rand(-30, 30), mt_rand(275, 325), mt_rand(55, 75), $forground_color, $font, $random[$text2]);
// the first mt_rand changes the axis.
// the second mt_rand is where the word will display.

fr8

Here is how I have the image setup. http://24.166.189.134/index.php

samudasu

How do you plan to map values of the two correct choices when the angle, xy coordinates, and word length are all random? There's no starting point to begin mapping from and with angle and word length how can your script find ending xy coordinates? The crazychris method sounds interesting with colored squares.

fr8

samudasu wrote:
How do you plan to map values of the two correct choices when the angle, xy coordinates, and word length are all random? There's no starting point to begin mapping from and with angle and word length how can your script find ending xy coordinates? The crazychris method sounds interesting with colored squares.

I think somehow I need to encorporate http://us2.php.net/manual/en/function.imagettfbbox.php. I think thise might just solve my problem. But im stilll trying to figure how to use it.