Halaman ini diterjemahkan oleh Cloud Translation API.

reCAPTCHA v2

Halaman ini menjelaskan cara menampilkan dan menyesuaikan widget reCAPTCHA v2 di halaman web Anda.

Untuk menampilkan widget, Anda dapat:

Merender widget secara otomatis atau
Merender widget secara eksplisit

Lihat Konfigurasi untuk mempelajari cara menyesuaikan widget Anda. Misalnya, Anda mungkin ingin menentukan bahasa atau tema untuk widget.

Lihat Memverifikasi respons pengguna untuk memeriksa apakah pengguna berhasil menyelesaikan CAPTCHA.

Merender widget reCAPTCHA secara otomatis

Metode termudah untuk merender widget reCAPTCHA di halaman Anda adalah menyertakan resource JavaScript yang diperlukan dan tag g-recaptcha. Tag g-recaptcha adalah elemen DIV dengan nama class g-recaptcha dan kunci situs Anda di atribut 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>

Skrip harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari pengguna di halaman tanpa pembatasan.

Merender widget reCAPTCHA secara eksplisit

Proses menunda render dapat dilakukan dengan menentukan fungsi callback pemuatan dan menambahkan parameter ke resource JavaScript.

Tentukan fungsi callback onload Anda. Fungsi ini akan dipanggil saat semua dependensi telah dimuat.

<script type="text/javascript">
  var onloadCallback = function() {
    alert("grecaptcha is ready!");
  };
</script>

Sisipkan resource JavaScript, dengan menetapkan parameter onload ke nama fungsi callback onload dan parameter render ke explicit.
```
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
    async defer>
</script>
```
Saat callback dijalankan, Anda dapat memanggil metode grecaptcha.render dari JavaScript API.
Fungsi callback onload Anda harus yang ditentukan sebelum reCAPTCHA API dimuat. Untuk memastikan tidak ada ras kondisi:
- Urutkan skrip dengan callback terlebih dahulu, lalu reCAPTCHA
- Menggunakan parameter async dan defer dalam tag `script`

Konfigurasi

Parameter resource JavaScript (api.js)

Parameter	Nilai	Deskripsi
`onload`		Opsional. Nama fungsi callback yang akan dieksekusi setelah semua dependensi dimuat.
`render`	explicit onload	Opsional. Apakah akan merender widget secara eksplisit. Secara default adalah onload, yang akan merender widget dalam tag `g-recaptcha` pertama yang ditemukannya.
`hl`	Lihat kode bahasa	Opsional. Memaksa widget dirender dalam bahasa tertentu. Mendeteksi otomatis bahasa pengguna jika tidak ditentukan.

atribut tag g-recaptcha dan parameter grecaptcha.render

Atribut tag g-recaptcha	Parameter grecaptcha.render	Nilai	Default	Deskripsi
`data-sitekey`	`sitekey`			Sitekey Anda.
`data-theme`	`theme`	`dark light`	`light`	Opsional. Tema warna widget.
`data-size`	`size`	`compact normal`	`normal`	Opsional. Ukuran widget.
`data-tabindex`	`tabindex`		0	Opsional. Tabindex widget dan tantangan. Jika elemen lain di halaman Anda menggunakan tabindex, sebaiknya tetapkan untuk membuat navigasi pengguna lebih mudah.
`data-callback`	`callback`			Opsional. Nama fungsi callback Anda, yang dijalankan saat pengguna mengirimkan respons yang berhasil. Token `g-recaptcha-response` diteruskan ke callback Anda.
`data-expired-callback`	`expired-callback`			Opsional. Nama fungsi callback Anda, yang dieksekusi saat masa berlaku respons reCAPTCHA habis dan pengguna perlu memverifikasi ulang.
`data-error-callback`	`error-callback`			Opsional. Nama fungsi callback Anda, yang dieksekusi saat reCAPTCHA mengalami error (biasanya konektivitas jaringan) dan tidak dapat dilanjutkan hingga konektivitas dipulihkan. Jika menentukan fungsi di sini, Anda bertanggung jawab untuk memberi tahu pengguna bahwa mereka harus mencoba lagi.

JavaScript API

Metode	Deskripsi
`grecaptcha.render`( penampung, parameter )	Merender penampung sebagai widget reCAPTCHA dan menampilkan ID widget yang baru dibuat. container Elemen HTML untuk merender widget reCAPTCHA. Tentukan ID penampung (string) atau elemen DOM itu sendiri. parameters Objek yang berisi parameter sebagai pasangan kunci=nilai, misalnya, {"sitekey": "your_site_key", "theme": "light"}. Lihat parameter grecaptcha.render.
`grecaptcha.reset( opt_widget_id )`	Mereset widget reCAPTCHA. opt_widget_id ID widget opsional, default-nya adalah widget pertama yang dibuat jika tidak ditentukan.
`grecaptcha.getResponse( opt_widget_id )`	Mendapatkan respons untuk widget reCAPTCHA. opt_widget_id ID widget opsional, ditetapkan secara default ke widget pertama yang dibuat jika tidak ditentukan.

Contoh

Rendering eksplisit setelah callback saat pemuatan

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

Rendering eksplisit untuk beberapa widget

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