Bagaimana cara mengintegrasikan recaptcha v2 ke dalam formulir html?

Saat Anda perlu menambahkan fitur yang relatif sederhana seperti ini, Anda tidak ingin membaca halaman dan halaman contoh, Anda menginginkan contoh yang dapat Anda terapkan dengan cepat lalu edit sesuai keinginan. Saya tidak menemukan masalah apa pun saat melakukan integrasi, jadi semoga langkah sederhana ini dapat membantu Anda

Langkah 1

Daftar dan dapatkan kunci Anda dari sini. https. // www. google. com/recaptcha/admin (Anda akan mendapatkan kunci RAHASIA dan kunci SITUS, yang akan digunakan nanti Langkah - 3)

Google telah mengumumkan layanan baru untuk mencegah spam dan serangan di situs web Anda. Mereka menamakannya "NO CAPTCHA reCAPTCHA". Google reCAPTCHA dirancang untuk melindungi situs web Anda dari spam dan penyalahgunaan

Dalam tutorial ini, saya akan menunjukkan kepada Anda bagaimana mengintegrasikannya ke situs web Anda. Untuk tujuan demo, saya membuat satu skrip sederhana. Silahkan lihat demonya

Google telah menghentikan penggunaan reCAPTCHA V1. Kami telah memperbarui artikel untuk memenuhi perubahan Google reCAPTCHA V2

Daftarkan situs web Anda dan dapatkan Kunci Rahasia

Hal pertama yang perlu Anda lakukan adalah mendaftarkan situs web Anda di Google recaptcha untuk melakukannya, klik di sini

Masuk ke akun Google Anda dan buat aplikasi dengan mengisi formulir. Pilih reCAPTCHA v2 dan pilih opsi kotak centang "Saya bukan robot".

Setelah mengirimkan, Google akan memberi Anda dua informasi berikut

• Kunci situs
• Kunci rahasia

Integrasikan Google reCAPTCHA di situs web Anda

Untuk mengintegrasikannya ke situs web Anda, Anda perlu meletakkannya di sisi klien dan juga di sisi Server. Di halaman HTML klien, Anda perlu mengintegrasikan baris ini sebelum tag

Dan untuk menampilkan widget ke dalam formulir Anda, Anda perlu meletakkan formulir kontak di bawah ini, formulir komentar, dll

< div kelas="g-recaptcha" data-sitekey="== Your site Key =="></div>

Saat formulir dikirim ke Server, skrip ini akan mengirim 'g-recaptcha-response' sebagai data POST. Anda perlu memverifikasinya untuk melihat apakah pengguna telah memeriksa Captcha atau belum

Contoh proyek

Berikut adalah kode HTML untuk formulir sederhana dengan kotak komentar dan tombol kirim. Saat mengirimkan formulir ini, kami akan menggunakan PHP di back-end untuk melakukan validasi Google reCAPTCHA

Lihat untuk mempelajari cara menyesuaikan widget Anda. Misalnya, Anda mungkin ingin menentukan bahasa atau tema widget

Lihat Memverifikasi respons pengguna untuk memeriksa apakah pengguna berhasil menyelesaikan CAPTCHA

Render widget reCAPTCHA secara otomatis

Metode termudah untuk merender widget reCAPTCHA di halaman Anda adalah dengan menyertakan sumber daya JavaScript yang diperlukan dan tag g-recaptcha. Tag g-recaptcha adalah elemen DIV dengan nama kelas g-recaptcha dan kunci situs Anda di atribut data-sitekey

Skrip harus dimuat menggunakan protokol HTTPS dan dapat dimasukkan dari titik mana pun di halaman tanpa batasan

Render widget reCAPTCHA secara eksplisit

Menunda render dapat dicapai dengan menentukan fungsi callback onload Anda dan menambahkan parameter ke sumber daya JavaScript

1. Tentukan fungsi callback onload Anda. Fungsi ini akan dipanggil ketika semua dependensi telah dimuat

   _

2. Masukkan sumber daya JavaScript, atur parameter onload ke nama fungsi callback onload Anda dan parameter

   1 ke
   2

   Saat Anda perlu menambahkan fitur baru yang relatif sederhana seperti ini, jika Anda seperti saya, Anda tidak ingin membaca halaman demi halaman dokumentasi; . Saya tidak dapat menemukan hal seperti itu saat melakukan integrasi, jadi semoga 4 langkah sederhana ini dapat membantu Anda

   Harap dicatat, panduan ini berkaitan dengan reCAPTCHA V2

   Perhatikan juga bahwa Anda perlu memahami pemrograman PHP dasar untuk mengikuti panduan ini

   Langkah 1

   Daftar dan dapatkan kunci Anda di sini. https. // www. google. com/recaptcha/admin (Anda akan mendapatkan kunci SITUS dan kunci RAHASIA, digunakan nanti)

   Langkah 2

   Sertakan ini di halaman Anda

   _

   Langkah 3

   Tambahkan yang berikut ke dalam formulir Anda

   _

   Langkah 4

   Pada pengiriman formulir lakukan ini

   $recaptcha = $_POST['g-recaptcha-response'];
   $res = reCaptcha($recaptcha);
   if($res['success']){
     // Send email
   }else{
     // Error
   }

   _

   Menggunakan fungsi berikut

   function reCaptcha($recaptcha){
     $secret = "YOUR SECRET KEY";
     $ip = $_SERVER['REMOTE_ADDR'];
   
     $postvars = array("secret"=>$secret, "response"=>$recaptcha, "remoteip"=>$ip);
     $url = "https://www.google.com/recaptcha/api/siteverify";
     $ch = curl_init();
     curl_setopt($ch, CURLOPT_URL, $url);
     curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
     curl_setopt($ch, CURLOPT_TIMEOUT, 10);
     curl_setopt($ch, CURLOPT_POSTFIELDS, $postvars);
     $data = curl_exec($ch);
     curl_close($ch);
   
     return json_decode($data, true);
   }

   Kode ini bebas digunakan sesuai kebijaksanaan Anda sendiri. Itu datang tanpa jaminan. Jangan ragu untuk memberi umpan balik pada pengeditan apa pun

   Bagaimana cara menambahkan reCAPTCHA v2 di HTML?

   Setelah memiliki akun, Anda perlu menambahkan domain situs web dan mendapatkan kunci situs dan kunci rahasia. .

   Buka halaman "Admin" (klik tombol admin di kanan atas halaman)

   Klik pada simbol + (plus) di bilah atas untuk membuat situs baru

   Tambahkan label, misalnya, tambahkan nama domain Anda

   Pilih jenis reCAPTCHA

   Bagaimana cara menambahkan Captcha ke formulir di HTML?

   Kode CAPTCHA HTML . Elemen ini digunakan untuk menampilkan teks CAPTCHA. - Elemen ini digunakan untuk membuat kotak input untuk mengetik CAPTCHA. : This element is used to display the CAPTCHA text. - This element is used to create an input box to type the CAPTCHA.

   Bagaimana cara mengintegrasikan Google reCAPTCHA v2?

   Untuk mengintegrasikan Google reCAPTCHA v2 di eFront. Kunjungi https. // www. google. com/u/1/recaptcha/admin untuk mendaftarkan situs web Anda . Anda wajib memberi nama pada integrasi Anda di bawah Label (1). Tunggu pesan pop-up konfirmasi.

   Bagaimana Anda menambahkan Google reCAPTCHA v3 ke formulir HTML dan mengirimkannya?

   Metode termudah untuk menggunakan reCAPTCHA v3 di laman Anda adalah menyertakan sumber daya JavaScript yang diperlukan dan menambahkan beberapa atribut ke tombol html Anda . Muat API JavaScript. Tambahkan fungsi panggilan balik untuk menangani token. Tambahkan atribut ke tombol html Anda.