Pembaca seperti Anda membantu mendukung MUO. Saat Anda melakukan pembelian menggunakan tautan di situs kami, kami dapat memperoleh komisi afiliasi. Baca selengkapnya.

Karena aplikasi web dan seluler menjadi lebih populer, demikian juga risiko spam dan aktivitas berbahaya lainnya. CAPTCHA dapat menjadi ukuran keamanan praktis yang layak diintegrasikan untuk mencegah jenis ancaman keamanan ini.

CAPTCHA adalah fitur keamanan minimal, umumnya terintegrasi dengan formulir web untuk mencegah serangan otomatis oleh robot spam. Ini memastikan bahwa pengguna yang mengakses aplikasi memang manusia, dan bukan bot yang mengeksekusi kode berbahaya.

Apa itu CAPTCHA?

Singkatan CAPTCHA adalah singkatan dari Completely Automated Public Turing test to tell Computers and Humans Apart. Ini mengacu pada pengujian yang dihasilkan komputer yang memeriksa untuk menentukan apakah pengguna tertentu yang berinteraksi dengan aplikasi Anda adalah manusia dan bukan bot.

Ada berbagai jenis pengujian CAPTCHA yang dapat Anda integrasikan ke dalam aplikasi Anda seperti CAPTCHA berbasis teks dan berbasis audio. Namun, jenis yang paling populer dan efektif adalah Google reCAPTCHA. Ini memeriksa untuk membedakan antara pengguna nyata dan bot menggunakan algoritme analisis risiko tingkat lanjut.

instagram viewer

Google reCAPTCHA hadir dalam dua versi:

  • reCAPTCHA V3: Versi ini berjalan di latar belakang dan menentukan skor keseluruhan berdasarkan perilaku pengguna.
  • reCAPTCHA V2: Versi ini menempatkan kotak centang "Saya bukan robot" pada formulir autentikasi.

Panduan ini akan menjelajahi Google reCAPTCHA V2. Baca terus untuk mempelajari cara mengintegrasikannya ke dalam aplikasi React.

Daftarkan Aplikasi React di Konsol Admin reCAPTCHA

Untuk memulai, Anda perlu mendaftarkan aplikasi Anda di konsol pengembang reCAPTCHA. Pergilah ke Konsol Admin reCAPTCHA Google, masuk dengan akun Google Anda, dan isi detail formulir yang diperlukan.

Berikan nama label, pilih reCAPTCHA V2, dan pada kotak tarik-turun, pilih permintaan verifikasi menggunakan opsi kotak centang "Saya bukan robot". Terakhir, berikan nama domain aplikasi Anda. Untuk pengembangan lokal, ketik localhost sebagai nama domain.

Setelah mendaftarkan aplikasi Anda, situs akan mengarahkan Anda ke halaman baru dengan rahasia dan kunci situs yang Anda buat.

Buat React Client

Proyek ini dua kali lipat: Anda akan membuat klien React yang merender formulir login sederhana dengan Google reCAPTCHA dan Ekspres backend yang membuat permintaan POST ke API reCAPTCHA untuk memverifikasi token yang dibuat setelah pengguna menyelesaikan reCAPTCHA tantangan.

Buat folder proyek secara lokal untuk menyimpan file proyek Anda. Berikutnya, membuat aplikasi React dan ubah direktori saat ini ke direktori klien. Di direktori root folder klien Anda, buat file .env untuk menyimpan kunci rahasia API dan kunci situs.

REACT_APP_reCAPTCHA_SITE_KEY = 'kunci situs'
REACT_APP_reCAPTCHA_SECRET_KEY = 'kunci rahasia'

Anda dapat menemukan kode proyek ini di dalamnya repositori GitHub.

Instal Paket yang Diperlukan

Instal Axios, Anda akan menggunakan library ini untuk membuat permintaan HTTP dari browser dan React-Google-reCAPTCHA. Paket ini menyediakan implementasi khusus React untuk reCAPTCHA API.

npm install react-recaptcha-google axios --save

Integrasikan Google reCAPTCHA dalam Aplikasi React

Buka file src/App.js, hapus kode React boilerplate, dan tambahkan kode di bawah ini:

Komponen ini akan merender formulir login sederhana yang menyertakan widget Google reCAPTCHA.

Pertama, impor paket React, Axios, dan react-google-recaptcha:

impor Bereaksi, { useState, useRef } dari'reaksi';
impor Aksioma dari'axios';
impor ReCAPTCHA dari'reaksi-google-recaptcha';

Kemudian tentukan tiga variabel status: successMsg, errorMsg, dan validToken. Kode Anda akan memperbarui status ini setelah pengiriman formulir berhasil dan validasi reCAPTCHA. Selain itu, dapatkan situs dan kunci rahasia dari file ENV.

fungsiAplikasi() {
const [SuccessMsg, setSuccessMsg] = useState("")
const [ErrorMsg, setErrorMsg] = useState("")
const [valid_token, setValidToken] = useState([]);
const SITE_KEY = proses.env. REACT_APP_reCAPTCHA_SITE_KEY;
const SECRET_KEY = proses.env. REACT_APP_reCAPTCHA_SECRET_KEY;

Tentukan hook useRef yang mereferensikan komponen reCAPTCHA, untuk menangkap token yang dibuat setelah pengguna menyelesaikan tantangan reCAPTCHA.

const captchaRef = gunakanRef(batal);

Kemudian, buat fungsi handleSubmit untuk dipanggil saat pengguna mengirimkan formulir login. Fungsi ini mendapatkan token dari komponen reCAPTCHA dan kemudian memanggil mengatur ulang metode untuk mengatur ulang reCAPTCHA untuk memungkinkan pemeriksaan selanjutnya.

Selain itu, ia memeriksa apakah token itu ada, dan memanggil fungsi verifikasi Token untuk memverifikasi token tersebut. Setelah memverifikasi token, status validToken akan diperbarui dengan data respons API.

const handleSubmit = asinkron (e) => {
 e.preventDefault();
membiarkan token = captchaRef.current.getValue();
 captchaRef.current.reset();
jika (token) {
membiarkan valid_token = menunggu verifikasiToken (token);
 setValidToken (valid_token);
jika (valid_token[0].kesuksesan BENAR) {
menghibur.catatan("diverifikasi");
 setSuksesMsg("Hore!! Anda telah mengirimkan formulir")
 } kalau tidak {
menghibur.catatan("Tidak diverifikasi");
 setErrorMsg(" Maaf!! Pastikan Anda bukan bot")
 }
 }
 }

Terakhir, tentukan fungsi verifikasiToken yang akan mengirimkan permintaan POST ke titik akhir server Express menggunakan Axios, meneruskan token reCAPTCHA dan kunci rahasia di badan permintaan. Jika permintaan berhasil, permintaan akan mendorong data respons ke larik APIResponse dan mengembalikan larik tersebut sebagai hasilnya.

const verifikasiToken = asinkron (token) => {
membiarkan Respon API = [];
mencoba {
membiarkan tanggapan = menunggu Axios.post(` http://localhost: 8000/verifikasi-token`, {
 reCAPTCHA_TOKEN: token,
 Secret_Key: SECRET_KEY,
 });
 APIResponse.push (respons['data']);
kembali Tanggapan API;
 } menangkap (kesalahan) {
menghibur.log (kesalahan);
 }
 };

Terakhir, kembalikan formulir dengan komponen reCAPTCHA. Komponen ini menggunakan pengait referensi dan kunci situs sebagai alat peraga untuk mengonfigurasi dan menampilkan widget reCAPTCHA.

Saat pengguna mengirimkan formulir, komponen merender pesan sukses atau kesalahan berdasarkan nilai status validToken. Jika token reCAPTCHA valid, artinya pengguna berhasil menyelesaikan tantangan reCAPTCHA, ini akan menampilkan pesan sukses, jika tidak, ini akan menampilkan pesan kesalahan.

kembali (
"Aplikasi">
"Tajuk-aplikasi"> 
"formulir masuk">


 {valid_token.panjang > 0 && valid_token[0].kesuksesan BENAR
? <h3nama kelas="teksSukses">{SuccessMsg}h3>
: <h3nama kelas="textError">{ErrorMsg} h3>}


Nama Pengguna</p>
"teks" placeholder="Nama belakang..." />




Kata sandi</p>
"kata sandi" pengganti = "Kata sandi..." />


 NamaKelas="recaptcha"
 kuncisitus={SITE_KEY}
 ref={captchaRef}
 />








eksporbawaan Aplikasi

Terakhir, jalankan server pengembangan dan buka browser Anda http://localhost: 3000 untuk melihat hasilnya.

Buat Backend Ekspres

Untuk memulai, di direktori root dari seluruh folder proyek, membuat server web Ekspres, dan instal paket-paket ini:

npm install express cors axios body-parser

Siapkan Server Ekspres

Selanjutnya, buka file index.js di folder proyek server, dan tambahkan kode ini:

const mengungkapkan = memerlukan('cepat')
const sumbu = memerlukan('axios');
const kor = memerlukan('kor');
const aplikasi = ekspres();
const bodyParser = memerlukan('tubuh-parser');
const jsonParser = bodyParser.json();
const PORT = proses.env. PELABUHAN || 8000;


app.use (jsonParser);
app.use (cors());


aplikasi.posting("/ verifikasi-token", asinkron (req, res) => {
const { reCAPTCHA_TOKEN, Secret_Key} = req.body;


mencoba {
membiarkan tanggapan = menunggu axios.post(` https://www.google.com/recaptcha/api/siteverify? rahasia=${Secret_Key}& tanggapan=${reCAPTCHA_TOKEN}`);
menghibur.log (respons.data);


kembali res.status(200).json({
 kesuksesan:BENAR,
 pesan: "Token berhasil diverifikasi",
 verifikasi_info: response.data
 });
 } menangkap(kesalahan) {
menghibur.log (kesalahan);


kembali res.status(500).json({
 kesuksesan:PALSU,
 pesan: "Kesalahan memverifikasi token"
 })
 }
});
app.listen (PORT, () => menghibur.catatan(`Aplikasi dimulai di port ${PORT}`));

Kode ini melakukan hal berikut:

  • Server menentukan rute Posting yang membuat permintaan HTTP POST asinkron ke API reCAPTCHA Google verifikasi token reCAPTCHA menggunakan Axios, meneruskan kunci rahasia untuk autentikasi di URL permintaan.
  • Jika token reCAPTCHA berhasil diverifikasi, server merespons dengan objek JSON yang berisi properti "sukses" yang disetel ke true, properti "pesan" menunjukkan bahwa token berhasil diverifikasi, dan properti "verification_info" berisi informasi tentang respons verifikasi dari Google API.
  • Jika terjadi kesalahan selama proses verifikasi, server merespons dengan objek JSON yang berisi a properti "sukses" disetel ke false dan properti "message" menunjukkan bahwa ada kesalahan saat memverifikasi token.

Terakhir, jalankan server node dan uji fungsionalitas fitur reCAPTCHA.

node index.js

Bisakah reCAPTCHA Menjamin Keamanan Terhadap Spambot?

Menurut Google, layanan reCAPTCHA memiliki tingkat keberhasilan lebih dari 99%, artinya hanya sebagian kecil spam yang dapat melewati fitur keamanan reCAPTCHA.

reCAPTCHA tidak mudah, karena pihak jahat yang gigih masih dapat menemukan solusi. Tapi itu tetap merupakan alat penting yang dapat secara signifikan mengurangi risiko dari robot spam.