reCAPTCHA v3

reCAPTCHA v3 menampilkan skor untuk setiap permintaan tanpa hambatan pengguna. Skor ini didasarkan pada interaksi dengan situs Anda dan memungkinkan Anda mengambil tindakan yang sesuai untuk situs Anda. 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, sehingga Anda dapat menjalankannya kapan saja sesuai keinginan tanpa memengaruhi konversi. reCAPTCHA berfungsi paling baik jika memiliki konteks paling banyak tentang interaksi dengan situs Anda, yang berasal dari melihat perilaku yang sah dan melecehkan. Oleh karena itu, sebaiknya sertakan verifikasi reCAPTCHA di formulir atau tindakan serta di latar belakang halaman untuk analisis.

Anda dapat menjalankan reCAPTCHA di banyak tindakan yang diinginkan pada 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. Memuat 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 terhadap kapan reCAPTCHA berjalan, Anda dapat menggunakan metode execute dalam objek grecaptcha. Untuk melakukannya, Anda harus 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 pada 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 menampilkan skor (1,0 sangat mungkin merupakan interaksi yang baik, 0,0 sangat mungkin bot). Berdasarkan skornya, Anda dapat mengambil tindakan variabel dalam konteks situs Anda. Setiap situs berbeda, tetapi di bawah ini adalah beberapa contoh bagaimana situs menggunakan skor. Seperti pada contoh di bawah, ambil tindakan di balik layar dan bukan memblokir traffic untuk melindungi situs Anda dengan lebih baik.

Kasus penggunaan Recommendation
halaman utama Lihat tampilan kohesif traffic Anda di konsol admin sambil memfilter scraper.
login Dengan skor rendah, wajibkan autentikasi 2 faktor atau verifikasi email untuk mencegah serangan penjejalan kredensial.
sosial Batasi permintaan pertemanan yang belum terjawab dari pengguna yang melakukan penyalahgunaan dan kirim komentar berisiko pada moderasi.
e-commerce Tempatkan penjualan Anda yang sebenarnya di depan bot dan identifikasikan transaksi yang berisiko.

reCAPTCHA belajar dengan melihat traffic nyata di situs Anda. Karena alasan ini, skor dalam lingkungan staging atau segera setelah penerapan mungkin berbeda dari produksi. Karena reCAPTCHA v3 tidak pernah mengganggu alur penggunaan, Anda dapat menjalankan reCAPTCHA terlebih dahulu tanpa mengambil tindakan, lalu memutuskan batas dengan melihat traffic di konsol admin. Secara default, Anda dapat menggunakan nilai minimum 0,5.

Tindakan

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

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

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

Respons Verifikasi Situs

Buat permintaan untuk memverifikasi token respons seperti 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 onload yang ditentukan dengan v2 API.
  2. Coba hubungkan panggilan execute ke tindakan yang menarik atau sensitif seperti Daftar, Reset Sandi, Pembelian, atau Putar.
  3. Gunakan https://www.google.com/recaptcha/api.js?trustedtypes=true untuk memuat kode yang kompatibel dengan Jenis Tepercaya.