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 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
Gọi thử thách theo phương thức lập trình

Hãy 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.

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 có giải quyết thành công CAPTCHA hay không.

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>

Bạn phải tải tập lệnh bằng giao thức HTTPS và có thể đưa tập lệnh 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 gọi lại onload và thêm tham số vào tài nguyên JavaScript. Cách này hoạt động 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 lệnh gọi lại được thực thi, bạn có thể gọi phương thức grecaptcha.render từ JavaScript API.
Bạn phải xác định hàm gọi lại khi tải 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ả
`onload`		Không bắt buộc. Tên của hàm callback sẽ được thực thi sau khi tải xong tất cả các phần phụ thuộc.
`render`	explicit onload	Không bắt buộc. Liệu có hiển thị rõ ràng tiện ích hay không. Mặc định là onload, sẽ hiển thị tiện ích trong thẻ `g-recaptcha` đầu tiên mà tiện ích 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.
`data-badge`	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í huy hiệu reCAPTCHA. "inline" cho phép bạn định vị thẻ này 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à được thực thi theo phương thức lập trình.
`data-tabindex`	tabindex		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 thao tác trên trang 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 gọi lại, được thực thi khi reCAPTCHA gặp lỗi (thường là lỗi 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, 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, tham số, kế thừa )	Kết xuất 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. container 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 tham số dưới dạng các cặp khoá=giá trị, ví dụ: {"sitekey": "your_site_key", "theme": "light"}. Xem các 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 thông số sẽ được ưu tiên hơn các thuộc tính.
`grecaptcha.execute( opt_widget_id )`	Gọi quy trình 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 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 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 ẩn 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>