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 không hiển thị trên trang web của bạn.

Để gọi reCAPTCHA ẩn, bạn có thể:

Tự động liên kết thử thách với 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
Gọi ra thử thách theo phương thức lập trình

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

Xem 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 xác thực với một nút

Phương pháp dễ nhất để sử dụng tiện ích reCAPTCHA ẩn trên trang của bạn là sử dụng 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ác thuộc tính cần thiết là 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 một 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 với một nút hoặc gọi thử thách theo phương thức lập trình.

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

Gọi thử thách theo phương thức lập trình.

Bạn có thể gọi phương thức 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 với thuộc tính data-size="invisible" và thực thi lệnh gọi có lập trình.

Tạo một div với data-size="invisible".

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

Gọi grecaptcha.perform từ một phương thức JavaScript.
```
grecaptcha.execute();
```
Khi lệnh gọi lại được thực thi, 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 trước khi tải API reCAPTCHA. Để đảm bảo không có điều kiện tranh đấu nào:
- 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ị	Nội dung mô tả
onload		Không bắt buộc. Tên của hàm callback sẽ được thực thi sau khi tất cả phần phụ thuộc đã tải xong.
kết xuất	tải lên phản cảm	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, điều này 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 này 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 chưa chỉ định.

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

thuộc tính thẻ g-recaptcha	tham số grecaptcha.render	Giá trị	Mặc định	Nội dung mô tả
khoá trang web dữ liệu	khoá trang web			Khoá trang web của bạn.
huy hiệu dữ liệu	huy hiệu	cùng dòng 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 huy hiệu reCAPTCHA. "inline" cho phép bạn định vị nó bằng CSS.
data-size	size	không hiển thị		Không bắt buộc. Dùng để tạo một tiện ích ẩn được liên kết với một div và thực thi theo lập trình.
chỉ mục thẻ dữ liệu	chỉ mục thẻ		0	Không bắt buộc. Chỉ mục thẻ của thử thách xác thực. Nếu các phần tử khác trong trang của bạn sử dụng chỉ mục thẻ, thì bạn nên thiết lập thẻ này để giúp người dùng dễ dàng di chuyển hơn.
lệnh gọi lại dữ liệu	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 truyền đến lệnh gọi lại của bạn.
gọi lại dữ liệu hết hạn	lệnh gọi lại đã hết hạn			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.
gọi lại lỗi dữ liệu	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à khả năng kết nối mạng) và không thể tiếp tục cho đến khi kết nối được khôi phục. Nếu chỉ định một hàm tại đây, thì bạn có trách nhiệm thông báo cho người dùng rằng họ nên thử lại.
	cô lập		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, bản sao reCAPTCHA này sẽ nằm trong một không gian mã nhận dạng riêng biệt.

API JavaScript

Phương thức	Nội dung mô tả
grecaptcha.render( ) vùng chứa tham 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ã nhận dạng 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 thông số dưới dạng các cặp khoá=giá trị, ví dụ: {"sitekey": "your_site_key", "theme": "light"}. Xem tham số grecaptcha.render. kế thừa Sử dụng các thuộc tính data-* hiện có trên phần tử nếu bạn không chỉ định tham số tương ứng. Các thông số sẽ được ưu tiên hơn các thuộc tính.
grecaptcha.execute( opt_widget_id )	Gọi lệnh kiểm tra reCAPTCHA theo cách lập trình. Được dùng nếu reCAPTCHA không hiển thị 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 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 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 không chỉ định.

Ví dụ

Hiển thị rõ ràng sau khi 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 không hiển thị 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>