Sử dụng google reCAPTCHA trong Asp.Net

Đã lâu lắm rồi mới có thời gian ngồi viết lại blog, hôm nay mình chia sẻ cách sử dụng Google reCAPTCHA trong các project Asp.Net. Google reCAPTCHA là 1 dạng captcha mới và tiện dụng để chống spam, chống bot tự động đăng ký điền form và thực hiện trên form. Phiên bản mới của google recaptcha rất thân thiện với người dùng và độ bảo mật cao.

reCAPTCHA is a free service that protects your site from spam and abuse. It uses advanced risk analysis techniques to tell humans and bots apart. With the new API, a significant number of your valid human users will pass the reCAPTCHA challenge without having to solve a CAPTCHA. reCAPTCHA comes in the form of a widget that you can easily add to your blog, forum, registration form, etc.

 

Các bạn có thể xem thêm video giới thiệu về Google reCAPTCHA dưới đây:

1. Đăng ký reCHAPCHA.

- Để đăng ký các bạn vào link: https://www.google.com/recaptcha/intro/index.html

- Google reCAPTCHA cho phép người sử dụng khai báo những domain được phép sử dụng khi tích hợp, để chạy localhost các bạn có thể nhập ở phần Domains là localhost hoặc 127.0.0.1

- Sau các bước nhập thông tin theo yêu cầu, các bạn sẽ có được Site Key & Secrect Key

 

2. Tích hợp Google reCAPTCHA vào Asp.Net Webform.

- Đối với Asp.Net webform, trước tiên các bạn cần Download GoogleReCaptcha.dll tại đây.

- Tạo mới 1 website project và AddReference DLL mới download ở trên.

-Ở file GoogleCapcha.aspx ta có code như sau.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleCapcha.aspx.cs" Inherits="GoogleCapcha" %>

<%@ Register Assembly="GoogleReCaptcha" Namespace="GoogleReCaptcha" TagPrefix="cc1" %>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <cc1:GoogleReCaptcha ID="ctrlGoogleReCaptcha" runat="server" />
        </div>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
        <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
    </form>
</body>
</html>

- Ở file GoogleCapcha.aspx.cs

using System;

public partial class GoogleCapcha : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            ctrlGoogleReCaptcha.PublicKey = System.Configuration.ConfigurationManager.AppSettings["GoogleRecaptchaSiteKey"];
            ctrlGoogleReCaptcha.PrivateKey = System.Configuration.ConfigurationManager.AppSettings["GoogleRecaptchaSecretKey"];
        }
    }

    protected void Button1_Click(object sender, EventArgs e)
    {
        if (ctrlGoogleReCaptcha.Validate())
        {
            //submit form success
            Label1.Text = "Success";
        }
        else
        {
            //captcha challenge failed
            Label1.Text = "Captcha Failed!! Please try again!!";
        }
    }
}

- Trong file Web.Config các bạn cần update SiteKey & Secrect Key của bạn.

<add key="GoogleRecaptchaSiteKey" value="6Lc2iBIUAAAAACM0Z56ig_zd9VOLId9GEz1_Udqe"/>
<add key="GoogleRecaptchaSecretKey" value="6Lc2iBIUAAAAABVjhpinNC8ErTxc_QsbEp_WpW9a"/>

- Các bạn có thể download ví dụ đầy đủ tại link dưới đây:

Source code for Asp.net Webform

 

3. Tích hợp Google reCAPTCHA vào Asp.Net MVC

- Chúng ta tạo mới 1 project.

- Sau đó chúng ta cần install Json.Net package (Xem chi tiết tại đây)

- Tiếp theo ta cần tạo controller "HomeController": Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

using System.Net;
using System.Web.Mvc;
using Newtonsoft.Json.Linq;

namespace GoogleCaptChaMVC.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        public ActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FormSubmit()
        {

            //Validate Google recaptcha here
            var response = Request["g-recaptcha-response"];
            string secretKey = "6Lc2iBIUAAAAABVjhpinNC8ErTxc_QsbEp_WpW9a";
            var client = new WebClient();
            string urlReQuest = string.Format("https://www.google.com/recaptcha/api/siteverify?secret={0}&response={1}", secretKey, response);
            var result = client.DownloadString(urlReQuest);
            var obj = JObject.Parse(result);
            var status = (bool)obj.SelectToken("success");
            ViewBag.Message = status ? "Google reCaptcha validation success" : "Google reCaptcha validation failed";

            //When you will post form for save data, you should check both the model validation and google recaptcha validation
            //EX.
            /* if (ModelState.IsValid && status)
             {
 
             }*/

            //Here I am returning to Index page for demo perpose, you can use your view here
            return View("Index");
        }
    }
}

- Tiếp theo tạo View Index

@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div>
    @using (Html.BeginForm("FormSubmit", "Home", FormMethod.Post))
    {
        <div class="g-recaptcha" data-sitekey="6Lc2iBIUAAAAACM0Z56ig_zd9VOLId9GEz1_Udqe"></div>
        <input type="submit" value="Submit" />
    }
</div>
<span style="display:inline-block; font-size:20px;margin:20px 0;padding:20px;border:1px solid #D3D3D3">
    @ViewBag.Message
</span>
<script src='https://www.google.com/recaptcha/api.js' type="text/javascript"></script> 

- Các bạn nhớ update SiteKey & SecretKey của các bạn vào trước khi chạy ứng dung.

- Download ví dụ đầy đủ cho MVC ở link dưới đây

Source code for Asp.net MVC

Related Post


Drag & Drop upload multiple file với Asp.net C# & Dropzone.js
Saturday, July 9, 2016
Upload multiple file là một chức năng được dùng khá nhiều trong các project về website, trước đây mình cũng đã chia sẻ một ví dụ về upload multiple file với jquery & asp.net c#, nhưng cách đây ít hôm mình có tìm được thằng Dropzone.js hỗ trợ upload file có vẻ hay hơn nhiều, khi kết hợp với Asp.net C# và áp dụng vào project mình đang làm thực sự thấy nó đem lại hiệu quả rất ưng ý.
Tổng hợp video học Asp.Net MVC
Friday, November 6, 2015
Trước đây mình cũng có tìm được một số video về MVC4 bằng Tiếng Việt, hôm nay mình xin giới thiệu thêm một số video bằng tiếng Anh, trong đó có một số phần đi sâu khá hay đáng tham khảo
Search

Category

Blog Archive

Đăng ký nhận bài mới

Facebook Page