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ể:

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

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 đã giải quyết thành công CAPTCHA hay chưa.

Tự động hiển thị tiện ích reCAPTCHA

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

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

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

Bạn có thể trì hoãn việc kết xuất bằng cách chỉ định hàm callback onload và thêm các 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 xong.
```
<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 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 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 trước khi tải API reCAPTCHA. Để đảm bảo không có điều kiện tranh đấu:
- 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
- Dùng tham số async và defer trong 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ải xong tất cả các phần phụ thuộc.
kết xuất	tải rõ ràng	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	Nội dung mô tả
khoá-trang-web	khoá trang web			Khoá trang web của bạn.
chủ đề dữ liệu	chủ đề	sáng tối	đèn	Không bắt buộc. Giao diện màu của tiện ích.
data-size	size	thu gọn thông thường	bình thường	Không bắt buộc. Kích thước của tiện ích.
chỉ mục thẻ dữ liệu	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 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.
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 chuyển đến lệnh gọi lại của bạn.
lệnh 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.
lệnh-gọi lại dữ liệu-lỗi	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.

API JavaScript

Phương thức	Nội dung mô tả
grecaptcha.render( vùng chứa, tham số )	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 để kết xuất 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.
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 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>