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

Cập nhật ngày: 28/03/2024 - Đã 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

 

Bạn đang muốn tìm kiếm 1 công việc với mức thu nhập cao.
✅ Hoặc là bạn đang muốn chuyển đổi công việc mà chưa biết theo học ngành nghề gì cho tốt.
✅ Giới thiệu với bạn Chương trình đào tạo nhân sự dài hạn trong 12 tháng với những điều đặc biệt mà chỉ có tại IMIC và đây cũng chính là sự lựa chọn phù hợp nhất dành cho bạn:
👉 Thứ nhất: Học viên được đào tạo bài bản kỹ năng, kiến thức chuyên môn lý thuyết, thực hành, thực chiến nhiều dự án và chia sẻ những kinh nghiệm thực tế từ Chuyên gia có nhiều năm kinh nghiệm dự án cũng như tâm huyết truyền nghề.
👉 Thứ hai: Được ký hợp đồng cam kết chất lượng đào tạo cũng như mức lương sau tốt nghiệp và đi làm tại các đối tác tuyển dụng của IMIC. Trả lại học phí nếu không đúng những gì đã ký kết.
👉 Thứ ba: Cam kết hỗ trợ giới thiệu công việc sang đối tác tuyển dụng trong vòng 10 năm liên tục.
👉 Thứ tư: Được hỗ trợ tài chính với mức lãi suất 0 đồng qua ngân hàng VIB Bank.
👉  Có 4 Chương trình đào tạo nhân sự dài hạn dành cho bạn lựa chọn theo học. Gồm có:
1)  Data Scientist full-stack
2)  Embedded System & IoT development full-stack
3)  Game development full-stack
4)  Web development full-stack 
✅ Cảm ơn bạn đã dành thời gian lắng nghe những chia sẻ của mình. Và tuyệt vời hơn nữa nếu IMIC được góp phần vào sự thành công của bạn. 
✅ Hãy liên hệ ngay với Phòng tư vấn tuyển sinh để được hỗ trợ về thủ tục nhập học.
✅ Chúc bạn luôn có nhiều sức khỏe và thành công!

 

 

Tham khảo các khóa đào tạo nhân sự qua danh mục