Mang đến cho bạn hành trang là Kiến thức và Kinh nghiệm

Lựa chọn chủ đề bạn quan tâm

Cùng nhau thảo luận về các vấn đề

Hãy theo dõi chúng tôi nếu bạn thấy bổ ích

  1. Hỏi đáp IT
  2. Hỏi nhanh

Sử dụng Google reCAPTCHA để chống spam

197 Lượt xem 0 Bình luận 0 Lượt báo xấu
Với các website cho phép người dùng gửi dữ liệu lên và lưu vào Database thì việc sử dụng Captcha là cần thiết. Hãy tưởng tượng nếu không có Captcha, người dùng có thể gửi dữ liệu liên tục lên Server (spam) làm Database bị phình lên nhanh chóng.

Các Captcha kiểu cũ đơn giản thì hoàn toàn có thể vượt qua 1 cách dễ dàng bằng cách sử dụng các dịch vụ trung gian. Tuy nhiên với Captcha kiểu mới của Google (reCAPTCHA) thì độ bảo mật rất cao, dễ dàng tích hợp vào website và đem lại trải nghiệm tốt hơn (captcha hiển thị theo các hình thức khác nhau từ đơn giản với 1 cú click chuột cho đến phức tạp như chọn ảnh theo chủ đề, ...)

Để sử dụng dịch vụ reCAPTCHA, chúng ta sẽ cần một tài khoản Google và đăng ký tại link sau: https://www.google.com/recaptcha/admin

Sau khi đăng ký xong chúng ta sẽ có mã nhúng kèm key xác thực:

Thông tin đăng ký kèm hướng dẫn tích hợp

Tích hợp vào giao diện dưới dạng Widget

Sau khi đăng ký xong chúng ta sẽ nhúng Widget Captcha vào giao diện theo hướng dẫn phần client-side integration.

Thêm thư viện vào phần header của trang web: 

<script src='https://www.google.com/recaptcha/api.js'></script>

Và nhúng mã Widget vào nơi mà bạn muốn đặt Captcha: 

<div class="g-recaptcha" data-sitekey="6LdlzxcUAAAAAB-TqZZ1mJJ-L0U6hBH614kDzX03"></div>
Captcha hiển thị trên giao diện

Xác thực phía Server

Sau khi hiển thị được Captcha trên giao diện, chúng ta sẽ kiểm tra lại xem người dùng đã vượt qua được Captcha hay chưa ở trên Server (vì code ngoài Frontend hoàn toàn có thể chỉnh sửa được).

Google reCAPTCHA cung cấp cho chúng ta 1 API để kiểm tra bằng cách gửi request với phương thức POST lên địa chỉ https://www.google.com/recaptcha/api/siteverify.

Dữ liệu bao gồm 3 trường như trong phần đăng ký ở trên là:

  • secret: Mã bí mật lấy ở trang đăng ký.
  • response: Mã trả về khi người dùng hoàn thành Captcha. Có thể lấy bằng hàm grecaptcha.getResponse() phía Client và gửi lên server khi submit form (grecaptcha là 1 biến Javascript global khởi tạo khi nhúng thư viện recaptcha).
  • remoteip: IP của client (không bắt buộc).

Sau khi gửi request chúng ta sẽ nhận được kết quả trả về là 1 String dạng JSON object như sau: 

{
  "success": true|false,
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

 

Demo code xử lý phía Server bằng Nodejs dùng cho form đăng ký

let request = require('request');    // Sử dụng thư viện request để gửi request lên Google API
let data = req.body;  // Dữ liệu từ form submit lên bao gồm thông tin đăng ký và captcha response
let captchaResponse = data.captchaResponse;

if (captchaResponse) {
    request({
        url: 'https://www.google.com/recaptcha/api/siteverify',
        method: 'POST',
        form: {
            secret: '6LdlzxcUAAAAAPF5nZYAtT12hlXAhjXXXXXXXXXX',
            response: captchaResponse
        }
    }, function (error, response, body) {
        // Parse String thành JSON object
        try {
            body = JSON.parse(body);
        } catch (err) {
            body = {};
        }

        if (!error && response.statusCode == 200 && body.success) {
            // Captcha hợp lệ, xử lý tiếp phần đăng ký tài khoản       
        } else {
            // Xử lý lỗi nếu Captcha không hợp lệ
        }
    });
} else {
    // Xử lý lỗi nếu không có Captcha
}

 

Cải tiến UX Frontend

Vậy là phần tích hợp Captcha đã hoàn tất, tuy nhiên để tạo trải nghiệm tốt cho người dùng chúng ta nên sửa 1 chút ở giao diện: Chỉ khi người dùng đã hoàn thành Captcha xong thì mới cho phép bấm vào nút Đăng ký.

- Bổ sung thêm hàm Callback cho Captcha (hàm này sẽ được gọi khi người dùng check xong Captcha) bằng cách thêm thuộc tính data-callback ở Widget:

<div class="g-recaptcha" data-sitekey="6LdlzxcUAAAAAB-TqZZ1mJJ-L0U6hBH614kDzX03" data-callback="enableRegisterButton">

- Viết hàm xử lý khi nhận được kết quả từ Captcha: 


function enableRegisterButton() {
    // Kiểm tra xem form đã validate chưa và bỏ trạng thái disable của nút Đăng ký
}
Câu trả lời

- Bạn đã sẵn sàng thảo luận về chủ đề này. Hãy bấm "Viết bình luận", bạn có thể lựa chọn sử dụng tài khoản Facebook hoặc Google++

- Vì sự phát triển của cộng đồng CNTT/CNPM tại Việt Nam!

Unknown user
No responses yet

Từ khóa tìm kiếm

Câu trả lời mới nhất

Tin tuyển dụng