Trang này được dịch bởi Cloud Translation API.

reCAPTCHA vô hình

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

Để gọi reCAPTCHA vô hình, bạn có thể:

Tự động liên kết thử thách vào một nút hoặc
Liên kết thử thách với một nút theo phương thức lập trình hoặc
Đưa ra thách thức theo cách lập trình

Xem phần Cấu hình để tìm hiểu cách tuỳ chỉnh reCAPTCHA vô hình. Ví dụ: bạn có thể muốn chỉ định ngôn ngữ hoặc vị trí của huy hiệu.

Hãy xem phần Xác minh phản hồi của người dùng để kiểm tra xem người dùng đã giải quyết thành công CAPTCHA hay chưa.

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 tiện ích reCAPTCHA vô hình 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. Các thuộc tính cần thiết bao gồm tên lớp "g-recaptcha", khoá trang web của bạn trong thuộc tính data-sitekey và tên của lệnh gọi lại JavaScript để xử lý việc hoàn tất hình ảnh xác thực trong thuộc tính data-callback.

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
     <script src="https://www.google.com/recaptcha/api.js" async defer></script>
     <script>
       function onSubmit(token) {
         document.getElementById("demo-form").submit();
       }
     </script>
  </head>
  <body>
    <form id="demo-form" action="?" method="POST">
      <button class="g-recaptcha" data-sitekey="your_site_key" data-callback="onSubmit">Submit</button>
      <br/>
    </form>
  </body>
</html>

Tập lệnh phải được tải bằng giao thức HTTPS và có thể được đưa vào từ bất kỳ điểm nào trên trang mà không bị hạn chế.

Liên kết thử thách theo phương thức lập trình với một nút hoặc gọi ra thử thách.

Bạn có thể trì hoãn liên kết bằng cách chỉ định hàm callback onload của bạn và thêm các tham số vào tài nguyên JavaScript. Thử thách này giống như thử thách reCAPTCHA thông thường.

Gọi ra thách thức theo cách lập trình.

Bạn có thể gọi lệnh xác minh reCAPTCHA theo phương thức lập trình bằng cách kết xuất thử thách trong một div có thuộc tính data-size="invisible" và thực thi lệnh gọi theo phương thức lập trình.

Tạo một div bằng data-size="invisible".

<div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

Gọi greCAPTCHA.execute từ một phương thức javascript.
```
grecaptcha.execute();
```
Khi thực thi lệnh gọi lại, bạn có thể gọi phương thức grecaptcha.render từ API JavaScript.
Bạn phải xác định hàm callback onload của mình trước khi API reCAPTCHA tải. Để đảm bảo không có tình huống tương tranh, hãy làm như sau:
- sắp xếp các tập lệnh của bạn bằng lệnh gọi lại trước, sau đó là reCAPTCHA
- dùng các tham số "async" và "defer" trong các thẻ "script"

Cấu hình

Thông số tài nguyên JavaScript (api.js)

Thông số	Giá trị	Mô tả
đang tải		Không bắt buộc. Tên của hàm callback sẽ được thực thi sau khi tất cả các phần phụ thuộc được tải.
kết xuất	explicit onload	Không bắt buộc. Liệu có hiển thị tiện ích một cách rõ ràng hay không. Giá trị mặc định là onload, sẽ hiển thị tiện ích trong thẻ `g-recaptcha` đầu tiên mà nó tìm thấy.
hl	Xem mã ngôn ngữ	Không bắt buộc. Buộc tiện ích hiển thị bằng một ngôn ngữ cụ thể. Tự động phát hiện ngôn ngữ của người dùng nếu bạn không chỉ định.

thuộc tính thẻ g-recaptcha và tham số grecaptcha.render

thuộc tính thẻ g-reCAPTCHA	thông số grecaptcha.render	Giá trị	Mặc định	Mô tả
data-sitekey	khoá trang web			Khoá trang web của bạn.
huy hiệu dữ liệu	huy hiệu	nội tuyến dưới cùng bên phải dưới cùng bên trái	dưới cùng bên phải	Không bắt buộc. Đặt lại vị trí của huy hiệu reCAPTCHA. "nội tuyến" cho phép bạn định vị quảng cáo bằng CSS.
kích thước dữ liệu	size	không hiển thị		Không bắt buộc. Dùng để tạo một tiện ích vô hình được liên kết với một div và được thực thi theo phương thức lập trình.
data-tabindex	chỉ mục thẻ		0	Không bắt buộc. Chỉ mục thẻ của thử thách. Nếu các thành phần khác trong trang của bạn sử dụng chỉ mục thẻ, thì bạn nên đặt thành phần này để người dùng dễ dàng điều hướng hơn.
data-callback	số gọi lại			Không bắt buộc. Tên của hàm callback, được thực thi khi người dùng gửi một phản hồi thành công. Mã thông báo `g-recaptcha-response` được chuyển đến lệnh gọi lại của bạn.
data-expired-callback	expired-callback			Không bắt buộc. Tên của hàm callback, được thực thi khi phản hồi reCAPTCHA hết hạn và người dùng cần xác minh lại.
data-error-callback	gọi lại lỗi			Không bắt buộc. Tên của hàm callback, được thực thi khi reCAPTCHA gặp lỗi (thường là kết nối mạng) và không thể tiếp tục cho đến khi khả năng kết nối được khôi phục. Nếu chỉ định một hàm tại đây, bạn có trách nhiệm thông báo cho người dùng rằng họ nên thử lại.
	tách biệt		false	Không bắt buộc. Để chủ sở hữu trình bổ trợ không can thiệp vào các lượt cài đặt reCAPTCHA hiện có trên một trang. Nếu đúng, thực thể reCAPTCHA này sẽ là một phần của một không gian mã nhận dạng riêng biệt.

API JavaScript

Phương thức	Mô tả
grecaptcha.render( vùng chứa, thông số, kế thừa )	Hiển thị vùng chứa dưới dạng tiện ích reCAPTCHA và trả về mã của tiện ích mới tạo. vùng chứa Phần tử HTML để hiển thị tiện ích reCAPTCHA. Chỉ định mã của vùng chứa (chuỗi) hoặc chính phần tử DOM. tham số Một đối tượng chứa các tham số dưới dạng cặp khoá=giá trị, ví dụ: {"sitekey": "your_site_key", "theme": "light"}. Xem thông số grecaptcha.render. kế thừa Dùng thuộc tính dữ liệu* hiện có trên phần tử nếu không chỉ định tham số tương ứng. Các tham số sẽ được ưu tiên hơn các thuộc tính.
grecaptcha.execute( opt_widget_id )	Gọi lượt kiểm tra reCAPTCHA theo phương thức lập trình. Được dùng nếu reCAPTCHA vô hình nằm trên một div thay vì một nút. opt_widget_id Mã tiện ích không bắt buộc, mặc định là tiện ích đầu tiên được tạo nếu bạn không chỉ định.
grecaptcha.reset( opt_widget_id )	Đặt lại tiện ích reCAPTCHA. opt_widget_id Mã tiện ích không bắt buộc, mặc định là tiện ích đầu tiên được tạo nếu bạn không chỉ định.
grecaptcha.getResponse( opt_widget_id )	Nhận phản hồi cho tiện ích reCAPTCHA. opt_widget_id Mã tiện ích không bắt buộc, mặc định là tiện ích đầu tiên được tạo nếu bạn không chỉ định.

Ví dụ

Hiển thị rõ ràng sau lệnh gọi lại onload

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render after an onload callback</title>
    <script>
        var onSubmit = function(token) {
          console.log('success!');
        };

        var onloadCallback = function() {
          grecaptcha.render('submit', {
            'sitekey' : 'your_site_key',
            'callback' : onSubmit
          });
        };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <input id="submit" type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Gọi thử thách reCAPTCHA vô hình sau khi xác thực phía máy khách.

<html>
  <head>
  <script>
    function onSubmit(token) {
      alert('thanks ' + document.getElementById('field').value);
    }

    function validate(event) {
      event.preventDefault();
      if (!document.getElementById('field').value) {
        alert("You must add text to the required field");
      } else {
        grecaptcha.execute();
      }
    }

    function onload() {
      var element = document.getElementById('submit');
      element.onclick = validate;
    }
  </script>
  <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form>
      Name: (required) <input id="field" name="field">
      <div id="recaptcha" class="g-recaptcha"
          data-sitekey="_your_site_key_"
          data-callback="onSubmit"
          data-size="invisible"></div>
      <button id="submit">submit</button>
    </form>
    <script>onload();</script>
  </body>
</html>