Captcha, reCaptcha, Invisible reCaptcha và cách tích hợp Invisible reCaptcha vào Laravel

Bài đăng này đã không được cập nhật trong 2 năm

Giới thiệu

Chào các bạn, mọi người có để ý rằng khi đăng kí tài khoản hay làm một form online, đôi khi chúng ta phải làm một việc rất mất thời gian đó là gõ lại một đoạn kí tự gồm text và số từ một bức ảnh như hình:

Nếu nó dễ nhìn và dễ đọc thì không sao, nhưng đằng này hình lại lại bị bóp méo, các chữ thì nhảy nhót hoa mắt. Rất ức chế phải không ạ? Thứ mình vừa đề cập đến được gọi là Captcha. Vậy tại sao trang web ấy lại phải làm thế, nó có giúp ích gì cho chúng ta không? Mời các bạn đọc bài viết dưới đây để cùng lí giải với mình nhé!

Captcha

Định nghĩa

CAPTCHA (Completely Automated Public Turing test to tell Computers and Humans Apart): là một loại kiểm thử được dùng trong máy tính của Google để xác định xem người dùng có phải con người hay là máy tính (robot). Captcha là một quá trình máy tính yêu cầu người dùng hoàn thành một kiểm tra đơn giản để đánh giá, bất kỳ người nào nhập vào lời giải đúng được xem là con người.

Đặc điểm

Một hệ thống tích hợp captcha sẽ có các đặc điểm sau:

Đa số con người có thể giải được
Các máy tính hiện nay không thể giải được một cách chính xác.

Mục đích

Hình thức phổ biến nhất của CAPTCHA thường gặp ngày nay được tạo nên bởi một nhóm các kỹ sư và những người đam mê công nghệ vào năm 1997 để ngăn ngừa bot thêm URL vào bộ máy tìm kiếm của họ. Có một số phần mềm tự động thực hiện các tác vụ tấn công trang web của bạn, làm giảm đi chất lượng dịch vụ của hệ thống có sẵn, bằng cách lạm dụng và làm hao tổn tài nguyên.

Vì vậy mà Captcha được dùng để bảo vệ hệ thống, chống lại những việc tấn công như là spam mail, ngăn chặn đăng bài tự động, quảng cáo.... Captcha bao gồm một hỗn hợp các chữ cái và con số méo mó, biến dạng, cùng với nền nhiều màu sắc – điều này sẽ không gây ra nhiều khó khăn hay sự khác biệt cho con người khi nhận biết các chữ cái và con số, nhưng sẽ là một trở ngại lớn nếu thực hiện đánh CAPTCHA là một chiếc máy tính (robot).

reCaptcha

Những loại Captcha này rất hiệu quả, nhưng chính bởi những con chữ méo mó hoặc quá mờ khiến con người khó nhận diện và nhận diện sai. Việc gõ đi gõ lại nhiều lần, hoặc căng mắt ra nhìn làm cho người dùng cảm thấy khó chịu và ngại làm form (đăng kí) => giảm sự thân thiện cho trang web, gây mất điểm đến người dùng. Và thời gian qua những con bot đã đủ thông minh để đọc được những kí tự ấy.

Vì vậy Google đã cho reCaptcha ra đời, được xem là một cải tiến mới cho Captcha, bạn chỉ cần một cú click chuột để xác định mình không phải là robot như dưới đây:

Và gần đây, Google đã phát triển bản Invisible reCaptcha, nó khác với bản reCaptcha thường là chúng ta không cần bấm nút xác thực mà reCaptcha sẽ âm thầm thực hiện.

Như các bạn thấy nó chỉ còn một biểu tượng bên góc phải màn hình như trên, người dùng sẽ không cần phải thực hiện bất cứ thao tác click hay nhập kí tự xác nhận nữa.

Hình thức CAPTCHA hiện đại này giúp tối đa hóa việc ngăn chặn sự truy cập tự động của máy tính và robot, đồng thời giúp giảm thiểu những công đoạn và sự khó khăn người dùng phải trải qua. Nó xác nhận "tính con người" bằng việc kiểm tra những dữ liệu họ vô tình cung cấp, bao gồm cookies và địa chỉ IP máy tính của họ. Nó thậm chí còn kiểm tra những chuyển động nhỏ nhất cũng như thói quen sử dụng bàn phím của người dùng khi truy cập Google để phân biệt con người với máy móc.

Tích hợp Invisible reCaptcha vào Laravel

Với 3 loại Captcha trên các bạn đều có thể áp dụng vào trang web của mình. Nhưng hôm nay mình sẽ hướng dẫn đưa Invisible reCaptcha vào trong trang đăng kí Laravel. Bước 1. Installation Sau khi create project bằng composer, các bạn tạo 1 simple package để tương tác với Invisible reCaptcha vào project nhanh và dễ dàng

composer require albertcht/invisible-recaptcha

Tiếp đến là thêm ServiceProvider vào mảng providers trong app/config/app.php:

AlbertCht\InvisibleReCaptcha\InvisibleReCaptchaServiceProvider::class,

Mình sử dụng luôn reCaptcha trong khi đăng kí nên cài auth cho laravel:

php artisan make:auth

Bước 2. Configuration Trước khi bạn set config trong project, bạn cần apply API keys trên https://www.google.com/recaptcha/admin trước.

Nếu các bạn muốn sử dụng localhost của mình thì chọn loại là invisible reCaptcha, chọn domains là localhost như dưới đây:

Sau đó bạn đăng kí key vừa get về vào trong .env trong project:

INVISIBLE_RECAPTCHA_SITEKEY={siteKey}
INVISIBLE_RECAPTCHA_SECRETKEY={secretKey}
INVISIBLE_RECAPTCHA_BADGEHIDE=false
INVISIBLE_RECAPTCHA_DEBUG=false

Nếu bạn set INVISIBLE_RECAPTCHA_BADGEHIDE = true thì sẽ không còn biểu tượng của reCaptcha ở phía dưới góc phải màn hình nữa Bạn có thể xem trạng thái ràng buộc của các phần tử Captcha trên trình duyệt bằng cách thiết lập INVISIBLE_RECAPTCHA_DEBUG = true. Bước 3. reCaptcha Usage Hiển thị reCaptcha trong view register.blade.php:

{!! app('captcha')->render(); !!}

Các bạn nhớ đặt nó bên trong <form></form> để khi submit lên nhận được giá trị response của reCaptcha. Truy cập vào file app/Http/Controllers/Auth/RegisterController.php thêm 1 dòng vào function validator như sau:

protected function validator(array $data)
    {
        return Validator::make($data, [
            'name' => 'required|string|max:255',
            'email' => 'required|string|email|max:255|unique:users',
            'password' => 'required|string|min:6|confirmed',
            'g-recaptcha-response' => 'required|captcha',
        ]);
    }

Vậy là mình đã hoàn thành các bước cài đặt reCaptcha vào project. Thật sự nó rất đơn giản phải không ạ. Cảm ơn các bạn đã quan tâm!