CAPTCHA standar tidak berguna, bot melewatinya "sekaligus", dan menimbulkan masalah bagi pengguna.
Solusi terbaik adalah menggunakan Google reCAPTCHA v2 atau v3. Kedua versi Google reCAPTCHA adalah opsi yang bagus. Ini adalah yang terbaik yang sekarang tersedia di pasar dari solusi yang jelas dan andal serta gratis.
Masalah utama dengan kedua versi tersebut adalah saat terhubung, skor PageSpeed Insight berkurang secara signifikan sebesar 20-30.
Contoh ReCAPTCHA v2 - membutuhkan gambar menebak
 |
Contoh reCAPTCHA v3 - tidak memerlukan tindakan dari pengguna, menganalisis perilakunya di latar belakang
  |
Poin penting bagi saya bukanlah membuat masalah bagi pengguna nyata, karena Saya sendiri bukan penggemar berat menebak kendaraan di reCAPTCHA v2, jadi pilihan saya adalah v3.
Jadi ada dua masalah Google reCAPTCHA v3 yang perlu ditangani:
- menggantung logo di pojok kanan bawah;
- kehilangan 20-30 poin di Google PageSpeed Insight.
Menggantung logo
Google memungkinkan Anda untuk menghapus logo dengan menyembunyikannya melalui CSS dalam perjanjian lisensinya.
.grecaptcha-badge {
visibility: hidden;
}Sebaliknya, tulis "Privasi dan Persyaratan Layanan reCAPTCHA anti-spam" di bawah setiap formulir dengan link ke halaman Google yang relevan.
|
Kehilangan poin di Google PageSpeed Insight
Saat menghubungkan file javascript dari reCAPTCHA v3, skor di Google PageSpeed Insight sangat berkurang. Ini penting bagi saya. Saya pikir ini karena analisis perilaku pengguna (penurunan serupa terjadi saat menggunakan pelindung web di Yandex.Metrica).
Pada sumber daya yang dioptimalkan dengan baik, Anda bisa kehilangan 20-30 poin. Oleh karena itu, Anda dapat menggunakannya di halaman terpisah di mana kecepatan tidak penting (misalnya, kontak) tanpa modifikasi. Untuk digunakan di seluruh situs (misalnya, untuk melindungi formulir login ujung-ke-ujung atau langganan buletin), disarankan untuk membuat modifikasi.
Saya mendapatkan opsi untuk menginisialisasi reCAPTCHA v3 dengan mengklik kolom formulir. Secara default, saya tidak memuat file javascript dari reCAPTCHA v3, dan hanya jika pengguna menempatkan kursor di salah satu kolom formulir, saya akan memuatnya. Kemungkinan besar, metode ini mengurangi keakuratan penentuan pengguna sebenarnya, tetapi tidak ada masalah. Akurasi ini cukup untuk tugas saya.
Dia mulai menggunakan teknik ini pertama kali pada formulir web 1C-Bitrix, kemudian untuk otorisasi ujung ke ujung dan formulir berlangganan di situs tanpa Bitrix.
Mengingat fakta bahwa 1C-Bitrix adalah CMS publik, saya akan memberi tahu Anda secara umum menggunakan contohnya - tentang metodologi dan kemungkinan kasus penggunaan. Lebih banyak fine tuning dapat dilakukan untuk menyesuaikan dengan kebutuhan Anda.
Menggunakan Google reCAPTCHA v3 dalam formulir web 1C-Bitrix
1. Panggil formulir dengan bitrix standar: komponen formulir dan buat 2 tambahan:
- Ganti tombol type = kirim dengan tombol biasa type = tombol
- tambahkan nama bidang tersembunyi = g_recaptcha_response
|
2. Tambahkan inisialisasi reCAPTCHA saat mengklik kolom formulir ke file javascript situs atau komponen (dalam contoh ini, saya berasumsi bahwa Anda menggunakan jQuery):
$('body').on('click','form input, form textarea', function() {
if (typeof(grecaptcha) == 'undefined') {
var grecaptcha_s = document.createElement('script');
grecaptcha_s.src = 'https://www.google.com/recaptcha/api.js?render=<PUBLIC_KEY>';
var grecaptcha_h = document.getElementsByTagName('script')[0];
grecaptcha_h.parentNode.insertBefore(grecaptcha_s,grecaptcha_h);
}
});3. Tambahkan pelacakan klik pada tombol tombol di formulir. Lebih jauh di dalam, kami menggunakan contoh yang dijelaskan dalam dokumentasi Google. Ini mengisi bidang g_recaptcha_response, yang akan kita gunakan pada langkah terakhir untuk memvalidasi pengguna.
$('body').on('click','form button[name="web_form_submit"]', function() {
grecaptcha.ready(function() {
grecaptcha.execute('<PUBLIC_KEY>',{action: 'feedback'}).then(
function(token) {
$('form input[name="g_recaptcha_response"]').val(token);
var form_obj = $('form');
var event_obj = form_obj.get(0);
BX.fireEvent(event_obj,'submit');
event_obj.submit();
}
);
});
});4. Melacak peristiwa onBeforeResultAdd di init.php
Sebelum mengirimkan hasil formulir, kami mengajukan banding ke server Google dengan <PRIVATE_KEY> Anda, dan nilai dari bidang g_recaptcha_response tersembunyi dari formulir.
Sebagai tanggapan, kami mendapatkan poin dari pengguna ini:
- 1 ini pasti seseorang
- 0 tepatnya robot
- Lebih dari 0,5 dapat dianggap manusia
AddEventHandler("form","onBeforeResultAdd","onBeforeResultAddHandler");
function onBeforeResultAddHandler($WEB_FORM_ID,$arFields,$arrVALUES)
{
global $APPLICATION;
$g_recaptcha_response = $arrVALUES["g_recaptcha_response"];
if (!empty($g_recaptcha_response))
{
$response = json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<PRIVATE_KEY>&response=".$g_recaptcha_response."&remoteip=".$_SERVER["REMOTE_ADDR"]),true);
$g_recaptcha_response_check = false;
if (($response["success"] and $response["score"] >= 0.5 and $response["action"] == 'feedback']))
{
$g_recaptcha_response_check = true;
}
if (!$g_recaptcha_response_check)
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.</a>');
}
}
else
{
$APPLICATION->ThrowException(' Google reCAPTCHA v3.');
}
}Akhirnya
Teknik ini dapat digunakan di situs dan formulir apa pun, apa pun CMSnya. Saya telah memberikan metode kerja umum yang dapat diterapkan dalam proyek Anda.
Anda dapat melakukan hal yang sama dengan Google reCAPTCHA v2, menginisialisasi dengan mengklik formulir dan meminta pengguna untuk mencentang kotak "Saya bukan robot" dan tebak gambar jika perlu. Dalam hal ini, ini juga akan menyimpan poin PageSpeed Insight dan memberikan pengguna alat (pilih gambar) untuk membuktikan bahwa mereka bukan robot. Namun seperti yang saya sampaikan di atas, yang terpenting bagi saya adalah jangan sampai membuat kendala bagi pengguna.