Chèn Captcha vào một ứng dụng ASP.NET MVC

Khi các bạn duyệt web, vào những trang đòi hỏi phải xác minh trước khi thực hiện thao tác nào đó thì bạn thường sẽ thấy một khung nhập dãy kí tự, hoặc con số bất kì nào đó bằng hình ảnh, mà tên gọi của nó thì các bạn cũng quen thuộc đó là captcha, chẳng hạn như thế này

recaptcha_mvc_demo_22

Trong bài viết này, mình sẽ hướng dẫn các bạn đưa captcha này vào ứng dụng web của mình để phục vụ cho việc xác thực chẳng hạn. Sau đây là cách thực hiện.

Ở đây, mình tạo một ứng dụng ASP.NET MVC 4 (beta) trên Visual Studio 2011 Beta. Các bạn hoàn toàn có thể tạo ứng dụng ASP.NET MVC 2 hoặc 3 trên Visual Studio 2010 để thực hiện phần này.

recaptcha_mvc_demo_1

Mình chọn View Engine là Razor với HTML5 template.

recaptcha_mvc_demo_2

Cấu trúc một ứng dụng ASP.NET MVC cơ bản với các thành phần mặc định được Visual Studio tạo ra.

recaptcha_mvc_demo_3

Bước quan trọng tiếp theo, bạn click phải vào project vừa tạo, chọn Manage NuGet Packages… Nếu bạn không tìm thấy tính năng này thì có thể bạn chưa cài đặt tính năng mở rộng dành cho Visual Studio đó là NuGet Package Manager. Bạn có thể vào đường link này để tải về và cài đặt: link.

recaptcha_mvc_demo_4

Bạn gõ vào ô tìm kiếm ở góc trên bên phải là “web helper” và chờ trong giây lát để trình mở rộng tìm kiếm các gói cài đặt có từ khóa như bạn vừa nhập. Bạn chọn ASP.NET Web Helpers Library và chọn nút Install để tiến hành cài đặt vào trong project hiện tại của bạn.

recaptcha_mvc_demo_5

Kết quả là trong thư mục References, bạn sẽ thấy được dll mới được thêm vào trong project.

recaptcha_mvc_demo_6

Bước tiếp theo, bạn vào trang chủ của ReCaptCha để lấy cho mình các key phục vụ cho việc xác thực sau này: link.

recaptcha_mvc_demo_7

Quay lại project của bạn trong Visual Studio, trong khung xem warning và error, bạn có thể thấy những thông báo như thế này.

recaptcha_mvc_demo_8

Để xử lý chúng, bạn mở tập tin Web.config của project lên, bỏ dòng dưới này (bỏ hẳn luôn cũng được).

recaptcha_mvc_demo_9

Sau đó, bạn thực hiện Build lại project và sẽ thấy là các warning và error trước đó không còn nữa.

Bây giờ, chúng ta sẽ đi vào phần chính của bài viết này, đó là đưa captcha và trong ứng dụng web của bạn. Trong minh họa này, mình sẽ đưa captcha vào trong phần Account Register. Bạn mở tập tin Register.cshtml trong thư mục Views –> Account trong project của bạn lên. Tại đây, mình sẽ thực hiện việc đưa phần xác thực captcha vào cuối, sau các phần điền thông tin đăng kí của người dùng. Một vấn đề các bạn sẽ gặp phải là sẽ không tìm thấy @ReCaptCha ở đâu cả.

recaptcha_mvc_demo_10

recaptcha_mvc_demo_12

Bạn mở lại tập tin Web.config và thêm vào dòng dưới này.

recaptcha_mvc_demo_11

Build lại project và trở lại tập tin Register.cshtml, bạn gõ @Microsoft.Web.Helpers. thì sẽ thấy ReCaptCha xuất hiện. Vậy là bạn đã tìm được phần hỗ trợ ReCaptcha để đưa vào ứng dụng của mình.

recaptcha_mvc_demo_13

Bạn quay lên phần đầu của tập tin Register.cshtml và gõ vào dòng dưới này, trong đó phần bôi đen chính là public key mà bạn đã đăng kí với ReCaptCha. Để sử dụng ReCaptCha mà không phải khai báo lại Microsoft.Web.Helpers nhiều lần, bên dưới dòng @model…, bạn khai báo @using Microsoft.Web.Helpers.

recaptcha_mvc_demo_14

Vậy là ta đã thực hiện xong việc hiển thị phần xác thực Captcha ra ngoài giao diện. Việc còn lại là thực hiện việc chứng thực những nội dung người dùng nhập vào có đúng không. Bạn mở tập tin AccountController.cs trong thư mục Controllers của project lên. Thêm dòng sau vào phần khai báo sử dụng refrence.

recaptcha_mvc_demo_15

Vì như mình đã trình bày lúc đầu, trong minh họa này mình thực hiện việc đưa Captcha vào trong phần xác thực thông tin người đăng kí, do đó mình sẽ thực hiện việc xác thực trong Register. Bạn gõ vào đoạn code dưới đây bên trong Register, trong đó phần bôi đen chính là private key mà bạn đăng kí với ReCaptcha. Ý ngĩa của đoạn code này là nếu thông tin người dùng nhập vào không trùng khớp với những gì Captcha đưa ra thì sẽ hiển thị Failed! ra ngoài màn hình.

recaptcha_mvc_demo_16

Build lại project và xem kết quả. Trong trang đăng kí của chúng ta bây giờ đã xuất hiện mục Captcha.

recaptcha_mvc_demo_17

Bạn nhập vào một số thông tin mẫu, vả “cố tình” gõ sai vào ô nhập thông tin captcha để kiểm tra xem chức năng ta mong muốn có thực hiện đúng không.

recaptcha_mvc_demo_18

Oh oh, một thông báo exception xuất hiện.

recaptcha_mvc_demo_19

Không sao, bạn quay trở lại Visual Studio, mở lại tập tin Web.config và thêm vào những dòng sau.

recaptcha_mvc_demo_20

Build lại project và kiểm tra lại kết quả. Hooray, kết quả như mong đợi.

recaptcha_mvc_demo_21

Ngoài thuộc tính theme để chỉnh layout cho ReCaptcha, còn có các thuộc tính khác như là language, tabIndex, các bạn tìm hiểu thêm nhé.

* Trong bài viết này, mình giới thiệu sơ qua cho bạn một phần hỗ trợ cho ứng dụng ASP.NET MVC đó là Web Helpers, được cài đặt thông qua NuGet Package Manager, trong đó ReCaptcha là một phần trong đó.

Mã nguồn cho ví dụ này, các bạn có thể tải về theo đường link này: reCaptcha_Demo.zip

One thought on “Chèn Captcha vào một ứng dụng ASP.NET MVC

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s