I started building ContosoKarate (WebMatrix) by creating a site using the default WebMatrix Default Site Template.

The default template includes a collection of account related pages.

After modifying the _SiteLayout.cshtml the Register.cshtml looked pretty good.

So there are two things I need to do.

  1. Enable Captcha
  2. Make the formatting pretty.

First, I modified the Login Box markup to include a link to the Register.cshtml page.

<ul>
   <li><a href='#'>Forgot your password?</a></li>
   <li><a href='#'>Forgot your username?</a></li>
   <li><a href='@Href('~/Account/Register.cshtml')' /'>
          Create an account</a></li>
 </ul>

So I did a bit of clean up in the formatting and lined up form fields using a table. I know, I know – but for something this simple a table is perfect and easy.

Next, next enable Re-Captcha. To do this we’ll need to use the WebMatrix Package Manager (which is a front end to NuGet) to download and install some of the basic WebMatrix Razor Helpers.

Before we install he Re-Captcha Helper itself, we’ll need a Re-Captcha Key.

You can get one by going here https://www.google.com/recaptcha/admin/create and following the steps as in the screen shots below.

Save the ReCaptcha keys and start your WebMatrix application then add _Admin to the url in the browser.

ie: http://localhost:9999/_Admin

Provide a password and submit…..

Now, as the above message advises, we need to go rename the password file.

Rename _Password.config to Password.config

Now you can login to WebMatrix Admin and use the package manager.

Set Show to “OnLine” Source to “Default” ad search for “Helpers”.

Select and install the Web Helpers 1.1 Library

The tool will tell you when it’s completed the install successfully.

If you refresh your file tree you will see that a bin folder has been create and a Microsoft.Web.Helpers.dll file is now present.

Now go in to the Register.cshtml page and uncomment these three bits of code.

var captchaMessage = '';
.....................................................................
    <br />
     // Validate the user's captcha answer
    if (!ReCaptcha.Validate('PRIVATE_KEY')) {
         captchaMessage = 'Captcha response was not correct';
         isValid = false;
     }
.....................................................................
 
<br /><br />
@ReCaptcha.GetHtml('PUBLIC_KEY', theme: 'white')
        
@if (!captchaMessage.IsEmpty()) {
    <br />
    <label class='validation-error'>@captchaMessage</label>
    }
<br /><br />    

Then paste in the ReCaptcha codes that you created earlier in the spaces indicated.

if we run our application and navigate to the Register.cshtml page.

Then when the ReCaptcha is not satisfied the user sees this:

Now out application can accepts memberships and we’re ready to add member specific features.