Menggukanan Google reCapcha di Asp.NET MVC

Lagi Belajar ASP.Net mvc nih, dan lagi disuruh buat project-project sederhana buat implementasikan apa yang di pelajarkan. dan kebetulan sedang buat Contact View yang di harus menggunakan Capcha sebagai pencegah BOT yang menginput secara otomatis bs menggunakan selenium Tools atau sebagainya.

Berikut cara mengimplementasikan penggunaan Capcha yang disini saya menggunakan Google reCapcha sebagai Engine :) :

• Download .Net DLL reCapcha yang akan di gunakan dalam project ASP MVC. Download Disini.
• Ekstrak zip, Copy Recapcha.dll dan Recapcha.res ke dalam folder BIN project anda
• Add Reference Recapcha.dll kedalam project ASP.NET MVC anda
• Tambahkan Beberapa Application Configuration di Web.Config untuk Private key dan Public Key Google API yang nanti akan di gunakan oleh DLL reCapcha dan juga configurasi untuk meregister ReCapcha Component. Untuk mendapatkan Public key dan Private Key bisa di dapatkan disini, Harus Login dengan menggunakan Google Account(GMail) dan registerkan domain "localhost" jika anda mendevelop dalam localserver.

Tambahkan Configurasi dibawah ini dalam Tag dalam web config. Lihat dan cocokan, copy saja yang belum ada dalam tag

<appSettings>
 <add key="webpages:Version" value="1.0.0.0"/>
    <add key="ClientValidationEnabled" value="true"/>
    <add key="UnobtrusiveJavaScriptEnabled" value="true"/>
    <add key="ReCaptchaPrivateKey" value="put your private key value here" />
    <add key="ReCaptchaPublicKey" value="put your public key value here" />
<appSettings>

Tambahkan Configurasi dibawah ini dalam Tag dalam web config. Lihat dan cocokan, copy saja yang belum ada dalam tag

<namespaces>
  <add namespace="System.Web.Mvc" />
  <add namespace="System.Web.Mvc.Ajax" />
  <add namespace="System.Web.Mvc.Html" />
  <add namespace="System.Web.Routing" />
  <add namespace="Recaptcha"/>
</namespaces>

• Tambahkan Code Using.Recapcha dalam Controller View yang akan menggunakan Capcha atau Controller Capcha.
• Import Recapcha dalam view page

<@ Import Namespace="Recaptcha" >

• Tambahkan Code Dibawah ini untuk menapilkan Capcha dalam view

<div class="editor-label">
   Enter Capcha Caracter:
</div>
<div class="editor-field">
    <Html.Raw(Html.GenerateCaptcha("captcha", "clean"))>
    <Html.ValidationMessage("captcha")>
</div>

Tips: Jika anda menggunakan ASP.NET MVC versi 2 Kebawah, untuk menggantikan Htm.Raw anda bisa hanya menggunakan HTML tag <div> </div>. Sehingga menjadi seperti ini:

<div class="editor-label">
   Enter Capcha Caracter:
</div>
<div class="editor-field">
    <div><%= Html.GenerateCaptcha("captcha", "clean")></div>
    <% Html.ValidationMessage("captcha")>
</div>

• Dan tambahkan Code Controller di Controller anda seperti ini

[HttpPost]
[RecaptchaControlMvc.CaptchaValidator]
public ActionResult ForgotPassword(CheckUsernameViewModel model, bool captchaValid, string captchaErrorMessage) {
    if (!Membership.EnablePasswordReset)
        throw new Exception("Password reset is not allowed\r\n");
    if(ModelState.IsValid) {
        if(captchaValid) {
            return RedirectToAction("AnswerSecurityQuestion", new { username = model.Username });
        }
        ModelState.AddModelError("", captchaErrorMessage);
    }
    return View(model);
}

*Note : Untuk Nama function di controller(Berwarna Merah) silahkan anda sesuaikan dengan nama view yang anda buat dan untuk nama Model(Berwarna Biru) Silahkan anda sesuaikan dengan Model yang anda gunakan.

Beginilah hasil form dari view yang saya buat:

Selamat mencoba.

Salam,
Muhamad Albaijuri
.Net Application Developer