Cara Menambahkan CAPTCHA ke Login WooCommerce

Apakah Anda ingin menambahkan lapisan keamanan ekstra ke toko online Anda? Anda telah datang ke tempat yang tepat. Pada artikel ini, kami akan menunjukkan kepada Anda berbagai metode untuk menambahkan CAPTCHA ke login WooCommerce dan mengonfigurasinya dengan cara yang benar.

Apa itu CAPTCHA?

CAPTCHA (Tes Turing Publik Sepenuhnya Otomatis untuk Membedakan Komputer dan Manusia) adalah teknik modern yang digunakan untuk menambahkan verifikasi pengguna ke situs web atau aplikasi seluler apa pun. Dengan kata lain, CAPTCHA digunakan untuk membedakan manusia asli dari bot untuk membuat situs Anda lebih aman. CAPTCHA menciptakan tantangan sederhana dan menampilkannya di ujung depan, dan pengguna harus menyelesaikannya untuk mengakses situs. Karena bot tidak dapat memecahkan CAPTCHA, Anda dapat memfilter lalu lintas yang tidak diinginkan dan mencegah bot memasuki situs web Anda.

Jadi jika Anda ingin menjauhkan bot dari login, pendaftaran, dan halaman penting lainnya, menambahkan CAPTCHA adalah pilihan yang baik.

Penyedia CDN seperti Cloudflare juga menyertakan teknologi ini dan memungkinkan Anda menambahkan lapisan keamanan ke situs web Anda.

Jenis CAPTCHA

Sekarang mari kita lihat berbagai jenis CAPTCHA dan cara kerjanya.

1) Teks CAPTCHA

Untuk mengakses halaman tertentu atau melakukan tugas seperti mengirimkan formulir, pengunjung harus memasukkan teks yang ditampilkan pada gambar ke dalam kotak kirim. Jika mereka memasukkan teks dengan benar, mereka akan diarahkan ke halaman berikutnya. Tetapi jika teksnya tidak akurat, sistem akan secara otomatis menghasilkan teks CAPTCHA lain yang harus dimasukkan pengguna.

2) Gambar CAPTCHA

Ini adalah jenis CAPTCHA yang paling umum dan banyak digunakan. Pengguna harus memilih kotak gambar yang tepat tergantung pada persyaratan untuk memverifikasi bahwa mereka bukan robot. Jika gambar atau petunjuk tidak jelas, pengunjung dapat melewati CAPTCHA dan mendapatkan yang baru.

3) Audio CAPTCHA

Saat Anda menggunakan CAPTCHA audio, pengunjung situs web Anda harus mendengarkan file audio tertentu dan memasukkan kata/angka yang mereka dengar di kotak kirim. Ini lebih aman daripada gambar atau teks CAPTCHA tetapi tidak biasa seperti jenis lainnya.

4) Matematika CAPTCHA

Yang ini mungkin salah satu jenis CAPTCHA yang paling menantang dalam daftar ini. Saat Anda mengonfigurasi CAPTCHA matematika di situs Anda, pengguna perlu menyelesaikan perhitungan untuk mengakses halaman tertentu atau melakukan tindakan tertentu. Seringkali, perhitungannya mudah tetapi pengunjung juga dapat menyegarkan CAPTCHA untuk mendapatkan yang baru.

Mengapa Menambahkan Captcha ke Login di WooCommerce?

Jika Anda ingin melindungi toko Anda dari pendaftaran spam dan bot, Anda harus menambahkan CAPTCHA ke login WooCommerce Anda. Halaman login dan formulir kontak adalah beberapa halaman yang paling banyak ditargetkan oleh peretas. Itu sebabnya menggunakan formulir login WordPress default tidak disarankan.

Seperti yang Anda lihat, tidak ada lapisan keamanan tambahan di sana. Dengan menggunakan kredensial akun yang tepat, siapa pun dapat mengakses akun tersebut. Peretas menggunakan perangkat lunak yang mencoba berbagai kombinasi nama pengguna dan kata sandi hingga mereka menemukan kombinasi yang tepat. Kami telah melihat cara menyesuaikan halaman login WordPress untuk menghindari hal ini, tetapi Anda juga harus menambahkan lapisan keamanan lain.

Menambahkan CAPTCHA ke halaman login WooCommerce adalah cara terbaik untuk membuat situs Anda lebih aman dan melindungi situs web mereka dari peretas. Peretas sering menggunakan perangkat lunak untuk memaksa halaman login dan mengakses situs. Namun, jika Anda menambahkan kotak verifikasi CAPTCHA ke halaman masuk, perangkat lunak tidak akan dapat menyelesaikan operasi.

Setelah menambahkan CAPTCHA, formulir login Anda akan terlihat seperti ini:

Meskipun pengguna telah memasukkan kredensial login yang benar, mereka harus menyelesaikan CAPTCHA sebelum masuk ke dasbor akun.

Sekarang setelah Anda tahu mengapa Anda perlu menambahkan CAPTCHA ke login WooCommerce, mari pelajari cara melakukannya dan mencegah spam.

Cara Menambahkan CAPTCHA ke Login WooCommerce

Ada dua cara untuk menambahkan CAPTCHA ke WooCommerce:

1. Menggunakan plugin
2. Secara terprogram

Mari kita lihat masing-masing metode, sehingga Anda dapat memilih yang terbaik untuk Anda.

1) Tambahkan CAPTCHA menggunakan Plugin

Ada beberapa plugin yang dapat Anda gunakan untuk menambahkan CAPTCHA ke situs Anda. Di bagian ini, kita akan fokus pada dua alat:

• reCaptcha oleh BestWebSoft
• NoCAPTCHA & reCAPTCHA tingkat lanjut

1.1) reCaptcha oleh BestWebSoft

reCaptcha oleh BestWebSoft adalah salah satu plugin CAPTCHA gratis paling populer yang tersedia di pasar. Mari kita lihat cara mengaturnya.

1.1.1) Instalasi dan Aktivasi

Pertama, masuk ke situs WordPress Anda dan buka Plugin > Add New . Kemudian, cari reCaptcha by BestWebSoft, tekan Install Now, dan aktifkan.

1.1.2) Konfigurasi

Setelah Anda mengaktifkan plugin, buka konsol admin Google reCAPTCHA dan selesaikan pendaftaran. Untuk mendaftar ke situs web baru, Anda harus memasukkan:

• Label
• jenis reCAPTCHA
• Domain
• Pemilik

Setelah mengisi informasi yang diperlukan, kirimkan formulir.

Dalam kasus kami, kami telah memilih reCAPTCHA v2, yang merupakan jenis reCAPTCHA paling sederhana yang tersedia dalam daftar.

Ada 3 pilihan yang bisa Anda pilih. Kami menyarankan untuk memilih kotak centang I'm not a robot yang merupakan validasi paling umum.

Setelah Anda mengirimkan formulir, platform akan menampilkan dua kunci di layar: kunci situs dan kunci rahasia.

Salin dan letakkan di tempat yang praktis karena Anda akan menggunakannya dalam satu menit.

Sekarang kembali ke dashboard WordPress Anda dan pergi ke pengaturan reCAPTCHA .

Tempelkan kunci dan sebelum menekan tombol kirim, pastikan Anda telah memilih versi yang sama yang Anda pilih sebelumnya.

Kemudian, gulir ke bagian bawah halaman dan Anda akan melihat beberapa halaman default WordPress. Pilih halaman yang ingin Anda tambahkan CAPTCHA. Untuk demonstrasi ini, kita akan memilih halaman login, tetapi Anda juga dapat memilih lebih banyak halaman. Anda juga dapat menyembunyikan CAPTCHA untuk peran pengguna tertentu.

Setelah itu, simpan pengaturan dan hanya itu!

1.3) Pengujian

Untuk memverifikasi bahwa semuanya berfungsi dengan benar, buka halaman login Anda menggunakan jendela penyamaran dan Anda akan melihat kotak CAPTCHA di bawah bidang kata sandi.

Jika Anda tidak dapat melihat kotak centang di bagian depan, itu karena Anda telah memasukkan kunci yang salah atau memilih jenis reCAPTCHA yang salah. Kembali ke pengaturan dan periksa kembali opsi plugin.

Ini adalah bagaimana Anda dapat menambahkan CAPTCHA ke halaman login WordPress default. Jika Anda menggunakan halaman login WordPress default sebagai halaman login WooCommerce, ini adalah opsi yang bagus. Namun, jika Anda menggunakan halaman khusus yang dibuat oleh WooCommerce, Anda harus menggunakan versi premium dari plugin ini.

Saat ini, versi gratis reCAPTCHA tidak dilengkapi dengan integrasi WooCommerce. Namun, versi premium akan membuka kunci integrasi yang lebih kuat dan fungsionalitas yang lebih canggih dengan biaya 21 USD per tahun.

Setelah membelinya, Anda perlu memverifikasi kunci lisensi dan kemudian menambahkan opsi reCAPTCHA ke bidang login, pendaftaran, atau pengaturan ulang kata sandi WooCommerce.

Jika Anda ingin menambahkan bidang CAPTCHA ke halaman login WooCommerce tanpa membayar apa pun, kami punya plugin lain untuk Anda.

1.2) NoCAPTCHA & reCAPTCHA tingkat lanjut (V2 & V3)

NoCAPTCHA & reCAPTCHA tingkat lanjut adalah plugin gratis yang luar biasa untuk menambahkan CAPTCHA ke situs Anda dengan mudah. Mari kita lihat cara mengonfigurasinya untuk melindungi situs Anda.

1.2.1) Instalasi dan Aktivasi

Seperti biasa, hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin di situs web Anda. Buka Plugins > Add New, cari plugin, dan instal.

Setelah mengaktifkan alat, Anda akan melihat pengaturan plugin di bawah bagian Pengaturan .

1.2.2) Konfigurasi

Konfigurasi alat ini minimal. Buka konsol admin Google reCAPTCHA dan selesaikan pendaftaran. Ingatlah untuk memilih jenis CAPTCHA yang Anda inginkan dan salin kunci situs dan kunci rahasia.

Kemudian, pilih jenis reCAPTCHA dan tempel kunci situs dan kunci rahasia Anda di bidang yang sesuai.

Setelah itu, pilih formulir yang ingin Anda lindungi dengan reCAPTCHA. Dalam hal ini, kami akan memilih formulir login dan pendaftaran kami. Setelah itu, simpan perubahannya.

1.2.3) Pengujian

Setelah itu, saatnya untuk memeriksa halaman login WooCommerce Anda. Buka halaman login di jendela penyamaran dan Anda akan melihat kotak reCAPTCHA di sana.

Itu dia! Ini adalah bagaimana Anda dapat dengan mudah menambahkan bidang CAPTCHA ke halaman login WooCommerce Anda. Tetapi bagaimana jika Anda tidak ingin menggunakan alat pihak ketiga untuk ini? Anda juga dapat melakukannya dengan sedikit kode.

2) Tambahkan CAPTCHA Secara Terprogram

Jika Anda memiliki beberapa keterampilan pengkodean, Anda dapat menambahkan CAPTCHA ke halaman login WooCommerce Anda menggunakan potongan PHP. Di bagian ini, kami akan menunjukkan kepada Anda bagaimana Anda dapat menyertakan kotak Google reCAPTCHA di layar login.

Karena kami akan mengedit file functions.php tema, sebelum memulai, Anda harus membuat cadangan lengkap situs Anda. Selain itu, kami menyarankan Anda membuat tema anak jika Anda belum melakukannya.

Untuk tutorial ini, alih-alih menempelkan kode langsung ke file functions.php , kita akan menggunakan plugin Cuplikan Kode. Ini adalah alat khusus situs yang digunakan oleh ribuan blogger dan pengembang untuk mempermudah proses pengeditan file inti.

Instalasi dan Aktivasi

Pertama, instal dan aktifkan Cuplikan Kode di situs Anda seperti yang ditunjukkan di bawah ini.

Setelah mengaktifkan plugin, Anda akan melihat pengaturannya di sisi kiri.

Konfigurasi

Klik Tambahkan Baru, beri nama cuplikan, dan rekatkan kode berikut:

 add_action('wp_head',function(){echo '<script src="https://www.google.com/recaptcha/api.js" async defer></script>';});
 add_action('woocommerce_login_form','add_recaptcha_to_login_form');
 fungsi add_recaptcha_to_login_form() {
 echo '<div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div>';
 } { ?>
 <div class="g-recaptcha" data-sitekey="YOUR_PUBLIC_KEY"></div> <p>ACA el captcha</p>
 <?php
 }
 add_action("form_login", "tampilan_login_captcha" );
 fungsi verifikasi_login_captcha($pengguna, $sandi) {
 if (isset($_POST['g-recaptcha-response'])) {
 $recaptcha_secret = 'KUNCI_RAHASIA_ANDA';
 $response = wp_remote_get("https://www.google.com/recaptcha/api/siteverify?secret=". $recaptcha_secret ."&response=". $_POST['g-recaptcha-response']);
 $respons = json_decode($response["body"], benar);
 if (benar == $response["sukses"]) {
 kembalikan $pengguna;
 } kalau tidak {
 return new WP_Error("Captcha Tidak Valid", __("<strong>ERROR</strong>: Anda adalah bot"));
 }
 } kalau tidak {
 return new WP_Error("Captcha Invalid", __("<strong>ERROR</strong>: Anda adalah bot. Jika tidak, aktifkan JavaScript"));
 }
 }
 add_filter("wp_authenticate_user", "verify_login_captcha", 10, 2); 

Pastikan untuk menempelkan kunci situs dan kunci rahasia Anda di cuplikan yang bertuliskan YOUR_PUBLIC_KEY dan YOUR_SECRET_KEY . Setelah Anda selesai melakukannya, simpan perubahan dan aktifkan cuplikan.

Pengujian

Sekarang, Anda perlu memeriksa halaman login WooCommerce Anda dari jendela penyamaran. Anda akan melihat kotak reCAPTCHA di sana.

Itu dia! Ini adalah bagaimana Anda dapat menambahkan CAPTCHA ke halaman login WooCommerce menggunakan sedikit kode.

Bonus: Cara Menyesuaikan Halaman Login

Saat menjalankan toko WooCommerce, adalah praktik yang baik untuk menyesuaikan halaman login Anda. Itu tidak hanya akan membedakan dari pesaing Anda tetapi juga membuat situs Anda lebih aman. Di bagian ini, kami akan menunjukkan cara mengedit halaman login Anda tanpa menulis satu baris kode pun untuk memberikan pengalaman yang lebih baik kepada pengguna dan menjaga keamanan toko Anda.

Ada banyak plugin untuk menyesuaikan halaman login. Dalam tutorial ini, kita akan menggunakan Custom Login Page Customizer, alat gratis yang dapat Anda unduh dari repositori plugin WordPress.

Hal pertama yang perlu Anda lakukan adalah menginstal dan mengaktifkan plugin di situs web Anda. Buka Plugins > Add New , cari Custom Login Page Customizer, dan instal.

Setelah aktivasi, Anda akan melihat opsi Customizer di sisi kiri di bawah Login Customizer .

Setelah Anda mengaksesnya, Anda akan melihat penyesuai WordPress. Plugin ini dilengkapi dengan beberapa template bawaan yang dapat Anda gunakan untuk membuat hidup Anda lebih mudah dan menghemat waktu.

Dengan plugin ini, Anda dapat menyesuaikan latar belakang, logo, formulir, bidang, dan tombol situs Anda. Selain itu, Anda juga dapat menyertakan skrip kode khusus dari bagian CSS & JavaScript Kustom .

Setelah Anda puas dengan kustomisasi Anda, ingatlah untuk menyimpan perubahan. Itu dia! Sekarang pengunjung situs web Anda akan melihat halaman login yang baru dirancang di bagian depan.

Untuk informasi lebih lanjut tentang ini, lihat panduan kami tentang cara menyesuaikan halaman login di WordPress. Selain itu, kami sarankan Anda juga melihat tutorial kami untuk mengubah URL login.

Kesimpulan

Secara keseluruhan, menjaga keamanan halaman login Anda sangat penting. Dengan menggunakan CAPTCHA di halaman login Anda, Anda membuat situs Anda lebih aman dan mencegah pengguna yang tidak berwenang seperti bot mengakses dasbor Anda.

Dalam panduan ini, kita telah melihat cara menambahkan CAPTCHA ke halaman login WooCommerce menggunakan plugin dan dengan sedikit kode. Yang mana yang harus Anda gunakan? Tergantung. Kedua metode akan menyelesaikan pekerjaan, jadi itu tergantung pada keterampilan dan kebutuhan Anda. Jika Anda mencari solusi yang mudah, Anda dapat menggunakan plugin. Di sisi lain, jika Anda memiliki keterampilan pemrograman dan tidak suka menginstal terlalu banyak plugin, Anda dapat menambahkan cuplikan kode yang disediakan dalam tutorial ini.

Jika Anda mencari lebih banyak tutorial khusus WooCommerce, lihat artikel ini:

• Cara mengubah URL halaman login WordPress
• Login WordPress tidak berfungsi? Bagaimana memperbaikinya
• Cara menyesuaikan Halaman Login di WordPress

Apakah Anda merasa artikel ini bermanfaat? Jika ya, bagikan artikel ini dengan teman-teman Anda di media sosial untuk membantu mereka melindungi situs mereka.