Nhúng Recaptcha 2 vào Asp.net MVC

Cập nhật ngày: 27/10/2021 - Đã có 2166 lượt xem bài viết này!
Nhúng Recaptcha 2 vào Asp.net MVC
Thật ra trên mạng có rất nhiều những bài viết hướng dẫn nhúng recaptcha 2 vào asp.net MVC rồi nhưng mình thấy nó chưa thật sự đầy đủ. Trong quá trình làm theo các hướng dẫn đó vẫn phải vọc vạch thêm nhiều thứ thì mới ra được sản phẩm ưng ý. Chính vì vậy mình quyết định cover lại một số tut đã có trên mạng theo cách đầy đủ nhất có thể

Nhúng Recaptcha 2 vào Asp.net MVC

Thật ra trên mạng có rất nhiều những bài viết hướng dẫn nhúng recaptcha 2 vào asp.net MVC rồi nhưng mình thấy nó chưa thật sự đầy đủ. Trong quá trình làm theo các hướng dẫn đó vẫn phải vọc vạch thêm nhiều thứ thì mới ra được sản phẩm ưng ý. Chính vì vậy mình quyết định cover lại một số tut đã có trên mạng theo cách đầy đủ nhất có thể 

Minh họa cho recaptcha

1. Đăng ký mã Recaptcha

Muốn nhúng được Recaptcha vào website thì chúng ta phải đăng ký với google và sẽ được cung cấp 2 loại mã khác nhau

– Loại 1 : site key,  có thể hiểu như là khóa công khai. Bạn cho mọi người biết cũng được, nó chính là mã được dùng để generate ra reCaptcha control

– Loại 2 : Secret key, hiểu như khóa bí mật. Được dùng ở phía server để xác thực mã

Có một điểm quan trọng cần chú ý là 2 mã này phụ thuộc vào tên miền, điều này có nghĩa mã đăng ký ở tên miền A sẽ không hoạt động được ở tên miền B và ngược lại. Nếu test ở local host thì có thể chạy với mọi loại mã (Tức là mã của tên miền nào cũng được)

Bây giờ hãy truy cập đường link https://www.google.com/recaptcha/admin và đăng ký một cặp mã recaptcha

Đăng ký một cặp mã bằng cách điền tên miền vào

Kết quả được như sau

Nhúng recaptcha 2 vào asp net MVC

Bạn hãy nhúng các đoạn mã được tạo ra giống như hướng dẫn trên ảnh. Bây giờ quay ra refresh trang thì sẽ có một control Recaptcha hiện ra. Đến đây bạn mới chỉ xong một phần nhỏ nhỏ thôi nhé, chúng ta còn 3 bước nữa.

2. Kiểm tra phía server

Đầu tiên chúng ta cần phải tạo một Model để lưu kết quả trả về như sau

using System.Runtime.Serialization;
 
namespace Recaptcha.Models
{
[DataContract]
public class RecaptchaResult
{
//attribute có tên trùng với field của json trả về
[DataMember(Name = "success")]
public bool Success { get; set; }
 
//attribute có tên trùng với field của json trả về
[DataMember(Name = "error-codes")]
public string[] ErrorCodes { get; set; }
}
}

 

Bạn phải chú ý phần attribute nhé, nếu sai thì chương trình sẽ không chạy đúng như mong muốn. Bây giờ chúng ta cần 1 hàm để kiểm tra tinh hợp lệ của mã recaptcha
 

private bool IsValidRecaptcha(string recaptcha)
{
    if (string.IsNullOrEmpty(recaptcha))
    {
        return false;
    }
    var secretKey = "6LeF-QMTAAAAAOw8M2RTtxoY6ifOhhUb4GlXpdB3";//Mã bí mật
    string remoteIp = Request.ServerVariables["REMOTE_ADDR"];
    string myParameters = String.Format("secret={0}&response={1}&remoteip={2}", secretKey, recaptcha, remoteIp);
    RecaptchaResult captchaResult;
    using (var wc = new WebClient())
    {
        wc.Headers[HttpRequestHeader.ContentType] = "application/x-www-form-urlencoded";
        var json = wc.UploadString("https://www.google.com/recaptcha/api/siteverify", myParameters);
        var js = new DataContractJsonSerializer(typeof(RecaptchaResult));
        var ms = new MemoryStream(Encoding.ASCII.GetBytes(json));
        captchaResult = js.ReadObject(ms) as RecaptchaResult;
        if (captchaResult != null && captchaResult.Success)
        {
            return true;
        }
        else
        {
            return false;
        }
    }
}

 

Cuối cùng trong controller chúng ta chỉ việc gọi như sau để xác thực

[HttpPost]
public ActionResult Index(FormCollection form)
{
    if (IsValidRecaptcha(Request["g-recaptcha-response"]))
    {
        ViewBag.Status = "Mã Recaptcha hợp lệ";
    }else
    {
        ViewBag.Status = "Không hợp lệ";
    }  
    return View();
}

3. Thay đổi ngôn ngữ

Mặc định Recaptcha sẽ có ngôn ngữ là tiếng anh. Chúng ta sẽ đổi nó sang tiếng việt cho dễ sử dụng, còn cách làm thì chỉ đơn giản là thêm ?hl=xx vào sau đoạn script nhúng api.js . Trong đó xx là ký hiệu của ngôn ngữ

//Tiếng việt

 
//Tiếng Đan Mạch

4. Điều chỉnh độ dài

Trải qua 3 bước trên, có thể kết quả khiến ta ưng ý rồi, tuy nhiên không thiếu những trường hợp nhìn xô lệch như thế này

Ô nhập captcha bị vượt ra ngoài khung

Nếu gặp tình trạng như vậy thì hãy thêm một vài giá trị css vào như sau
 


Ở đây mức độ scale là do bạn tùy chỉnh sao cho phù hợp với website hiện tại. Sau khi điều chỉnh xong thì kết quả có vẻ ổn hơn rất nhiều
 

Recaptcha control đã được thu gọn lại

BTV.Trần Thị Thu Huyền
Phòng Truyền Thông IMicroSoft Việt Nam
Hotline: 0916 878 224
Email: huyenttt@imicrosoft.edu.vn

Xem khóa đào tạo nhân sự theo danh mục!

Xem các khóa đào tạo nhân sự