Build a Captcha using jQuery and Web API (Part 2)

In part 1, we looked at setting up the code for displaying the captcha, calling the image creation and returning the encrypted text along with the image. In this article, I am going to show you how to use the decryption piece. Using the original code which you can see here. You want to add another event on the submit form like so…

    $("#Submit2").on("click", function () {

                $.post("/api/Validate", { 'CapText': $('#Text1').val(), 'CapEncryptedKey': $("#hdnCaptcha").val() })
                    .done(function (data) {
			alert('Matched')
                    })
                    .fail(function () {
                        alert("Not matched");
                    })
                    .always(function () {
                    });
            })

This is very straight forward. It takes the text entered and the encrypted key and sends it back to the server for validation.

On the server side you need to create a web api. I call it ValidateController and it has the following code.

Imports System.Security.Cryptography

Public Class ValidateController
    Inherits ApiController

    Private TripleDes As New TripleDESCryptoServiceProvider

    ' POST api/<controller>
    Public Function PostValue(ByVal CaptchaValidator As captchaclass) As HttpResponseMessage

        Dim EncryptKey As String = "CaptchaTest"

        Dim vd As String = CaptchaValidator.CapText

        Dim wrapper As New Encrypting(EncryptKey)
        Dim PlainText As String = wrapper.DecryptData(CaptchaValidator.CapEncryptedKey)

        If CaptchaValidator.CapText = PlainText Then
            Dim response = Request.CreateResponse(HttpStatusCode.OK, CaptchaValidator)
            Return response
        Else
            Dim response = Request.CreateResponse(HttpStatusCode.BadRequest, CaptchaValidator)
            Return response
        End If
    End Function
End Class

Public Class captchaclass
    Public Property CapText As String
    Public Property CapEncryptedKey As String
End Class

It is important to notice that the Encrypt key is the same as the key used to encrypt the data in the first place. For obvious reasons they must match. If the decrypted key matches the typed in key then it returns a success otherwise it returns an error which is then captured in the page.

Some other points to remember.
1. Add your routing info in the global.asx page.
2. Set your encryption key in the web.config.
3. Don’t set your text to small in length.

That’s it……Now you have a captcha on your page, without using cookies and not needing a generic handler page (.ashx).

Looking for quality web hosting? Look no further than Arvixe Web Hosting!

Tags: , , , | Posted under Programming/Coding | RSS 2.0

Author Spotlight

David Bauernschmidt

David Bauernschmidt

I live in the historical triangle of Virginia where I am married with two daughters. I have spent over 13 years working for a Fortune 500 company in the computer area. I started in VB 6.0 and by the time I ended my employment I was supervising a development team where we built many web applications. When my first daughter was born I wanted to spend more time with her so I left and became a programmer analyst for local government as well as launch my own company. Since then I have grown James River Webs into a profitable web design and application company helping small businesses create a big presence on the internet. As an employee I have created web application used by citizens and other companies. I enjoy fly fishing, and spending time with my family. I also enjoy learning new approaches and development tools when it comes to developing applications.

Leave a Reply

Your email address will not be published. Required fields are marked *


+ 1 = 5

You may use these HTML tags and attributes: <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>