Hentikan bot dengan Google Recaptcha

Keeping Bots Selalu adalah permainan angka - Sayangnya, ketersediaan pustaka pembelajaran mesin yang mudah digunakan membuat banyak jenis captcha klasik sederhana. Google berdiri di garis depan bekas botting - setelah semua, sesuatu hanya ada jika dapat ditemukan (dengan jelas) dalam indeks Big G.

Karena ini, insinyur Google mencurahkan sejumlah besar upaya untuk merancang sistem dan solusi anti-bot. Mereka tersedia untuk pihak ketiga melalui produk yang disebut Recaptcha, yang akan kita bahas selama langkah-langkah berikut. Untuk lebih banyak alat yang tidak terkait dengan bot, lihat Alat Desain Web. pos.

Namun, sebelum memulai, beberapa hal dasar harus dibersihkan. Pertama-tama: Keeping Bots selalu merupakan game sisi server. Memeriksa nilai pengembalian ukuran anti-bot Anda pada klien adalah idiot. Seorang penyerang dapat menganalisis kode sumber atau cukup mengatasinya dengan menambal validasi pengembalian.

Sekelompok, perlu diingat bahwa tidak semua bot diciptakan sama. Mengunci Googlebot, misalnya, mengarah ke situs web Anda tidak diindeks lagi. Masalah serupa dapat terjadi dengan bot spesifik industri lainnya yang sering lebih baik daripada bahaya. Akhirnya, bot mungkin merupakan kejahatan yang lebih rendah dalam beberapa kasus - ketika lalu lintas yang Anda butuhkan, sebot klik ternyata hanya satu klik.

• 8 Google Apis luar biasa (dan cara menggunakannya)

01. Mendaftar saja!

Google menyimpan lebih dekat pada pengguna Recaptcha. Kepala di sini dan gunakan akun google Anda untuk masuk. Tambahkan "localhost" selain domain favorit Anda di bawah domain. Pilih jenis kotak centang "Saya bukan robot" karena ini adalah ukuran anti-bot yang paling terkenal.

02. Simpan situs dan kunci server

Google memberi kembali kegigihan dalam bekerja melalui proses pengaturan dengan menampilkan server dan kunci situs. Sementara yang terakhir dapat dibagikan dengan pihak ketiga, memastikan bahwa kunci rahasia tidak pernah meninggalkan batas-batas lingkungan server Anda.

03. Memahami verifikasi situs

Google menggunakan variasi proses respons tantangan untuk memastikan integritas hasil. CAPTCHA Instance mengembalikan nilai kriptografi yang dimasukkan server untuk "Mengaktifkan" ke sistem verifikasi yang dihosting oleh Big G - jika hasilnya menjadi valid, respons HTTP yang benar dikembalikan ke logika back-end Anda.

04. Atur Express.js

Penting untuk menunjukkan solusi turn-key yang menunjukkan seluruh aliran otentikasi. Karena ini, kita perlu memulai dengan "server" macam - ekspres JS adalah topik yang sering terjadi baru-baru ini, jadi gunakan untuk kerangka proyek yang baru dibuat.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / NodeVerify $
npm init --y.
Menulis ke /home/tamhan/nodespace/nodeverify/package.json:
  . . .
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / NodeVerify $
NPM Instal Body-Parser Express Request --save
. . .
+ [email protected].
+ [email protected].
+ [email protected] 

05. Bersiaplah untuk melayani

Memuat kotak centang "Saya Bukan Robot" yang terkenal membutuhkan file HTML. Mengingat bahwa ini adalah sampel yang menunjukkan aliran interaksi, mulai dengan dokumen statis yang berisi mark-up yang ditampilkan menyertai langkah ini.

 & lt; html & gt;
& lt; head & gt;
& lt; judul & gt; Demo Recaptcha: Halaman Sederhana
& lt; / judul & gt;
& lt; script src = "https://www.google.com/recaptcha/api.js" async defer & gt; & lt; / script & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; bentuk tindakan = "?" Metode = "Posting" & gt;
& lt; div class = "g-recaptcha" data-SiteKey = "your_site_key" & gt; & lt; / gt;
& lt; br / & gt;
& lt; input type = "Kirim" nilai = "Kirim" & gt;
& lt; / form & gt;
& lt; / body & gt;
& lt; / html & gt; 

06. Memahami dan menguji

Google menyediakan file API yang berisi logika CAPTCHA. Ketika API.js dimuat, kode yang terkandung di dalamnya menganalisis DOM dan menggantikan & lt; div & gt; Tag yang berisi tag kelas yang benar. & lt; kirim & gt; Tag dibiarkan sendirian pada tulisan ini. Either way, jalankan kode dalam browser pilihan untuk melihat hasil yang ditunjukkan di atas.

07. Muat beberapa elemen

Membuat rantai pengiriman di Express.js membutuhkan sedikit kecerdasan. Satu pembantu yang sangat berguna adalah bodyparser. Ketika tertanam dalam alur kerja rendering, masing-masing bidang yang dikembalikan dari server dapat diakses menggunakan pola desain berorientasi objek yang sangat menyederhanakan menangani mereka.

 var express = membutuhkan ("ekspres");
var bodyparser = membutuhkan ("parser body");
var request = memerlukan ("permintaan");

var myapp = express ();

myapp.use (bodyparser.json ());
myApp.use (bodyparser.urlencoded ({extended: true})); 

08. Bersiaplah untuk memverifikasi ...

Kotak centang Google melakukan keajaiban di latar belakang - ketika dilakukan, bidang baru disebut G-Recaptcha-Response ditambahkan ke atribut formulir. Data ini harus dikirim ke server Google untuk verifikasi. String panjang dalam kode yang menyertai langkah ini akan diganti dengan yang diberikan Google kepada Anda.

 myapp.post ("/ tamstest", fungsi (permintaan, respons) {
var reCAPTCHA_URL = "https://www.google.com/recaptcha/api/siteVerify?";
reCAPTCHA_URL + = "Secret = 6LEWMZGUAAAAIRAIRSB2GV5AKKX2CWYFULKZRMD7WS & AMP;";
reCAPTCHA_URL + = "Response =" + permintaan. Bodi ["G-Recaptcha-respons"] + "& amp;";
reCAPTCHA_URL + = "remoteip =" + permintaan.Connection.RemoteadDress; 

09. ... dan bertanya di server Google

Tindakan selanjutnya melibatkan menembakkan URL ke server. Ini dicapai melalui permintaan json tradisional berdasarkan alamat yang dibuat pada langkah sebelumnya. Hasilnya kemudian dianalisis - jika kesalahan dilemparkan, kegagalan akan dikembalikan ke aplikasi sisi klien.

 Permintaan (reCAPTCHA_URL, Fungsi (Kesalahan,
resp, tubuh) {
tubuh = json.parse (tubuh);
Jika (body.success! == tidak ditentukan & amp; & amp;! tubuh.
sukses) {
Return Response.Send ({"Pesan":
"Validasi CAPTCHA gagal"});
}
Response.Header ("tipe konten",
"Aplikasi / JSON"). Kirim (Tubuh);
});
}); 

10. Lepas

Server HTTP Express.js perlu dilepaskan. Ini terbaik dilakukan dengan menggunakan struktur aplikasi. Perlu diingat bahwa port dengan angka yang lebih kecil dari 1024 dibatasi untuk pengguna root pada sistem operasi unixoid - 3000 karena itu merupakan taruhan yang aman.

 var server = MyApp.Listen (3000, Fungsi () {
konsol.log ("mendengarkan" + server.
alamat (). port);
}); 

11. Sesuaikan formulir

Akhirnya, formulir kami perlu dihubungi dengan server lokal yang berjalan di dalam node.js. Ini paling baik dicapai dengan menyesuaikan string aksi - pastikan untuk mengarahkan target ke domain yang valid, terutama jika Anda tidak menggunakan server Express.js lokal.

 & lt; body & gt;
& lt; form action = "http: // localhost: 3000 / tamstest" Metode = "post" & gt;
& lt; div class = "g-recaptcha" Data-SiteKey = "6Lewmzguaaaaaeepswpvp6hlulnjxa_scwtwhyhge" & gt; / lt; / gt;
& lt; br / & gt; 

12. Membawanya!

Menguji sistem client-server kami membutuhkan dua server karena verifikasi asal Google. Untungnya, Python menyediakan server HTTP cepat - gunakan untuk menyediakan index.htm, sedangkan express.js terdaftar untuk melakukan verifikasi respons yang dikembalikan.

 Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / NodeVerify $
node index.js.
Mendengarkan pada 3000.
Tamhan @ Tamhan-ThinkPad: ~ / Nodespace / NodeVerify $
python3 -m http.server.
Menyajikan HTTP pada 0.0.0.0 port 8000 ... 

13. Lakukan lari kering

Saat berlari, periksa kotak centang dan penuhi tantangan Big G mungkin akan melemparkan Anda. Server biasanya tidak menuntut banyak dalam hal verifikasi, dan hasil untuk menampilkan konten yang ditunjukkan di atas.

14. Nonaktifkan tombol Kirim

Contoh Google mengabaikan tombol kirim sisi klien sebagai penyerang selalu dapat membuatnya muncul kembali dengan beberapa Javascript. Sambil menonaktifkan knob kirim sehubungan dengan CAPTCHA tidak meningkatkan keamanan, itu memang memiliki efek positif pada kegunaan. Mari kita mulai dengan menonaktifkan tombol setelah start-up.

& lt; form action = "http: // localhost: 3000 / tamstest" Metode = "post" & gt;
& lt; div class = "g-recaptcha" Data-SiteKey = "6Lewmzguaaaaaeepswpvp6hlulnjxa_scwtwhyhge" & gt; / lt; / gt;
& lt; br / & gt;
& lt; input type = "Kirim" nilai = "Kirim" Dinonaktifkan & GT;
& lt; / form & gt; 

15. Menangani Acara CAPTCHA

Selanjutnya, pawang event harus ditambahkan. Google Captcha API akan memohonnya setiap kali pengguna mengeluarkan upaya verifikasi dari sudut pandang sisi kliennya.

 & lt; html & gt;
& lt; head & gt; . . .
& lt; script & gt;
Fungsi OnDCFired (Nilai) {
konsol.log (nilai);
}
& lt; / skrip & gt;
& lt; / head & gt;
& lt; tubuh & gt;
& lt; form form = "http: // localhost: 3000 /
Tamstest "Method =" Post "& gt;
& lt; div class = "g-recaptcha" data-siteKey = "6Lewmzguaaaaaepswpvp6hlulnjxa_scwtwhyhge" data-callback =
"Ondcfired" & gt; & lt; / div & gt; 

16. Excursion: Rendering CAPTCHA Dinamis

Google tidak membatasi pengembang untuk memunculkan elemen-elemen RECAPTCHA selama beban halaman. Itu memberikan() Metode yang ditemukan di Recaptcha API memungkinkan Anda menunjuk satu atau lebih & lt; div & gt; Tag di situs web yang harus diubah menjadi widget Recaptcha.

 var mycallback = fungsi (val) {konsol.
log (val); };
grecaptcha.render (
dokumen.getElementsByid ('My-ID'),
{
CALLBACK: MyCallback,
SiteKey: MySitey.
}); 

17. Aktifkan tombol jika perlu ...

Dengan itu, satu masalah utama tetap ada. Tombol Kirim harus diaktifkan kembali ketika acara klik yang disediakan oleh Recaptcha tiba di kode aplikasi kami. Memuat jQuery ke dalam contoh sederhana seperti itu tidak perlu, jadi jatuh kembali ke JavaScript biasa saja.

 & lt; script & gt;
Fungsi OnDCFired (Nilai) {
DOKUMEN.GETELEMENTBYID.
("Tombol"). Dinonaktifkan = false;
}
& lt; / script & gt; 

 & lt; input type = "Kirim" id = "tombol"
Nilai = "Kirim" Dinonaktifkan & GT; 

18. ... dan bersihkan setelah kami

Google tidak dapat menyimpan data respons tantangan selamanya. Karena itu, verifikasi kali cukup cepat - secara default, program kami tidak mencari tahu tentang itu. Untungnya, API berisi bidang tambahan yang dapat digunakan untuk memberi tahu.

 Fungsi Ondcexpired (Nilai) {
dokumen.getelementbyid ("tombol").
Dinonaktifkan = Benar;
} 

 & lt; div class = "g-recaptcha" data-siteKey = "6Lewmzguaaaaaeepswpvp6hlulnjxa_scwtwhyhge"
Data-Callback = "OnDCFired" Data-Expired-Callback = "OndCexpired" & GT; & lt; / div & gt; 

19. Gunakan atribut tambahan

Kepala di sini Untuk menemukan daftar properti yang termasuk dalam API Javascript. Mereka membiarkan Anda menyesuaikan berbagai perilaku - misalnya, widget Recaptcha juga dapat diberikan dalam skema warna yang ramah malam!

20. Bekerja secara transparan ...

Google baru-baru ini memperkenalkan versi ketiga dari API RECAPTCHA yang tidak memerlukan interaksi pengguna eksplisit. Sebagai gantinya, Anda cukup memuatnya selama inisialisasi halaman - kode secara otomatis memonitor perilaku pengguna yang menjalankan liar di situs web.

 & lt; script src = "https://www.google.com/recaptcha/api.js?render=recaptcha_site_key" & gt; & script & gt;
& lt; script & gt;
grecaptcha.ready (fungsi () {
grecaptcha.execute ('recaptcha_site_key',
{Action: 'Homepage'}).
lalu (fungsi (token) {
...
});
});
& lt; / script & gt; 

21. ... dan berikan informasi tambahan

Keuntungan plug-in dari data lebih lanjut tentang tindakan yang sedang dilakukan di situs web. Cuplikan yang menyertai langkah ini akan mengumumkan bahwa pengguna saat ini mengunjungi beranda Anda. Informasi lebih lanjut tentang API dapat ditemukan dalam dokumentasi.

 & lt; script & gt;
grecaptcha.ready (fungsi () {
grecaptcha.execute ('recaptcha_site_key',
{Action: 'Homepage'});
});
& lt; / script & gt; 

Bergabunglah dengan kami di Rich Mix, Shoreditch pada 26 September untuk menghasilkan CSS, sebuah konferensi yang dipesan lebih dahulu untuk desainer web yang dibawa kepada Anda oleh Kreatif Bloq, Net, dan Desainer Web. Pesan tiket burung awal Anda sebelum 15 Agustus di www.generateeconf.com. .

Artikel ini awalnya diterbitkan dalam edisi 287 dari Majalah Desain Web Kreatif Desainer web . Beli masalah 287 di sini atau berlangganan desainer web di sini .

Artikel terkait:

• 8 Rahasia Keamanan WordPress Esensial
• Bagaimana Codepen membuat dirinya aman
• 9 Tips Keamanan Untuk Melindungi Situs Web Anda Dari Peretas