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 dapat menentukan bahasa atau lokasi badge.

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

Secara otomatis mengikat tantangan ke tombol

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 bagian mana pun pada halaman tanpa batasan.

Kaitkan tantangan secara terprogram 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.

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

  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.
badge-data badge sisi kanan bawah sebaris kanan bawah Opsional. Ubah posisi badge reCAPTCHA. 'inline' memungkinkan Anda memosisikannya dengan CSS.
ukuran data 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, sebaiknya setel untuk membuat navigasi pengguna lebih mudah.
data-callback callback Opsional. Nama fungsi callback Anda, dieksekusi saat pengguna mengirimkan respons 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(
penampung,
parameter,
seperti sebelumnya
) 		Merender penampung sebagai widget reCAPTCHA dan menampilkan ID widget yang baru dibuat.
penampung
Elemen HTML untuk merender widget reCAPTCHA. Tetapkan 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 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 hanya 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 saat pemuatan

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