JQuery Real Person with strongly typed view model in MVC

Question

I'm trying to implement JQuery Real Person using .Net MVC with a strongly typed View Model.

I have a person View Model:

public class PersonVM
{
   public Guid Id {get; set;}
   public string FirstName {get; set;}
   public string LastName {get; set;}
   // etc...
   public string RealPersonCode {get; set;}    

}

According to the documentation: http://keith-wood.name/realPerson.html

I'm supposed to 'compare the hash value computed from the text entered by the user with the hash value generated on the client'

Now I can access the value of text entered and hash it on the server using the documentation, that isn't a problem.

But I'm not using Request.Form[] as in the example, I'm passing a View Model to my controller, so my code looks a little like this:

[HttpPost]
public ActionResult PersonDetails(PersonVM viewModel)
{
    if(rpHash(viewModel.RealPersonCode) == viewModel.RealPersonCode.GetHashCode())
    {
       //accepted -- doesn't seem to work
    }
}

I'm just not sure where client side hash comes from.

Am I supposed to add another field to my View Model called realPersonHash, then manually hash it on the client?

looking at the documentation:

if (rpHash(Request.Form["realPerson"] + salt) == Request.Form["realPersonHash"]) { 
    // Accepted

it isn't clear where the Request.Form["realPersonHash"] is getting set, or how to set it.

Any help with this would be much appreciated.

Answer 1

Found the answer was actually quite straight forward. I needed to add a field to my View Model called RealPersonHash,

public class PersonVM
{
   public Guid Id {get; set;}
   public string FirstName {get; set;}
   public string LastName {get; set;}
   // etc...
   public string RealPersonCode {get; set;}
   public string RealPersonaHash {get; set;}    

}

then identify it in the initializer:

<script>
    $('#RealPersonCode').realperson({ hashName: 'RealPersonHash'});
</script>

in my view I needed a hidden field:

@Html.HiddenFor(model => model.RealPersonHash);

Once I have this in place I can compare the two on the server.

    public ActionResult PersonDetails(PersonVM viewModel)
    {

        if (rpHash(viewModel.RealPersonCode) == viewModel.RealPersonHash)
        {
             // we have a real person!
        }

This now works... Hope it helps somebody else.

Answer 2

The solution given by user964769 didn't work for me. The hidden field was not being initialised at all.

I found an alternative solution here - https://stackoverflow.com/a/35860708/5801881

In particular, calling $('selector').realperson('getHash') did the trick.

So then the entire thing should be something like below.

HTML:

<input id="captcha_input" />

Javascript/jQuery:

//Basic initialisation

$(function(){

    $('#captcha_input').realperson({ length: 6 });

})


//Send to server via desired method, eg...

function SubmitCaptcha(){

    var formData = new FormData();
    formData.append("realPerson", $('#captcha_input').val());
    formData.append("rpHash", $('#captcha_input').realperson('getHash'));

//Then AJAX it...
}

Then server side is as simple as the realperson documentation says:

if(rpHash(model.realPerson) == model.rpHash)
{
    //happy days, captcha corret
}