Bagaimana cara menggunakan recaptcha v3 di html?

Kita semua memiliki pengalaman yang membuat frustrasi saat mencoba mengirimkan beberapa informasi dengan cepat melalui formulir hanya untuk menghadapi tantangan Captcha pada akhirnya. Kami harus mengetikkan karakter acak dan bertanya-tanya, "Apakah itu dua V atau W?", "Haruskah saya menambahkan spasi itu atau tidak?"

Lalu kami harus memilih semua gambar yang memiliki zebra cross atau jembatan untuk membuktikan bahwa kami adalah manusia. Untungnya, saat ini, banyak situs web telah menambahkan Google reCAPTCHA v2 yang hanya menampilkan kotak centang – “Saya bukan Robot”

Namun, pada tahun 2018, Google merilis versi berikutnya – reCAPTCHA v3 yang sama sekali tidak memerlukan interaksi pengguna. Ini bekerja di belakang layar mengamati perilaku pengguna. Versi ini memberi kami (pengembang) skor yang menunjukkan betapa mencurigakannya suatu interaksi. Kami dapat menggunakan skor itu dan mencegah spam. Baca cara kerjanya di blog webmaster resmi Google

Sekarang mari pelajari cara menambahkan ini ke formulir sederhana

Daftarkan kunci reCAPTCHA v3

Anda harus mendaftarkan situs web terlebih dahulu dan mendapatkan kuncinya di sini –  https. // www. google. com/recaptcha/admin/create. Tambahkan label, pilih reCAPTCHA v3, ketik nama domain Anda dan kirim

Ini akan menghasilkan "kunci situs" dan "kunci rahasia". Salin keduanya dan simpan dengan aman. Kami akan membutuhkan mereka segera

Formulir HTML

Mari kita ambil formulir kontak sederhana dengan bidang Nama lengkap, Email, dan Pesan

HTML

Demi kesederhanaan tutorial ini, hanya kode HTML yang ditampilkan di bawah ini. Untuk CSS yang digunakan pada tangkapan layar di atas, unduh kode sumber lengkap di akhir tutorial ini

   
Full Name *
   
   
Email *
   
   
Message *
   
      
   

   Send Message

Pengajuan Formulir Ajax

Mari kita kerjakan pengiriman formulir menggunakan Ajax sebelum kita menambahkan reCAPTCHA, yang membutuhkan perpustakaan jQuery. Muat menggunakan CDN. Tempel baris ini sebelum tag

_1 penutup di HTML Anda

_

 

Kami perlu membuat permintaan Ajax pada pengiriman formulir

 

Dengan kode ini, jika Anda menekan "Kirim", Anda akan mendapatkan kesalahan 404 yang ditampilkan karena

2 belum ada. Ayo lakukan itu selanjutnya

11.000+

Ikon

20.000+

Ilustrasi

UNDUH SEKARANG

14.000+

Kit UI & UX

16.000+

Templat Web

PHP

Buat

_2. Di sisi server, kita perlu memvalidasi data yang diterima dan mengirimkan respons JSON. Kami akan mengintegrasikan reCAPTCHA sebentar lagi

  $error_output,
   'success'   =>  $success_output
);

// Output needs to be in JSON format
echo json_encode($output);

?>

_

 

Sempurna. Kami memiliki alur pengiriman formulir yang lengkap menggunakan Ajax. Sekarang saatnya untuk mengintegrasikan reCAPTCHA v3 dan Anda akan melihat betapa sederhananya itu sebenarnya, jika Anda mengikutinya dengan cermat

Integrasi Sisi Klien

Langkah pertama adalah memuat API JavaScript dengan kunci situs Anda. Rekatkan ini di bawah tautan CDN jQuery Anda

PENTING. Ganti YOUR_SITE_KEY_HERE dengan kunci situs yang Anda salin sebelumnya

Jika Anda melihat dokumen reCAPTCHA v3, kami perlu memanggil

4 pada setiap tindakan yang ingin kami lindungi. Dalam kasus kami, ini adalah pengiriman formulir. Panggilan ini menghasilkan token, yang perlu dikirim bersama data formulir kami untuk diverifikasi di sisi server. Cara terbaik untuk melakukannya adalah dengan menyertakan bidang input tersembunyi dalam formulir kami seperti ini dan secara dinamis menetapkan nilai token ke bidang ini

_

 

Panggil fungsi di bawah ini tepat di luar permintaan Ajax dan isi kolom input tersembunyi dengan nilai token. Ini secara otomatis akan menyertakan nilai token bersama dengan data formulir lainnya saat permintaan Ajax dibuat

grecaptcha.ready(function () {
   grecaptcha.execute('YOUR_SITE_KEY_HERE', { action: 'contact' }).then(function (token) {
      var recaptchaResponse = document.getElementById('recaptchaResponse');
      recaptchaResponse.value = token;
      // Make the Ajax call here
   });
});

PENTING. Ganti YOUR_SITE_KEY_HERE dengan kunci situs yang Anda salin sebelumnya

Nilai 'tindakan' khusus untuk tindakan pengiriman formulir kontak ini. Berbagai tindakan membantu Anda menganalisis data di seluruh situs web saat Anda menambahkan reCAPTCHA di banyak tempat

CATATAN. token reCAPTCHA kedaluwarsa setiap dua menit. Itulah sebabnya, kita perlu membuat token ini hanya setelah pengguna mengklik tombol kirim dan sebelum kita membuat permintaan Ajax.

Ini melengkapi integrasi sisi klien

Integrasi Sisi Server

Setelah kami memvalidasi data (Nama, Email, dan Pesan) di sisi server, kami perlu mengambil skor dari Google untuk memverifikasi apakah itu interaksi manusia atau tidak. Di dalam blok

_5, tambahkan kode di bawah ini untuk membuat permintaan API untuk mendapatkan skor

// Build POST request to get the reCAPTCHA v3 score from Google
$recaptcha_url = 'https://www.google.com/recaptcha/api/siteverify';
$recaptcha_secret = 'YOUR_SECRET_KEY_HERE'; // Insert your secret key here
$recaptcha_response = $_POST['recaptcha_response'];

// Make the POST request
$recaptcha = file_get_contents($recaptcha_url . '?secret=' . $recaptcha_secret . '&response=' . $recaptcha_response);

PENTING. Ganti YOUR_SECRET_KEY_HERE dengan kunci rahasia yang Anda salin tadi. Kunci rahasia hanya untuk sisi server

Respons yang diterima adalah objek JSON

{
"kesuksesan". BENAR. false, // apakah permintaan ini merupakan token reCAPTCHA yang valid untuk situs Anda
"skor". nomor // skor untuk permintaan ini (0. 0 – 1. 0)
"tindakan". string // nama tindakan untuk permintaan ini (penting untuk diverifikasi)
"tantangan_ts". stempel waktu, // stempel waktu pemuatan tantangan (format ISO yyyy-MM-dd’T’HH. mm. ssZZ)
"nama host". string, // nama host situs tempat reCAPTCHA dipecahkan
"kode kesalahan". […] // opsional
}

 

Mari dekode objek JSON

6 dan periksa

7,

8 dan

9. Skor bervariasi dari 0. 0 sampai 1. 0. Secara default, Anda dapat menggunakan ambang 0. 5

$recaptcha = json_decode($recaptcha);
// Take action based on the score returned
if ($recaptcha->success == true && $recaptcha->score >= 0.5 && $recaptcha->action == 'contact') {
   // This is a human. Insert the message into database OR send a mail
   $success_output = "Your message sent successfully";
} else {
   // Score less than 0.5 indicates suspicious activity. Return an error
   $error_output = "Something went wrong. Please try again later";
}

 

Anda sudah siap. Tekan tombol Kirim itu, dan jika Anda mengintegrasikan semuanya dengan benar, Anda akan melihat respons bahwa pesan Anda berhasil dikirim

Tip bonus

Setelah Anda menambahkan API javascript, Anda mungkin melihat lencana reCAPTCHA yang mengganggu di sudut kanan bawah halaman Anda yang terlihat seperti ini

Ini mungkin tidak cocok dengan desain situs web Anda. Tebak apa?

This site is protected by reCAPTCHA and the Google
   Privacy Policy and
   Terms of Service apply.

 

Jadi tambahkan ini di dalam elemen

_0 di bawah tombol "Kirim" Anda

Sekarang, untuk benar-benar menyembunyikan lencana, cukup tambahkan ini ke dalam CSS Anda

_0

 

Selamat. Anda telah berhasil menyiapkan Google reCAPTCHA v3 ke dalam formulir Anda. Sekarang Anda hanya akan menerima pesan dari manusia – tanpa mereka harus menghadapi tantangan Captcha DAN tanpa meninggalkan halaman

Apa itu reCAPTCHA dalam HTML?

Bagaimana cara menambahkan reCAPTCHA ke formulir web?

Bagaimana cara mengintegrasikan reCAPTCHA v3 di PHP?

Bagaimana cara membuat Google reCAPTCHA v3?