reCAPTCHA tidak terlihat

Halaman ini menjelaskan cara mengaktifkan dan menyesuaikan reCAPTCHA tidak terlihat di halaman web Anda.

Untuk memanggil reCAPTCHA tidak terlihat, Anda dapat:

Lihat Konfigurasi untuk mempelajari cara menyesuaikan reCAPTCHA tidak terlihat. Misalnya, Anda mungkin ingin menentukan bahasa atau lokasi badge.

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

Mengikat tantangan ke tombol secara otomatis

Metode termudah untuk menggunakan widget reCAPTCHA tidak terlihat di halaman Anda adalah dengan menyertakan resource JavaScript yang diperlukan dan menambahkan beberapa atribut ke tombol html Anda. Atribut yang diperlukan adalah nama class 'g-recaptcha', kunci situs Anda di atribut data-sitekey, dan nama callback JavaScript untuk menangani penyelesaian captcha di atribut 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>

Skrip harus dimuat menggunakan protokol HTTPS dan dapat disertakan dari titik mana pun di halaman tanpa batasan.

Secara terprogram, tautkan tantangan ke tombol atau panggil tantangan.

Menunda binding dapat dilakukan dengan menentukan fungsi callback pemuatan dan menambahkan parameter ke resource JavaScript. Cara kerjanya sama dengan tantangan reCAPTCHA normal.

Panggil tantangan secara terprogram.

Memanggil verifikasi reCAPTCHA secara terprogram dapat dilakukan dengan merender tantangan dalam div dengan atribut data-size="invisible" dan memanggil execute secara terprogram.

  1. Buat div dengan data-size="invisible".

    <div class="g-recaptcha"
      data-sitekey="_your_site_key_"
      data-callback="onSubmit"
      data-size="invisible">
</div>

  2. Panggil grecaptcha.execute dari metode JavaScript.

    grecaptcha.execute();

    Saat callback dieksekusi, Anda dapat memanggil metode grecaptcha.render dari JavaScript API.

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. Defaultnya adalah onload, yang akan merender widget di tag g-recaptcha pertama yang ditemukannya.
hl Lihat kode bahasa Opsional. Memaksa widget untuk merender 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 kunci situs Sitekey Anda.
data-badge badge inline bottomright bottomleft kanan bawah Opsional. Posisikan ulang badge reCAPTCHA. 'inline' memungkinkan Anda memosisikan dengan CSS.
data-size ukuran tidak terlihat Opsional. Digunakan untuk membuat widget tidak terlihat yang terikat ke div dan dieksekusi secara terprogram.
data-tabindex tabindex 0 Opsional. Tabindex tantangan. Jika elemen lain di halaman Anda menggunakan tabindex, elemen tersebut harus disetel untuk mempermudah navigasi pengguna.
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 ketika respons reCAPTCHA tidak berlaku lagi dan pengguna harus memverifikasi ulang.
data-error-callback callback-error Opsional. Nama fungsi callback Anda, yang dieksekusi ketika 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.
terisolasi salah Opsional. Agar pemilik plugin tidak mengganggu penginstalan reCAPTCHA yang ada di halaman. Jika benar, instance reCAPTCHA ini akan menjadi bagian dari ruang ID terpisah.

JavaScript API

Metode Deskripsi
grecaptcha.render (
container,
parameter,
seperti sebelumnya
) 		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.
parameter
Objek yang berisi parameter sebagai key=value pair, misalnya, {"sitekey": "your_site_key", "theme": "light"}. Lihat parameter grecaptcha.render.
warisi
Menggunakan atribut data-* yang sudah ada pada elemen jika parameter yang sesuai tidak ditentukan. Parameter akan lebih diprioritaskan daripada atribut.
grecaptcha.execute(
opt_widget_id
) 		Panggil pemeriksaan reCAPTCHA secara terprogram. Digunakan jika reCAPTCHA tidak terlihat ada di div alih-alih tombol.
opt_widget_id
  ID widget opsional, ditetapkan secara default ke widget pertama yang dibuat jika tidak ditentukan.
grecaptcha.reset(
opt_widget_id
) 		Mereset widget reCAPTCHA.
opt_widget_id
  ID widget opsional, ditetapkan secara default ke 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 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>

Memanggil tantangan reCAPTCHA tidak terlihat setelah validasi sisi klien.

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