Registration Confirmation Page

[Greg Collins [InfoPath MVP]]

I couldn't find what I was looking for doing a search through the newsgroup, so here goes...

I'm have a Web site user registration confirmation page that I want to show a set of random numbers (images) which the user has to look at and type into a field for verification that this is really a user and not a bot. If you've registered for some more formal Web sites, you've seen what I'm talking about.

My question is this:

I have a series of image files for the numbers 0 through 9 (four different sets of them actually). I want to have an ASP.NET page that reads a Session variable to get the random #, and then generate a SINGLE image file which it then returns to the calling page.

What I need is some C# code that will load a series of image files and combine them horizontally into a single image. I'm sure this can be done... I just don't know where to start.

So if I had my Session variable with a value of '8675309', I would want to load the image file for each of those individual numbers, 'number8.gif', 'number6.gif', ... 'number9.gif'. Each of these files are the exact same height and width. Therefore I want to create an in memory image of width*7 by height, and copy the image from each file into the correct spot in the in memory image. When done I return this image.

Will you share with me the C# code needed to accomplish this?

 

[Nicholas Paldino [.NET/C# MVP]]

Greg,

I would recommend that you not do this. The reason is that if you use
static images, which don't have a variance, and someone picks up on it, it
will be easy to just map the sections of the image back to the number, and
viola! It's curcumvented.

Rather, I would recommend that you create the image on the server side,
and then write the numbers. Then, you would apply a set of random
transformations to the image to skew or alter the image in a way that would
fool OCR, but not the human eye. This is better than your solution because
each number doesn't have a static pattern that can be associated with that
number.

To do this, you can call the static FromImage method on the Graphics
class, which will return a Graphics instance you can make calls to
manipulate. Use the DrawString method to paint the numbers on the bitmap.
Then you would use the same graphics instance to alter the bitmap.

Once done, you would call the Save method on the Bitmap, and save the
file to a local disk, or you can have an ASP.NET page stream the image
directly to the client. In order to do this, you would have to have some
sort of query string which would tell the page how to render the image
(since the link is embeded in the IMG tag).

Of course, this brings up a security issue again. You have to encrypt
the query string in such a way that the value is not discernable by looking
at it. I recommend you create an encryption key per session (based on the
time, or the session id, or a combination of both, this can easily be done
through hashing) and use that.

Then, you have to embed the encrypted value on the page that is
submitting the validation routine, so that when processing the page, you can
compare what the user entered with what you showed them.

Hope this helps.


--
- Nicholas Paldino [.NET/C# MVP]
- (e-mail address removed)



"Greg Collins [InfoPath MVP]" <Greg.Collins_AT_InfoPathDev.com> wrote in
message I couldn't find what I was looking for doing a search through the newsgroup,
so here goes...

I'm have a Web site user registration confirmation page that I want to show
a set of random numbers (images) which the user has to look at and type into
a field for verification that this is really a user and not a bot. If you've
registered for some more formal Web sites, you've seen what I'm talking
about.

My question is this:

I have a series of image files for the numbers 0 through 9 (four different
sets of them actually). I want to have an ASP.NET page that reads a Session
variable to get the random #, and then generate a SINGLE image file which it
then returns to the calling page.

What I need is some C# code that will load a series of image files and
combine them horizontally into a single image. I'm sure this can be done...
I just don't know where to start.

So if I had my Session variable with a value of '8675309', I would want to
load the image file for each of those individual numbers, 'number8.gif',
'number6.gif', ... 'number9.gif'. Each of these files are the exact same
height and width. Therefore I want to create an in memory image of width*7
by height, and copy the image from each file into the correct spot in the in
memory image. When done I return this image.

Will you share with me the C# code needed to accomplish this?

 

[Lowell Heddings]

I agree. The best way to do this is to use a class to dynamically create
the image on the fly.

You would use a Session variable to store the text you are looking for,
and the Session variable would be used by the dynamicimage.aspx page to
know how to create the image. This simplifies the entire thing, removing
the need for any querystring elements.

There is an excellent article here that you should read:

http://www.codeproject.com/aspnet/CaptchaImage.asp

Lowell

 

[clintonG]

I get it. Sorry to say your concept sounds as if you want to try the same
approach as was used in the "good ol' days" to generate images for hit
counters. Not a good idea as others have explained.

If I understand your actual objective what you are trying to develop is
called a CAPTCHA which stands for "completely automated public Turing test
to tell computers and humans apart." Check out this C# example from
CodeProject [1]. I've downloaded it and its runs prefectly albeit a bit slow
on the first load. Inspecting the code suggests to me that it should not be
difficult to modify the HatchBrush and HatchStyle properties. I'm going to
be working on this same objective this week...

--
<%= Clinton Gallagher, "Twice the Results -- Half the Cost"
Architectural & e-Business Consulting -- Software Development
NET (e-mail address removed)
URL http://www.metromilwaukee.com/clintongallagher/


[1] http://www.codeproject.com/aspnet/CaptchaImage.asp




"Greg Collins [InfoPath MVP]" <Greg.Collins_AT_InfoPathDev.com> wrote in
message I couldn't find what I was looking for doing a search through the newsgroup,
so here goes...

I'm have a Web site user registration confirmation page that I want to show
a set of random numbers (images) which the user has to look at and type into
a field for verification that this is really a user and not a bot. If you've
registered for some more formal Web sites, you've seen what I'm talking
about.

My question is this:

I have a series of image files for the numbers 0 through 9 (four different
sets of them actually). I want to have an ASP.NET page that reads a Session
variable to get the random #, and then generate a SINGLE image file which it
then returns to the calling page.

What I need is some C# code that will load a series of image files and
combine them horizontally into a single image. I'm sure this can be done...
I just don't know where to start.

So if I had my Session variable with a value of '8675309', I would want to
load the image file for each of those individual numbers, 'number8.gif',
'number6.gif', ... 'number9.gif'. Each of these files are the exact same
height and width. Therefore I want to create an in memory image of width*7
by height, and copy the image from each file into the correct spot in the in
memory image. When done I return this image.

Will you share with me the C# code needed to accomplish this?

 

[Bryan Valencia]

I would just add that you should be sure to avoid zeroes and "O"s, 6s and
G's 2's and "Z"s, 1's and l's

 

[clintonG]

Good point but that issue may be resolved using a font with high fidelity
even when distortion is applied. I don't know that distortion will be
necessary for most sites. It seems to me that one good thing about using a
CAPTCHA though is it does allow the use of any font that is installed on the
server and there must be one that may be optimal to allow the use of
characters which may otherwise be misread.

I'm also wondering how I might support accessibility. I read that Amazon
will play an audio file. I'm going to try to review that. It is quite easy
to hear B as D and be just as misled as when reading. So I'm considering the
use of the ICAO Alphabet for audible playback, i.e. alpha, tango, charlie,
and so on.

We'll see. I still have to learn HTML ;-)

 

[Greg Collins [InfoPath MVP]]

Thanx! This was very useful to get me going. I did some more research and found this MSDN article which has a stronger and more robust implementation of CAPTCHA that you might be interested in...

http://msdn.microsoft.com/library/default.asp?url=/library/en-us/dnaspp/html/hip_aspnet.asp

--
Greg Collins [InfoPath MVP]
Please visit: http://www.InfoPathDev.com



I agree. The best way to do this is to use a class to dynamically create
the image on the fly.

You would use a Session variable to store the text you are looking for,
and the Session variable would be used by the dynamicimage.aspx page to
know how to create the image. This simplifies the entire thing, removing
the need for any querystring elements.

There is an excellent article here that you should read:

http://www.codeproject.com/aspnet/CaptchaImage.asp

Lowell