How to implement recaptcha in MVC 4 project?

Question

I have searched the Internet and a few threads showed up in stackoverlow about implementing recaptcha in mvc by following this tutorial. However, I found the step by step instruction very lacking IMHO. I've downloaded the source files. Here are my questions.

Where do I place the CaptchaValidatorAttribute.cs, AssemblyInfo.cs, and GenerateCaptcha.cs files in my MVC folders?
Once I placed those .cs files in the correct location, how do I reference them in ContactUsController and ContactUs.cshtml? The step by step instruction did not mention this.

Any help is much appreciated.

These are my folders: Properties, References, App_Data, App_Start, Content, Controllers, Filters, Images, Models, Scripts, Views. The tutorial did not show how it reference those .cs files when it's being used in the View or Controller. — 2myCharlie, Aug 05 '13 at 20:23
NuGet **Google reCAPTCHA V2** for MVC 4 and 5 - [NuGet Package](https://www.nuget.org/packages/reCAPTCH.MVC/) - [Demo And Document](http://recaptchamvc.apphb.com/) — Sender, Jun 16 '15 at 13:53

score 2 · Accepted Answer · answered Aug 06 '13 at 15:23

Okay, I got it figured out. This tutorial is very helpful since the one I mentioned in my initial post did not do a good job explaining. Below are my cording codes:

ContactController:

[CaptchaValidator]
        [HttpPost]
        public ActionResult ContactForm(ContactModels model, bool captchaValid)
        {
            if (!captchaValid)
            {
                ModelState.AddModelError("captcha", "You did not type the verification word correctly. Please try again.");
            }
            else if(ModelState.IsValid)
            {
                MailMessage netMessage = new MailMessage();
                SmtpClient mailClient = new SmtpClient();
                try
                {
                    netMessage.From = new MailAddress("contact@myComp.com");
                    netMessage.To.Add(new MailAddress(model.email));

                    netMessage.IsBodyHtml = true;
                    netMessage.Priority = MailPriority.High;
                    netMessage.Subject = "Subject: " + model.subject;
                    netMessage.Body = getMailBody(model.fstName, model.lstName, model.subject, model.phone, model.email, model.address, model.apartment, model.city, model.state, model.zipcode, model.country, model.comments);
                    mailClient.Send(netMessage);
                }
                catch (Exception error)
                {
                    Response.Write("Error sending email: " + error.Message + "<br /> StackTrace: " + error.StackTrace);
                }
                finally
                {
                    netMessage.Dispose();
                    netMessage = null;
                    mailClient = null;
                }

                return RedirectToAction("Index", "Home");
            }
            return View();
        }

And here's my View:

@using MvcReCaptcha.Helpers;

@{
    ViewBag.Title = "Contact";
    Layout = "~/Views/Shared/_FullPage.cshtml";
}

<h2>Contact Us</h2>
@using (Html.BeginForm())
{
    @Html.LabelFor(model => model.fstName)
    @Html.TextBoxFor(model => model.fstName)
    @Html.ValidationMessageFor(model => model.fstName)

    @Html.LabelFor(model => model.lstName)
    @Html.TextBoxFor(model => model.lstName)
    @Html.ValidationMessageFor(model => model.lstName)

    @Html.LabelFor(model => model.phone)
    @Html.TextBoxFor(model => model.phone)
    @Html.LabelFor(model => model.email)
    @Html.TextBoxFor(model => model.email)
    @Html.LabelFor(model => model.address)
    @Html.TextBoxFor(model => model.address)
    @Html.LabelFor(model => model.apartment)
    @Html.TextBoxFor(model => model.apartment)
    @Html.LabelFor(model => model.city)
    @Html.TextBoxFor(model => model.city)
    @Html.LabelFor(model => model.state)
    @Html.TextBoxFor(model => model.state)
    @Html.LabelFor(model => model.zipcode)
    @Html.TextBoxFor(model => model.zipcode)
    @Html.LabelFor(model => model.country)
    @Html.TextBoxFor(model => model.country)
    @Html.LabelFor(model => model.subject)
    @Html.TextBoxFor(model => model.subject)
    @Html.LabelFor(model => model.comments)
    @Html.TextAreaFor(model => model.comments)
    @Html.Raw(Html.GenerateCaptcha())
    @Html.ValidationMessage("captcha")
    <br />
    <button type="submit">Submit</button>
}

Noticed the parameter in the @html.ValidationMessage matches the one in the ModelStae.AddModelError. I hope this may help someone who may have the same problem as I did.

score 0 · Answer 2 · answered Aug 05 '13 at 20:41

0

Given the logic displayed I would create a new folder called "Helpers", as it would appear these folders extend the HtmlHelper, then place the files in there.

Add the following to your web.config:

<appSettings>
<add key="ReCaptchaPrivateKey" value=" -- PRIVATE_KEY -- " />
<add key="ReCaptchaPublicKey" value=" -- PUBLIC KEY -- " />
</appSettings>

<namespaces>
    <add namespace="MvcReCaptcha.Helpers"/>
</namespaces>

On the view you wish to generate the ReCaptcha place the following:

@Using MvcReCaptcha.Helpers
@Html.GenerateCaptcha()

Then in the same controller as the view you just added the previous lines to add the following handler:

[CaptchaValidator]
[AcceptVerbs( HttpVerbs.Post )]
public ActionResult CreateComment( Int32 id, bool captchaValid )
{
if (!captchaValid)
{
    ModelState.AddModelError("_FORM", "You did not type the verification word correctly. Please try again.");
}
else
{
    // If we got this far, something failed, redisplay form
    return View();
}
}

Don't forget you need to sign up first to get your public and private key. http://www.google.com/recaptcha/whyrecaptcha

answered Aug 05 '13 at 20:41

Ashley Medway

7,151
7
49
71

Many thanks for the help. I am almost there except I still receive errors on the [CaptchaValidator] handler in my ContactUsController. I do have: using Recaptcha; using MvcReCaptcha; However, I still receive this error: Error 1 The type or namespace name 'CaptchaValidatorAttribute' could not be found (are you missing a using directive or an assembly reference?) – 2myCharlie Aug 06 '13 at 02:28
Okay, I got that error sorted it out. Apparently, I forgot to add the CaptchaValidatorAttribute.cs file into the Helpers folder. Anyway, my next question is, based on the tutorial, the CreateComment(Int32 id, bool captchaValid) is the same thing as my ContactUs(ContactModels model) function, correct? I just need to add Int32 id, bool captchaValid parameters to the functions, correct? – 2myCharlie Aug 06 '13 at 02:35
Okay, instead of a captcha image, I got the following in the ContactForm.cshtml view: – 2myCharlie Aug 06 '13 at 02:49
– 2myCharlie Aug 06 '13 at 02:51
I'm getting the same problem as the Johnathon Wood in this thread. http://stackoverflow.com/questions/17882961/using-recaptcha-with-asp-net-mvc – 2myCharlie Aug 06 '13 at 14:35
Okay, I just found this tutorial: http://www.tkglaser.net/2011/10/google-recaptcha-in-aspnet-mvc-3-using.html This tutorial fix the Javascript markup above. However, now I received this error: – 2myCharlie Aug 06 '13 at 14:51
The parameters dictionary contains a null entry for parameter 'id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult ContactForm(lorPortfolio.Models.ContactModels, Int32, Boolean)' in 'lorPortfolio.Controllers.ContactController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter. Parameter name: parameters Description: An unhandled exception occurred during the execution of the current web request. – 2myCharlie Aug 06 '13 at 14:52

How to implement recaptcha in MVC 4 project?

2 Answers2