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, bạn có thể:

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

Hãy xem phần Cấu hình để tìm hiểu cách tuỳ chỉnh tiện ích. Ví dụ: bạn có thể muốn chỉ định ngôn ngữ hoặc giao diện cho tiện ích.

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 hiển thị tiện ích reCAPTCHA

Phương thức dễ nhất để hiển thị tiện ích reCAPTCHA trên trang của bạn là đưa vào tài nguyên JavaScript cần thiết và thẻ g-recaptcha. Thẻ g-recaptcha là một phần tử DIV có tên lớp g-recaptcha và khóa trang web của bạn 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>

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ế.

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 onload và thêm tham số vào tài nguyên JavaScript.

Chỉ định hàm callback onload. Hàm này sẽ được gọi khi tất cả cá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 callback khi tải 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 từ API JavaScript.
Hàm callback onload phải được được xác định trước khi API reCAPTCHA tải. Để đảm bảo không có cuộc đua điều kiện:
- Sắp xếp các tập lệnh của bạn trước bằng lệnh gọi lại, sau đó chọn reCAPTCHA
- Dùng tham số async và defer trong thẻ "script"

Cấu hình

Tham 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	Tham số grecaptcha.render	Giá trị	Mặc định	Mô tả
`data-sitekey`	`sitekey`			Khoá trang web của bạn.
`data-theme`	`theme`	`dark light`	`light`	Không bắt buộc. Giao diện màu của tiện ích.
`data-size`	`size`	`compact normal`	`normal`	Không bắt buộc. Kích thước của tiện ích.
`data-tabindex`	`tabindex`		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 tabindex, bạn nên đặt thuộc tính này để giúp người dùng điều hướng dễ dàng hơn.
`data-callback`	`callback`			Không bắt buộc. Tên của hàm gọi lại, được thực thi khi người dùng gửi 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.
`data-expired-callback`	`expired-callback`			Không bắt buộc. Tên của hàm gọi lại, đượ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`	`error-callback`			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.

API JavaScript

Phương thức	Mô tả
`grecaptcha.render`( vùng chứa, thông số )	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. 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 tham số dưới dạng cặp khoá=giá trị, ví dụ: {"sitekey": "your_site_key", "theme": "light"}. Xem các thông số grecaptcha.render.
`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 không được chỉ định.

Ví dụ

Kết xuất 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>

Kết xuất tường minh 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>