Dalam demo ini, saya akan menggunakan bukti kelayakan Google ReCAPTCHA v3 dalam aplikasi React yang dibina pada Next.js. Token ReCAPTCHA akan dijana pada bahagian klien dan disahkan pada bahagian pelayan.

Pautan

• Demo

• Pangkalan kod

Langkah 1: Jana Bukti Kelayakan ReCAPTCHA Anda

Pergi ke Google ReCaptcha V3 dan jana bukti kelayakan anda.

Langkah 2: Import pustaka ReCaptcha

<Script src={`https://www.google.com/recaptcha/enterprise.js?render=${process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY}`} />

Nota: Terdapat beberapa pakej yang boleh anda gunakan, tetapi pelaksanaannya mudah.

Langkah 3: Panggil kaedah laksana dalam pengendali klik anda

const loginClickHandler = (event) => {
  event.preventDefault();

  grecaptcha.enterprise.ready(async () => {
    const token = await grecaptcha.enterprise.execute(
      process.env.NEXT_PUBLIC_RE_CAPTCHA_SITE_KEY,
      { action: "LOGIN" }
    );

    await submit(token);
  });
};

grecaptcha ialah objek yang disuntik oleh skrip yang diimport.

Nota: Apabila menggunakan Next.js, pastikan semua pembolehubah persekitaran yang terdedah dalam penyemak imbas diawali dengan NEXT_PUBLIC.

Apabila pengguna mengklik log masuk, apl menjana captcha secara automatik untuk mereka dengan memanggil dua kaedah daripada objek grecaptcha:

• window.grecaptcha.enterprise.ready: Ini memastikan objek Google reCAPTCHA sedia untuk digunakan.
• window.grecaptcha.enterprise.execute: Ini menjana token captcha.

Akhir sekali, data dihantar ke bahagian belakang (dalam kes saya, saya menggunakan fungsi Lambda), bersama-sama dengan token captcha yang dijana.

const submit = async (code) => {
  await fetch("`/.netlify/functions/react-recaptcha-v3-nextjs", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ code }),
  });
};

Nota: Jika anda menggunakan borang, anda juga akan memasukkan nilai medan lain seperti nama pengguna, nama atau sebarang data tambahan yang dikumpulkan oleh borang anda.

Langkah 4: Sahkan Captcha pada Bahagian Belakang

const validateReCaptcha = async (captcha) => {
  const url = `https://www.google.com/recaptcha/api/siteverify?secret=${process.env.RE_CAPTCHA_SECRET_KEY}&response=${captcha}`;
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({ captcha }),
  });

  return response.json();
};

validateReCaptcha ialah kaedah hujung belakang yang memanggil titik akhir API Google, menghantar SECRET_KEY (disimpan sebagai pembolehubah persekitaran) dan token Captcha yang dijana pada klien.

Jika Captcha sah, respons API akan kelihatan seperti ini:

{
  "success": true,
  "challenge_ts": "2024-11-24T03:04:34Z",
  "hostname": "localhost",
  "score": 0.9
}

Kesimpulan

ReCaptcha adalah penting untuk mendapatkan borang, terutamanya apabila anda ingin menghalang bot daripada menyerahkannya. Google menawarkan peringkat percuma yang menyediakan sehingga 10,000 penilaian setiap bulan (pada masa penulisan), menjadikannya pilihan yang kukuh untuk banyak aplikasi. Penyepaduan menjadi lebih mudah dengan perpustakaan yang disediakan oleh google. Anda hanya perlu menyerahkan bukti kelayakan anda: SITE_KEY pada bahagian klien dan SECRET_KEY pada bahagian pelayan.

Perkara penting yang perlu diingat ialah SECRET_KEY tidak boleh didedahkan pada pihak pelanggan, kerana ini boleh menjejaskan keselamatan aplikasi anda. Hanya SITE_KEY ditujukan untuk pelanggan.

Atas ialah kandungan terperinci Reaksi: ReCAPTCHA vlient dan Demo Pelayan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!