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

reCAPTCHA phiên bản 2

Trang này giải thích cách hiển thị và tuỳ chỉnh tiện ích reCAPTCHA v2 trên trang web của bạn.

Để hiển thị tiện ích này, bạn có thể làm một trong hai việc sau:

Tự động hiển thị tiện ích hoặc
Hiển thị rõ ràng tiện ích

Xem Cấu hình để tìm hiểu cách tùy chỉnh tiện ích của bạn. Ví dụ: bạn có thể muốn chỉ định ngôn ngữ hoặc chủ đề cho tiện ích.

Xem 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 CAPTCHA thành công hay không.

Tự động kết xuất tiện ích reCAPTCHA

Phương thức dễ nhất để hiển thị tiện ích reCAPTCHA trên trang là đưa tài nguyên JavaScript cần thiết và thẻ g-recaptcha vào. Thẻ g-recaptcha là một phần tử DIV có tên lớp là g-recaptcha và khóa trang web trong thuộc tính data-sitekey:

<html>
  <head>
    <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
    <form action="?" method="POST">
      <div class="g-recaptcha" data-sitekey="your_site_key"></div>
      <br/>
      <input type="submit" value="Submit">
    </form>
  </body>
</html>

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

Hiển thị rõ ràng tiện ích reCAPTCHA

Bạn có thể trì hoãn quá trình kết xuất bằng cách chỉ định hàm gọi lại đang tải và thêm tham số vào tài nguyên JavaScript.

Hãy chỉ định hàm gọi lại onload. Hàm này sẽ được gọi khi tất cả phần phụ thuộc đã tải.
```
<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>
```
Chèn tài nguyên JavaScript, đặt tham số onload thành tên của hàm gọi lại onload và tham số render thành explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
Khi lệnh gọi lại được thực thi, bạn có thể gọi phương thức grecaptcha.render qua API JavaScript.
Bạn phải xác định hàm gọi lại onload trước khi API reCAPTCHA tải. Để đảm bảo không có điều kiện tương tranh:
- 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 đó đến reCAPTCHA
- Sử dụng các thông số async và defer trong các thẻ `script`

Cấu hình

Tham 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 được thực thi sau khi tất cả phần phụ thuộc đã tải.
kết xuất	tải rõ ràng	Không bắt buộc. Có hiển thị tiện ích một cách rõ ràng hay không. Giá trị mặc định là tải, sẽ hiển thị tiện ích trong thẻ `g-recaptcha` đầu tiê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 không xác định.

Các thuộc tính thẻ g-recaptcha và thông số grecaptcha.render

thuộc tính thẻ g-recaptcha	Tham số grecaptcha.render	Giá trị	Mặc định	Mô tả
khoá trang web dữ liệu	khoá trang web			Khóa trang web của bạn.
chủ đề dữ liệu	chủ đề	ánh sáng tối	đèn	Không bắt buộc. Giao diện màu của tiện ích.
kích thước dữ liệu	size	thông thường nhỏ gọn	bình thường	Không bắt buộc. Kích thước của tiện ích.
data-tabindex	chỉ mục thẻ		0	Không bắt buộc. Chỉ mục thẻ của tiện ích và thử thách. Nếu các phần tử khác trong trang của bạn sử dụng chỉ mục thẻ, bạn nên thiết lập các phần tử đó để điều hướng người dùng dễ dàng hơn.
lệnh gọi lại dữ liệu	cuộc 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.
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 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à 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.

API JavaScript

Phương thức	Mô tả
grecaptcha.hiển thị( vùng chứa, tham số )	Hiển thị vùng chứa dưới dạng một tiện ích reCAPTCHA và trả về mã nhận dạng của tiện ích mới tạo. vùng chứa Phần tử HTML để kết xuất tiện ích reCAPTCHA. Chỉ định ID 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 khóa=giá trị, ví dụ: {"sitekey": "your_site_key", "theme": "light"}. Xem thông số grecaptcha.render.
grecaptcha.đặt lại( mã tiện ích tối ưu hóa )	Đặ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 xác định.
grecaptcha.getResponse( mã tiện ích tối ưu hóa )	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 xác đị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 type="text/javascript">
      var onloadCallback = function() {
        grecaptcha.render('html_element', {
          'sitekey' : 'your_site_key'
        });
      };
    </script>
  </head>
  <body>
    <form action="?" method="POST">
      <div id="html_element"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>

Hiển thị rõ ràng cho nhiều tiện ích

<html>
  <head>
    <title>reCAPTCHA demo: Explicit render for multiple widgets</title>
    <script type="text/javascript">
      var verifyCallback = function(response) {
        alert(response);
      };
      var widgetId1;
      var widgetId2;
      var onloadCallback = function() {
        // Renders the HTML element with id 'example1' as a reCAPTCHA widget.
        // The id of the reCAPTCHA widget is assigned to 'widgetId1'.
        widgetId1 = grecaptcha.render('example1', {
          'sitekey' : 'your_site_key',
          'theme' : 'light'
        });
        widgetId2 = grecaptcha.render(document.getElementById('example2'), {
          'sitekey' : 'your_site_key'
        });
        grecaptcha.render('example3', {
          'sitekey' : 'your_site_key',
          'callback' : verifyCallback,
          'theme' : 'dark'
        });
      };
    </script>
  </head>
  <body>
    <!-- The g-recaptcha-response string displays in an alert message upon submit. -->
    <form action="javascript:alert(grecaptcha.getResponse(widgetId1));">
      <div id="example1"></div>
      <br>
      <input type="submit" value="getResponse">
    </form>
    <br>
    <!-- Resets reCAPTCHA widgetId2 upon submit. -->
    <form action="javascript:grecaptcha.reset(widgetId2);">
      <div id="example2"></div>
      <br>
      <input type="submit" value="reset">
    </form>
    <br>
    <!-- POSTs back to the page's URL upon submit with a g-recaptcha-response POST parameter. -->
    <form action="?" method="POST">
      <div id="example3"></div>
      <br>
      <input type="submit" value="Submit">
    </form>
    <script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
        async defer>
    </script>
  </body>
</html>