Tambahkan widget ke situsmu

Kamu sudah punya public key BananaSeed dari pelajaran sebelumnya. Sekarang kita taruh widget di formulir kontak React, saksikan dasbor memastikan seorang pengunjung sungguhan menuntaskannya, lalu tambahkan satu panggilan server yang mengubahnya menjadi perlindungan sungguhan.

Apa yang akan kamu miliki di akhir

• Widget di formulir kontakmu, memverifikasi pengunjung di peramban.
• Dasbormu menampilkan verifikasi-verifikasi itu.
• Backend Node-mu membuang setiap kiriman yang tak punya token valid.

1. Tambahkan widget ke formulir React-mu

Pasang paketnya. Ia mendaftarkan elemen <caputchin-widget> (dan elemen <caputchin-game> untuk pelajaran berikutnya):

npm install @caputchin/widget

Impor sekali saat startup, misalnya di entry aplikasimu (main.jsx):

import "@caputchin/widget";

Sekarang taruh widget ke dalam formulir kontak BananaSeed. Saat checkbox tuntas, widget menambahkan field tersembunyi caputchin-token ke formulir, jadi kamu membacanya saat submit persis seperti field-mu sendiri. Ganti cpt_pub_... dengan public key-mu:

export function ContactForm() {
  async function handleSubmit(e) {
    e.preventDefault();
    const data = new FormData(e.currentTarget);
    await fetch("/api/contact", {
      method: "POST",
      headers: { "content-type": "application/json" },
      body: JSON.stringify({
        email: data.get("email"),
        message: data.get("message"),
        token: data.get("caputchin-token"),
      }),
    });
  }

  return (
    <form onSubmit={handleSubmit}>
      <input name="email" type="email" required />
      <textarea name="message" required />
      <caputchin-widget sitekey="cpt_pub_..." />
      <button type="submit">Send</button>
    </form>
  );
}

Di halaman HTML murni tanpa langkah build, atau di dalam aplikasi seluler native? Lihat integrasi tag-script (CDN) dan panduan aplikasi seluler.

2. Saksikan ia memverifikasi

Jalankan aplikasimu dan buka formulir kontak. Checkbox Caputchin muncul dan tuntas dengan sendirinya, tanpa perlu klik. Kamu bahkan belum perlu mengirim formulirnya: itu sudah merupakan verifikasi sungguhan, dan ia sudah sampai ke Caputchin.

3. Pastikan di dasbormu

Kembali di dasbor, buka tim-mu dan klik ke dalam kunci situs-mu. Statistiknya menampilkan sebuah funnel: Sesi dimulai, Selesai di klien, Terverifikasi server, dan Ancaman diblokir. Segarkan halaman; Sesi dimulai dan Selesai di klien sekarang keduanya menunjukkan setidaknya 1. Itulah kunjunganmu: widget termuat (dimulai) dan tantangan terpecahkan di peramban (selesai di klien), tanpa backend sama sekali.

Terverifikasi server masih 0, karena belum ada apa pun di servermu yang memeriksa token. Celah itu adalah langkah berikutnya.

Widget-mu sudah live, dan dasbor sudah mencatat verifikasi sungguhan, sebelum kamu menulis satu baris pun kode backend. 🎉

4. Verifikasi token di backend-mu

Selesai di klien berarti pengunjung menuntaskan tantangan, tapi formulirmu belum terlindungi sampai servermu memastikan token-nya. Sebuah bot bisa mengabaikan widget sepenuhnya dan langsung POST ke endpoint-mu. Jadi backend-mu memeriksa setiap token dengan Caputchin sebelum memercayai permintaannya. Secret-mu (cpt_sec_...) hidup di sebuah variabel lingkungan, tak pernah di peramban:

import express from "express";

const app = express();
app.use(express.json());

app.post("/api/contact", async (req, res) => {
  const { email, message, token } = req.body;

  const verdict = await fetch("https://caputchin.com/api/v1/siteverify", {
    method: "POST",
    headers: { "content-type": "application/json" },
    body: JSON.stringify({
      secret: process.env.CAPUTCHIN_SECRET,
      response: token,
    }),
  }).then((r) => r.json());

  if (!verdict.success) {
    return res.status(400).json({ error: "Could not verify you are human." });
  }

  // Verified. Handle the real message: store it, email it, whatever you do.
  res.json({ ok: true });
});

app.listen(3001);

Pemeriksaan verdict.success itulah intinya: sebuah bot yang langsung posting ke /api/contact tak membawa token, success kembali false, dan pesannya dibuang sebelum kamu pernah menyentuhnya.

Tak punya backend? Tak masalah. Nyalakan verifikasi terhosting dan Caputchin menjalankan pemeriksaan ini untukmu, hanya meneruskan kiriman terverifikasi ke sebuah webhook atau kotak masukmu.

5. Pastikan pemeriksaan server

Kirim formulir kontak sekali lagi, sekarang setelah endpoint-mu memverifikasi. Kembali ke statistik kunci situs-mu dan segarkan: Terverifikasi server sekarang menunjukkan setidaknya 1 juga, berdampingan dengan Sesi dimulai dan Selesai di klien. Seluruh funnel terhitung, dari peramban hingga server.

Untuk membaca funnel itu dari arah sebaliknya (apa yang celah antar penghitung itu beri tahu tentang pengunjung yang berhenti dan kesalahan integrasi), lihat statistik dan sesi.

Formulir kontakmu kini benar-benar terlindungi: setiap kiriman diperiksa di servermu, dan bot tanpa token ditolak. 🎉

Apa yang baru saja terjadi

Berikutnya

Checkbox berfungsi. Sekarang bagian serunya: tukar ia dengan game sungguhan yang bisa dimainkan, tanpa mengubah backend-mu.

Lanjut ke Tambahkan game dari marketplace.