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.

Otomatis mengikat tantangan ke tombol

Metode termudah untuk menggunakan widget reCAPTCHA tidak terlihat di halaman Anda adalah 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 capca 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 pada halaman tanpa batasan.

Secara terprogram mengikat tantangan ke tombol atau memanggil tantangan.

Menunda binding dapat dilakukan dengan menentukan fungsi callback saat pemuatan dan menambahkan parameter ke resource JavaScript. Cara kerjanya sama seperti 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 eksekusi 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 onload
eksplisit		 Opsional. Apakah 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 dirender dalam bahasa tertentu. Deteksi otomatis bahasa pengguna jika tidak ditentukan.

atribut tag g-recaptcha dan parameter grecaptcha.render

atribut tag g-recaptcha parameter grecaptcha.render Nilai Default Deskripsi
kunci situs data kunci situs Sitekey Anda.
badge-data badge kanan bawah inline kanan bawah Opsional. Mengubah posisi badge reCAPTCHA. 'inline' memungkinkan Anda memosisikannya dengan CSS.
data-size ukuran tidak terlihat Opsional. Digunakan untuk membuat widget tak terlihat yang terikat dengan div dan dieksekusi secara terprogram.
data-tabindex indeks tab 0 Opsional. Tabindex tantangan. Jika elemen lain di halaman Anda menggunakan tabindex, elemen tersebut harus diatur untuk membuat navigasi pengguna lebih mudah.
callback data callback Opsional. Nama fungsi callback Anda, yang dijalankan saat pengguna berhasil mengirim respons. Token g-recaptcha-response diteruskan ke callback Anda.
data-kehabisan-callback callback-akhir-akhir Opsional. Nama fungsi callback Anda, yang dieksekusi ketika respons reCAPTCHA berakhir dan pengguna harus melakukan verifikasi 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 pulih. Jika menentukan fungsi di sini, Anda bertanggung jawab untuk memberi tahu pengguna bahwa mereka harus mencoba lagi.
terisolasi false 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 container 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.
mewarisi
Gunakan atribut data-* yang ada pada elemen jika parameter yang terkait tidak ditentukan. Parameter akan lebih diprioritaskan daripada atribut.
grecaptcha.execute(
opt_widget_id
) 		Memanggil pemeriksaan reCAPTCHA secara terprogram. Digunakan jika reCAPTCHA tidak terlihat berada di div, bukan 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>