Hướng dẫn tích hợp Captcha đơn giản vào Asp.Net MVC

Captcha là gì? và tác dụng của captcha thì chắc mình không phải trình bày rồi. Hôm nay, mình sẽ hướng dẫn các bạn tạo captcha và tích hợp captcha vào website Asp.Net MVC.

Về logic cơ bản sẽ là, khi user truy cập vào trang login, server sẽ tạo ra một session gán cho user đó. Trong session có chưa chuỗi ký tự ngẫu nhiên, chính là captcha của chúng ta. Sau đó, ta có 1 action đọc nội dung của session đó và generate ra image tương ứng. Khi user nhập captcha vào, ta chỉ cần so sánh chuỗi ký tự user nhập vào với cái session kia là được. Khi user nhập sai, ta sẽ gán một chuỗi ký tự mới cho session, lúc này action generate captcha cũng sẽ tạo ra 1 image khác.

Các bạn tạo mới một project Asp.Net MVC, sử dụng luôn controller home mặc định khi tạo project nhé. Trong thư mục Models, các bạn tạo 1 model mới với tên LoginViewModel.cs

Khi đã có đối tượng LoginViewModel, kế đến các bạn chỉnh sửa lại view. Sử dụng luôn thằng view Index.cshtml mặc định trong thư mục Views/Home.

 

Ở đây, nếu để ý các bạn sẽ thấy dòng code <img src=”/Home/GetCaptchaImage” title=”Captcha” />, vâng chính dòng này sẽ là hình ảnh captcha. Các bạn cũng đã mường tượng ra là thằng /Home/GetCaptchaImage sẽ tạo ra image.

Quay lại HomeController, ta cần phải có 1 hàm sinh ra chuỗi ký tự ngẫu nhiên để sinh ra image tương ứng.

Giờ ta sẽ viết action GetCaptchaImage, thằng này sẽ sinh ra image tương ứng với chuỗi ký tự ngẫu nhiên đọc từ session ra.

Tiếp đến là action Index và validate captcha. Tại action Index Method Get, ta cần phải gán giá trị cho session.

Method POST của action Index

Screenshot của page Login:

Chúc các bạn thành công, các bạn có thể download project này tại đây Github

Đề xuất cho bạn

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

19 − 6 =