reCAPTCHA phiên bản 3

reCAPTCHA v3 trả về điểm số cho mỗi yêu cầu mà không gây phiền hà cho người dùng. Điểm số này dựa trên các lượt tương tác với trang web của bạn và cho phép bạn thực hiện hành động thích hợp cho trang web của mình. Đăng ký khoá reCAPTCHA v3 trên Bảng điều khiển dành cho quản trị viên reCAPTCHA.

Trang này giải thích cách bật và tuỳ chỉnh reCAPTCHA v3 trên trang web của bạn.

Vị trí trên trang web của bạn

reCAPTCHA v3 sẽ không bao giờ làm gián đoạn người dùng, vì vậy, bạn có thể chạy reCAPTCHA bất cứ khi nào mình muốn mà không ảnh hưởng đến lượt chuyển đổi. reCAPTCHA hoạt động tốt nhất khi có bối cảnh phù hợp nhất về các lượt tương tác với trang web của bạn, trong đó có việc phát hiện được cả hành vi hợp lệ và sai trái. Vì lý do này, bạn nên thêm phương thức xác minh reCAPTCHA vào các biểu mẫu hoặc hành động cũng như trong nền của các trang để phân tích.

Bạn có thể thực thi reCAPTCHA cho bao nhiêu hành động tuỳ thích trên cùng một trang.

Tự động liên kết thử thách vào một nút

Phương pháp dễ nhất để sử dụng reCAPTCHA v3 trên trang của bạn là bao gồm tài nguyên JavaScript cần thiết và thêm một vài thuộc tính vào nút html của bạn.

  1. Tải API JavaScript.

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

  2. Thêm một hàm callback để xử lý mã thông báo.

     <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

  3. Thêm thuộc tính vào nút html của bạn.

    <button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

Đưa ra thách thức theo phương thức lập trình

Nếu muốn có nhiều quyền kiểm soát hơn đối với thời điểm reCAPTCHA chạy, bạn có thể sử dụng phương thức execute trong đối tượng grecaptcha. Để làm việc này, bạn cần thêm một tham số render vào tệp tải tập lệnh reCAPTCHA.

  1. Tải API JavaScript bằng khoá trang web.

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

  2. Gọi grecaptcha.execute cho từng hành động mà bạn muốn bảo vệ.

       <script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

  3. Gửi mã thông báo ngay đến phần phụ trợ cùng với yêu cầu xác minh.

Diễn giải điểm số

reCAPTCHA v3 trả về điểm số (1.0 rất có thể là một tương tác tốt, 0.0 rất có thể là một bot). Dựa vào điểm số, bạn có thể thực hiện hành động khác nhau trong ngữ cảnh của trang web. Mỗi trang web sẽ khác nhau, nhưng dưới đây là một số ví dụ về cách các trang web sử dụng điểm số này. Như trong các ví dụ bên dưới, hãy hành động hậu trường thay vì chặn lưu lượng truy cập để bảo vệ trang web của bạn tốt hơn.

Trường hợp sử dụng Nội dung đề xuất
trang chủ Xem chế độ xem liền mạch về lưu lượng truy cập của bạn trên bảng điều khiển dành cho quản trị viên khi lọc công cụ khai thác dữ liệu.
đăng nhập Với điểm số thấp, bạn phải yêu cầu xác thực 2 yếu tố hoặc xác minh email để ngăn chặn các cuộc tấn công nhồi nhét thông tin xác thực.
social Hạn chế các yêu cầu kết bạn không được trả lời từ người dùng lạm dụng và gửi nhận xét nguy hiểm để kiểm duyệt.
thương mại điện tử Hãy đặt doanh số bán hàng thực tế của bạn trước bot và xác định các giao dịch rủi ro.

reCAPTCHA học bằng cách xem lưu lượng truy cập thực tế trên trang web của bạn. Vì lý do này, điểm số trong môi trường thử nghiệm hoặc ngay sau khi triển khai có thể khác với điểm số trong môi trường thực tế. Vì reCAPTCHA v3 không làm gián đoạn luồng người dùng, nên trước tiên bạn có thể chạy reCAPTCHA mà không cần thực hiện hành động nào, sau đó quyết định ngưỡng bằng cách xem xét lưu lượng truy cập của bạn trong bảng điều khiển dành cho quản trị viên. Theo mặc định, bạn có thể sử dụng ngưỡng là 0,5.

Thao tác

reCAPTCHA v3 ra mắt một khái niệm mới: hành động. Khi chỉ định tên thao tác ở mỗi vị trí thực thi reCAPTCHA, bạn sẽ bật các tính năng mới sau đây:

  • Bảng phân tích chi tiết dữ liệu cho 10 thao tác hàng đầu trong bảng điều khiển dành cho quản trị viên
  • Bản phân tích rủi ro thích ứng dựa trên ngữ cảnh của hành động, vì hành vi sai trái có thể thay đổi.

Quan trọng là khi xác minh phản hồi của reCAPTCHA, bạn nên xác minh rằng tên hành động là tên bạn muốn.

Phản hồi xác minh trang web

Hãy thực hiện yêu cầu xác minh mã thông báo phản hồi như với reCAPTCHA v2 hoặc reCAPTCHA vô hình.

Phản hồi là một đối tượng JSON:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "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
}

Mẹo

  1. grecaptcha.ready() sẽ chạy hàm của bạn khi thư viện reCAPTCHA tải. Để tránh các tình huống tương tranh với api.js, hãy thêm api.js vào trước các tập lệnh gọi grecaptcha, hoặc tiếp tục sử dụng lệnh gọi lại khi tải được xác định bằng API v2.
  2. Hãy thử nối lệnh gọi execute với các thao tác thú vị hoặc nhạy cảm như Đăng ký, Đặt lại mật khẩu, Mua hoặc Chơi.
  3. Sử dụng https://www.google.com/recaptcha/api.js?trustedtypes=true để tải mã tương thích với Loại đáng tin cậy.