reCAPTCHA v3

reCAPTCHA v3 menampilkan skor untuk setiap permintaan tanpa hambatan pengguna. Skor tersebut didasarkan pada interaksi dengan situs dan memungkinkan Anda mengambil tindakan yang sesuai untuk situs. Daftarkan kunci reCAPTCHA v3 di konsol Admin reCAPTCHA.

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

Penempatan di situs Anda

reCAPTCHA v3 tidak akan pernah mengganggu pengguna Anda, sehingga Anda dapat menjalankannya kapan pun Anda mau tanpa memengaruhi konversi. reCAPTCHA akan berfungsi optimal jika memiliki konteks terbanyak terkait interaksi dengan situs Anda, yang berasal dari perilaku yang sah dan penyalahgunaan. Oleh karena itu, sebaiknya sertakan verifikasi reCAPTCHA pada formulir atau tindakan serta di latar belakang halaman untuk analisis.

Anda dapat menjalankan reCAPTCHA pada sebanyak mungkin tindakan di halaman yang sama.

Secara otomatis mengikat tantangan ke tombol

Metode termudah untuk menggunakan reCAPTCHA v3 di halaman Anda adalah dengan menyertakan resource JavaScript yang diperlukan dan menambahkan beberapa atribut ke tombol html Anda.

  1. Muat JavaScript API.

     <script src="https://www.google.com/recaptcha/api.js"></script>

  2. Tambahkan fungsi callback untuk menangani token.

     <script>
   function onSubmit(token) {
     document.getElementById("demo-form").submit();
   }
 </script>

  3. Tambahkan atribut ke tombol html Anda.

    <button class="g-recaptcha" 
        data-sitekey="reCAPTCHA_site_key" 
        data-callback='onSubmit' 
        data-action='submit'>Submit</button>

Memanggil tantangan secara terprogram

Jika ingin memiliki kontrol lebih besar terkait kapan reCAPTCHA dijalankan, Anda dapat menggunakan metode execute di objek grecaptcha. Untuk melakukannya, Anda perlu menambahkan parameter render ke pemuatan skrip reCAPTCHA.

  1. Muat JavaScript API dengan kunci situs Anda.

    <script src="https://www.google.com/recaptcha/api.js?render=reCAPTCHA_site_key"></script>

  2. Panggil grecaptcha.execute di setiap tindakan yang ingin Anda lindungi.

       <script>
      function onClick(e) {
        e.preventDefault();
        grecaptcha.ready(function() {
          grecaptcha.execute('reCAPTCHA_site_key', {action: 'submit'}).then(function(token) {
              // Add your logic to submit to your backend server here.
          });
        });
      }
  </script>

  3. Kirim token segera ke backend Anda dengan permintaan untuk memverifikasi.

Menafsirkan skor

reCAPTCHA v3 mengembalikan skor (1.0 sangat mungkin merupakan interaksi yang baik, 0.0 sangat mungkin adalah bot). Berdasarkan skor tersebut, Anda dapat melakukan tindakan variabel dalam konteks situs Anda. Setiap situs berbeda, tetapi berikut beberapa contoh cara situs menggunakan skor tersebut. Seperti pada contoh di bawah, lakukan tindakan di balik layar, bukan memblokir traffic, untuk melindungi situs Anda dengan lebih baik.

Kasus penggunaan Rekomendasi
halaman utama Lihat tampilan traffic yang kohesif di konsol Admin sambil memfilter scraper.
login Dengan skor yang rendah, wajibkan autentikasi 2 faktor atau verifikasi email untuk mencegah serangan penjejalan kredensial.
sosial Batasi permintaan pertemanan yang tidak terjawab dari pengguna yang melakukan pelecehan dan kirim komentar berisiko ke moderasi.
e-commerce Tonjolkan penjualan asli Anda daripada bot dan identifikasi transaksi yang berisiko.

reCAPTCHA belajar dengan melihat traffic sungguhan di situs Anda. Karena alasan ini, skor di lingkungan staging atau segera setelah penerapan dapat berbeda dengan produksi. Karena reCAPTCHA v3 tidak pernah mengganggu alur penggunaan, pertama-tama Anda dapat menjalankan reCAPTCHA tanpa mengambil tindakan, lalu menentukan batasnya dengan melihat traffic Anda di konsol admin. Secara default, Anda dapat menggunakan nilai minimum 0,5.

Tindakan

reCAPTCHA v3 memperkenalkan konsep baru: tindakan. Saat menentukan nama tindakan di setiap tempat Anda menjalankan reCAPTCHA, Anda akan mengaktifkan fitur baru berikut:

  • Pengelompokan data mendetail untuk sepuluh tindakan teratas Anda di konsol admin
  • Analisis risiko adaptif berdasarkan konteks tindakan, karena perilaku penyalahgunaan dapat bervariasi.

Yang penting, saat memverifikasi respons reCAPTCHA, Anda harus memverifikasi bahwa nama tindakan adalah nama yang Anda harapkan.

Respons Verifikasi Situs

Buat permintaan untuk memverifikasi token respons seperti menggunakan reCAPTCHA v2 atau reCAPTCHA Tidak Terlihat.

Responsnya adalah objek JSON:

{
  "success": true|false,      // whether this request was a valid reCAPTCHA token for your site
  "score": number             // the score for this request (0.0 - 1.0)
  "action": string            // the action name for this request (important to verify)
  "challenge_ts": timestamp,  // timestamp of the challenge load (ISO format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // the hostname of the site where the reCAPTCHA was solved
  "error-codes": [...]        // optional
}

Tips

  1. grecaptcha.ready() menjalankan fungsi Anda saat library reCAPTCHA dimuat. Untuk menghindari kondisi race dengan api.js, sertakan api.js sebelum skrip Anda yang memanggil grecaptcha, atau terus gunakan callback saat pemuatan yang ditentukan dengan API v2.
  2. Coba kaitkan panggilan execute ke tindakan yang menarik atau sensitif seperti Daftar, Reset Sandi, Beli, atau Mainkan.
  3. Gunakan https://www.google.com/recaptcha/api.js?trustedtypes=true untuk memuat kode yang kompatibel dengan Jenis Tepercaya.