Introduction

Here, we are going to see how to integrate different kinds of captcha in your application and how to use them.

Prerequisite

Basic knowledge of ASP.NET MVC

Article Flow
  1. What is Captcha?
  2. Use of Captcha?
  3. Creating new project
  4. Integrate Captcha
What is Captcha ?

A CAPTCHA is a challenge-response system where in typically a dynamically generated image consisting of random letters and numbers is displayed to the users and the users are asked to re-enter the text in an attempt to verify that both of them match.
CAPTCHA stands for "Completely Automated Public Turing Test to Tell Computers and Humans Apart "
Use of Captcha?
  1. To prevent spam and automated form submissions in the website being developed, CAPTCHA is extremely useful.
  2. The primary purpose of CAPTCHA is to ensure that the data is being submitted by humans and not by an automated software system.
Creating new project
To integrate Captcha, we are going to create a simple registration application in the below steps.
Step 1 Create New Project and name it as CaptchaMVC5

Step 2

Select Empty MVC Web Application.
Step 3

After the creation of Project, Add Reference to your application. For that, right click References and select "Manage NuGet Packages".
Step 4

Search in NuGet as CaptchaMVC. Here, we are going to select MVC5 and click "Install" to add reference to our project.
Step 5

After Installing the captcha from NuGet , you can see it in Project References.
Step 6

Create Controller to create ActionMethod for Respective view.
Step 7

Select Empty Controller.
Step 8

Name it as Captcha.
Step 9

Now, let's create View by right clicking autogenerated action method. Select "Add View" to create a new View for Actionmethod(Index).
Step 10

Create View with or without model.
Step 11

Create a Model in the name of Registration under Models folder.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace CaptchaMVC5.Models {
  6. public class Registration {
  7. public int Id {
  8. get;
  9. set;
  10. }
  11. public string UserName {
  12. get;
  13. set;
  14. }
  15. public string Password {
  16. get;
  17. set;
  18. }
  19. public string Address {
  20. get;
  21. set;
  22. }
  23. }
  24. }
Step 12 Create Controls in View
Add @model CaptchaMVC5.Models.Registration to make the View as strongly typed View.
Add namespace @using CaptchaMvc.HtmlHelpers to access the captcha htmlhelper classes.
And the View like below.
  1. @model CaptchaMVC5.Models.Registration
  2. @using CaptchaMvc.HtmlHelpers
  3. @ {
  4. ViewBag.Title = "Index";
  5. }
  6. @using(Html.BeginForm("Index", "Captcha", new {
  7. enctype = "multipart/form-data", id = "Captcha"
  8. })) {
  9. @Html.ValidationSummary(true) < fieldset > < legend > Registration < /legend> < div class = "form-group" > < label > Username < /label> < div > @Html.TextBoxFor(N => N.UserName, new {
  10. @id = "UserName", @class = "form-control", @placeholder = "UserName", required = "required"
  11. }) < /div> < /div> < div class = "form-group" > < label > Password < /label>
  12. @Html.PasswordFor(N => N.Password, new {
  13. @id = "Password", @class = "form-control", @placeholder = "Password", required = "required"
  14. }) < /div> < div class = "form-group" > < label > Address < /label>
  15. @Html.TextBoxFor(N => N.Address, new {
  16. @id = "Address", @class = "form-control", @placeholder = "Address", required = "required"
  17. }) < /div>
  18. @Html.MathCaptcha() < br / > < p > @ViewBag.ErrorMessage < /p> < p > < input type = "submit"
  19. value = "Send" / > < /p> < /fieldset>
  20. }
In the above View, I have added three razor controls to get input from users and added the @Html.MathCaptcha() to generate Math Captcha.
Step 13 Routeconfig
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using System.Web.Routing;
  7. namespace CaptchaMVC5 {
  8. public class RouteConfig {
  9. public static void RegisterRoutes(RouteCollection routes) {
  10. routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
  11. routes.MapRoute(name: "Default", url: "{controller}/{action}/{id}", defaults: new {
  12. controller = "Captcha", action = "Index", id = UrlParameter.Optional
  13. });
  14. }
  15. }
  16. }
Step 14

Run the application.

Now, I am going to change this Math captcha to Char Captcha.
To generate Char Captcha, we need to use @Html.Captcha(Charslength). The Charslength minimum value should be 1.

In the above result, you can see the M char, if you want to make the 4char captcha, just specify the captcha length as 4 - @Html.Captcha(4)

Now, validate the Captcha. To validate this, we need to use keyword "IsCaptchaValid" and for this keyword, we need to use using CaptchaMvc.HtmlHelpers; namespace.
  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. using System.Web.Mvc;
  6. using CaptchaMVC5.Models;
  7. using CaptchaMvc.HtmlHelpers;
  8. namespace CaptchaMVC5.Controllers {
  9. public class CaptchaController: Controller {
  10. // GET: Captcha
  11. public ActionResult Index() {
  12. return View();
  13. }
  14. [HttpPost]
  15. public ActionResult Index(Registration Registration) {
  16. // Code for validating the Captcha
  17. if (this.IsCaptchaValid("Validate your captcha")) {
  18. ViewBag.ErrMessage = "Validation Messgae";
  19. }
  20. return View();
  21. }
  22. }
  23. }
Summary

Here, we have seen how to use Captcha in ASP.NET MVC application and how to use math and char captcha in ASP.NET MVC.
Note
  1. Add reference from NuGet "CaptchaMVC"
  2. Add namespace in View "@using CaptchaMvc.HtmlHelpers"
  3. To generate MathCaptcha, use "@Html.MathCaptcha()"
  4. To generate CharCaptcha, use "@Html.Captcha(CharLength)"
  5. To validate captcha, use predefined keyword called "IsCaptchaValid"
  6. To access this keyword, use "using CaptchaMvc.HtmlHelpers"
In the next article, we will see how to use images and audio in captcha.