{"id":1236,"date":"2018-01-19T19:22:35","date_gmt":"2018-01-19T19:22:35","guid":{"rendered":"http:\/\/goofy-trucks.flywheelsites.com\/visual-verification-in-php\/"},"modified":"2018-01-19T19:24:38","modified_gmt":"2018-01-19T19:24:38","slug":"visual-verification-in-php","status":"publish","type":"post","link":"https:\/\/phpbuilder.com\/visual-verification-in-php\/","title":{"rendered":"Visual Verification in PHP"},"content":{"rendered":"
\n
\n
By Brett Patterson<\/div>\n
on March 2, 2006<\/div>\n<\/p><\/div>\n
\n

\u00bfVerification?<\/h2>\n
\nMany topics on the discussion forums<\/a> deal with the verification of form data. Often it is checked to determine whether or not the submission is from a user or from a “bot”, if the email address entered is a valid address, or if all the information that is required has been entered into the form. While it’s fairly easy to check to see if a form field is empty, determining if the posted information came from a real human is another task altogether. Most forms now include image verification for just this reason. This article will demonstrate how to create a simplified image verification system.\n<\/div>\n

Random strings, or random characters?<\/h2>\n
\nThere are two different ways that we can go about doing this. We can use a set of pre-made sentences and randomly choose characters from those sentences, or we can randomly generate an alpha-numeric string. Both methods are going to be explained and explored in our code. Let’s get to it!\n<\/div>\n

Defining some things<\/h2>\n
\nWith our verification, we will use “random” colors for text and backgrounds. Also, we need to define a maximum length of characters that the “random” string will be. We also need to define what font we’re using and where to find it (see the next section for more information on that subject).<\/p>\n

To make our code more portable, we’ll be using a function to create the image, so we can start by declaring the function and then our variables:\n<\/p><\/div>\n

\n
Code:<\/div>\n
<?php\nfunction<\/span> gen_rand_img()\n{\n\t\/**\n\t *\tWe define some static items here\n\t *\/\n\n\t ## Define our random sentences<\/span>\n\t$sentences<\/span> = array<\/span>(\n\t\t\t'This is a random string'<\/span>,\n\t\t\t'Lorum Ipsum Doler sit amet'<\/span>,\n\t\t\t'The quick brown fox jumps over the lazy dog'<\/span>,\n\t\t\t'Kick the tires and light the fires Big Daddy'<\/span>\n\t\t\t);\n\n\t## Define font file<\/span>\n\tputenv<\/span>('GDFONTPATH='<\/span>.realpath<\/span>('.'<\/span>)); \/\/ Set GD font path to this directory<\/span>\n\t$font<\/span> = 'ProggyCleanSZBP'<\/span>; \/\/ Leave extension off\n\n\t## Define some random colors\n\t## http:\/\/december.com\/html\/spec\/colordec.html<\/span>\n\t$bg_colors<\/span> = array<\/span>( ## BACKGROUND COLORS<\/span>\n\t\t\t'176.196.222'<\/span>, \/\/ Blue<\/span>\n\t\t\t'204.153.204'<\/span>, \/\/ Purple<\/span>\n\t\t\t'204.204.204'<\/span>, \/\/ Gray<\/span>\n\t\t\t'227.81.82'<\/span>, \/\/ Red<\/span>\n\t\t\t'150.200.162'<\/span>\t \/\/ Green<\/span>\n\t\t\t);\n\t$font_colors<\/span> = array<\/span>( ## FONT COLORS<\/span>\n\t\t\t'0.0.139'<\/span>, \/\/ Blue<\/span>\n\t\t\t'104.34.139'<\/span>, \/\/ Purple<\/span>\n\t\t\t'79.79.79'<\/span>, \/\/ Gray<\/span>\n\t\t\t'128.0.0'<\/span>, \/\/ Red<\/span>\n\t\t\t'59.94.15'<\/span>\t \/\/ Green<\/span>\n\t\t\t);\n\n\t$img_width<\/span> = 150<\/span>; ## Image Width<\/span>\n\t$img_height<\/span> = 75<\/span>; ## Image height<\/span>\n\t$fnt_size<\/span> = 24<\/span>;  ## Font-Size<\/span>\n\t$let_space<\/span> = 10<\/span>; ## Letter Spacing<\/span>\n\t$str_length<\/span> = 6<\/span>; ## Length of Random String\n\t\/**************\/<\/span>\n?><\/pre>\n<\/div>\n
Colors Galore!!<\/h2>\n
We will now define some colors for the font and background of our image.  We use a decimal separated value of RGB values.  You can define your own colors, but they have to be RGB values.  A large list of colors can be found here<\/a>.  Be careful when defining colors so that you don’t use colors that are too similar.  You want to avoid having text that is unreadable or too difficult to read, so pick your colors wisely.<\/div>\n
What Font??<\/h2>\n
\nWe will now define what font we’re using.  I chose to use ProggyCleanSZBP as the font for reference because it puts slashes through zeros.  It helps to differentiate between 0 (zero) and O (capitol “Oh”).  You can download this font (for free) from its home page at Proggy_Fonts.com<\/a>.  You can choose one from there, or just use your own.  Just make sure it’s a TTF (True Type Font) and it’s placed in the same directory as this script.<\/p>\n
We define the font path to be used with GD by getting the realpath<\/em> to our current directory.  Then, we define our font-name (which is the name of the font file).  We will use it later, but these steps are required.  Now how about those “random” strings?\n<\/div>\n
Generating a Random String<\/h2>\n
We need to define random strings to use in the image.  Once we get this part ready, it’s on to generating the image. We will write one function to create our random string, and we’ll use a series of functions to both randomize the string and randomly select a portion of that string.  The code is fairly simple and straight-forward:<\/div>\n
\n
Code:<\/div>\n
<?php\n\tfunction<\/span> gen_random_string($length<\/span>=5<\/span>, $str<\/span>=''<\/span>)\n\t{\n\t\tfor<\/span>($i<\/span>=1<\/span>; $i<\/span><=$length<\/span>; $i<\/span>++)\n\t\t{\n\t\t\t$ord<\/span> = rand<\/span>(48<\/span>, 90<\/span>);\n\n\t\t\tif<\/span>( ( ($ord<\/span>>=48<\/span>) && ($ord<\/span><=57<\/span>) ) || ( ($ord<\/span>>=65<\/span>) && ($ord<\/span><=90<\/span>) ) )\n\t\t\t{\n\t\t\t\t$str<\/span> .= chr<\/span>($ord<\/span>);\n\t\t\t}\n\t\t\telse<\/span>\n\t\t\t{\n\t\t\t\t$str<\/span> .= gen_random_string(1<\/span>);\n\t\t\t}\n\t\t}\n\t\treturn<\/span> $str<\/span>;\n\t}\n\n\t## Random String or Random Sentence?<\/span>\n\t$str_snt<\/span> = rand<\/span>(0<\/span>,1<\/span>); \/\/ 0: sentences, 1: random string<\/span>\n\n\tif<\/span>($str_snt<\/span> == 0<\/span>)\n\t{\n\t\t$rnd_str<\/span> = str_replace<\/span>(' '<\/span>, ''<\/span>, strtoupper<\/span>($sentences<\/span>[rand<\/span>(0<\/span>,count<\/span>($sentences<\/span>)-1<\/span>)]));\n\t\t$rnd_str<\/span> = substr<\/span>($rnd_str<\/span>, rand<\/span>(0<\/span>,strlen<\/span>($rnd_str<\/span>)-$str_length<\/span>), $str_length<\/span>);\n\t}\n\telse<\/span>\n\t{\n\t\t$rnd_str<\/span> = gen_random_string($str_length<\/span>);\n\t}\n?><\/pre>\n<\/div>\n
What’s going on?<\/h2>\n
\nWith the above code, first we’re randomizing the string to be either a sentence or alpha-numeric.  Once that is “decided” for us by our script, we either generate a random string (with our function) or we select a random sub-string of a random sentence to show.  Now we’ll delve into what our function does.<\/p>\n
We start off by defining the length we want (with a default of 5) and a default string variable.  Doing this helps in two ways:<\/p>\n
    \n
  • We can also make this recursive, as we’ll explain later. <\/li>\n
  • It has expandability<\/li>\n<\/ul>\n
    When we call the function it loops for as many times as we choose.  For each loop, it generates a random number between 48 and 90.  Then, it checks to make sure that the value it generated is a valid ordinal for an alpha-numeric character.  Those ordinal values are 48 – 57 (numeric) and 65 – 90 (alphabetic).
    \nIf the random number is not between those values, it runs itself again (recursively) so that we get a proper valid string.<\/p>\n
    The sentence version is a bit more complicated.  This one does the following (in this order):<\/p>\n
      \n
    1. Generates a random key for use with the $sentences<\/span> array<\/li>\n
    2. Gets the sentence that is bound to the random key that we generated above<\/li>\n
    3. Converts the string to all UPPERCASE letters<\/li>\n
    4. Replaces all spaces with no-space so we get a long string of characters<\/li>\n
    5. Stores the above string into a variable called $rand_str<\/span><\/li>\n<\/ol>\n
      The next line that gives us the final random string is a little tricky.  So let’s break it down, one by one:\n<\/p><\/div>\n
      \n
      Code:<\/div>\n
      $rnd_str<\/span> = substr<\/span>($rnd_str<\/span>, rand<\/span>(0<\/span>,strlen<\/span>($rnd_str<\/span>)-$str_length<\/span>), $str_length<\/span>);<\/pre>\n<\/div>\n
      \nWorking from the inside out, the first step generates the length of our random string.  Then the rand() function generates a random number from 0 (first character) to $str_length<\/span> characters from the end.  Our first sentence would give:
      THISISARANDOMSTRING<\/b><\/i> [String Length: 19] – [$str_length: 6] = 13<\/p>\n
      So we generate a random number from 0 to 13, but we do it in a dynamic way so that we can use any sentence we want.  Then it’s just a matter of cutting the string $rnd_str<\/span> from its random starting point (evaluated above) and spanning the next $str_length<\/span> characters.\n<\/div>\n
      So How About That Image?<\/h2>\n
      \nNow that we have our random string in the variable $rnd_str<\/span> we can finally write the code to create the image.\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"
      While it’s fairly easy to check to see if a form field is empty, determining if the posted information came from a real human is another task<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1236","post","type-post","status-publish","format-standard","hentry","category-tutorials"],"_links":{"self":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1236","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/comments?post=1236"}],"version-history":[{"count":1,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1236\/revisions"}],"predecessor-version":[{"id":3137,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/posts\/1236\/revisions\/3137"}],"wp:attachment":[{"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/media?parent=1236"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/categories?post=1236"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/phpbuilder.com\/wp-json\/wp\/v2\/tags?post=1236"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}