Siapkan verifikasi terhosting dengan kotak masuk uji

Di akhir tutorial ini kamu akan punya formulir kontak yang berfungsi yang kirimannya diverifikasi Caputchin dan dikirim ke sebuah webhook, dan kamu akan telah menyaksikan sebuah kiriman terverifikasi mendarat di kotak masuk uji yang bisa kamu periksa. Kita memakai webhook.site sebagai tujuan dulu, karena ia menunjukkanmu payload persis yang dikirim Caputchin sebelum kamu berkomitmen ke endpoint-mu sendiri.

Kamu butuh paket Alpha, Troop, atau Apex (verifikasi terhosting tak ada di Solo), sebuah kunci situs, dan sebuah halaman tempat kamu bisa mengedit HTML formulir. Jika kamu belum menambahkan widget ke sebuah halaman, lakukan tambahkan widget dulu; tutorial ini mengasumsikan sebuah <caputchin-widget> yang berfungsi.

1. Dapatkan kotak masuk uji

Buka webhook.site di tab baru. Ia langsung memberimu URL unik yang tampak seperti https://webhook.site/#!/<uuid>, dan URL pengiriman yang cocok berbentuk https://webhook.site/<uuid>. Salin URL pengiriman (yang tanpa #!/). Biarkan tab terbuka; setiap permintaan yang ia terima muncul di sana secara waktu nyata.

URL ini adalah pengganti webhook nyatamu. Perlakukan sebagai sekali-buang, karena siapa pun dengan URL bisa membaca apa yang tiba.

2. Nyalakan verifikasi terhosting

Di dasbor, buka kunci situs dan pergi ke halaman Verifikasi terhosting-nya.

Tempel URL pengiriman webhook.site ke field URL webhook.
Biarkan email kosong untuk sekarang.
Simpan.

Kamu belum harus membalik sakelar aktif. Langkah berikutnya memakai Uji pengiriman, yang berfungsi pada tujuan tersimpan baik verifikasi terhosting menyala atau tidak, jadi kamu bisa memastikan penyambungan sebelum tayang.

3. Kirim uji pengiriman

Di halaman yang sama, pakai Uji pengiriman. Caputchin mengirim sebuah kiriman sintetis langsung ke tujuanmu tanpa menjalankan game atau memverifikasi token, jadi ia adalah pemeriksaan murni penyambungan tujuan.

Beralih ke tab webhook.site. Sebuah POST baru muncul dalam sedetik atau dua. Body JSON-nya tampak seperti ini:

{
  "caputchin": {
    "site_key": "cpt_pub_...",
    "session_id": "test_...",
    "game_id": null,
    "score": null,
    "duration_ms": null,
    "verified_at": 1748640000000,
    "test": true
  },
  "form": {
    "email": "test@example.com",
    "message": "Test submission from your Caputchin dashboard."
  }
}

Penanda "test": true memberitahu handler-mu ini adalah uji dasbor, bukan pengunjung sungguhan; ia absen pada kiriman nyata. Jika kamu melihat payload ini, tujuannya berfungsi. Jika tak ada yang tiba, periksa ulang bahwa kamu menyalin URL pengiriman (bukan URL penampil #!/) dan menyimpannya.

4. Arahkan formulirmu ke penerus

Sekarang buat sebuah kiriman nyata melewati Caputchin. Satu-satunya perubahan pada formulirmu adalah action-nya: alih-alih backend-mu sendiri, ia memposting ke URL penerus yang ditunjukkan kunci situs padamu di halaman Verifikasi terhosting.

<form action="https://caputchin.com/api/forward/cpt_pub_..." method="POST">
  <input name="email" type="email" />
  <input name="message" />
  <caputchin-widget sitekey="cpt_pub_..."></caputchin-widget>
  <button type="submit">Send</button>
</form>

Tak ada yang lain berubah. Widget tetap menyuntikkan field tersembunyi caputchin-token saat pengunjung menuntaskan tantangan; penerus membaca field itu, memverifikasinya, dan menyingkirkannya sebelum mengirim sisanya ke tujuanmu.

5. Aktifkan verifikasi terhosting

Kembali di halaman Verifikasi terhosting, balik sakelar aktif menyala dan simpan. Penerus menolak kiriman untuk kunci situs yang tak aktif, jadi sakelar ini yang membuat langkah 4 hidup.

6. Kirim formulir sungguhan

Muat halamanmu, isi formulir, tuntaskan tantangan, dan kirim. Saksikan tab webhook.site: sebuah POST kedua tiba, kali ini tanpa field test dan dengan metadata verifikasi nyata.

{
  "caputchin": {
    "site_key": "cpt_pub_...",
    "session_id": "...",
    "game_id": "caputchin/games/leaf-memory",
    "score": 847,
    "duration_ms": 4200,
    "verified_at": 1748640000000
  },
  "form": {
    "email": "visitor@example.com",
    "message": "Hello!"
  }
}

Itulah seluruh jalurnya: pengunjung mengirim, Caputchin memverifikasi, tujuanmu menerima hanya kiriman terverifikasi. Sebuah kiriman yang gagal verifikasi (token yang hilang, kedaluwarsa, atau dipakai-ulang) tak pernah mencapai tujuanmu sama sekali.

Perlakukan blok caputchin seperti kamu memperlakukan vonis backend: game_id, score, dan duration_ms adalah metadata yang diklaim klien untuk analitikmu, bukan sinyal kepercayaan. Keputusan kepercayaan adalah fakta bahwa kiriman tiba sama sekali. Salah satu dari ketiganya bisa null pada kiriman nyata (misalnya sebuah verifikasi tanpa game), jadi jaga terhadap null sebelum kamu membacanya.

7. Coba tujuan email juga

webhook.site juga memberi tiap kotak masuk sebuah alamat email, jadi kamu bisa menguji pengiriman email dengan cara yang sama. Di halaman webhook.site, temukan alamat email unik kotak masukmu dan salin; saat penulisan ia tampak seperti <your-inbox-id>@emailhook.site, tapi periksa halaman untuk bentuk terkini karena webhook.site memiliki detail itu. Lalu:

Kembali di halaman Verifikasi terhosting, tempel alamat itu ke field email.
Simpan, dan pakai Uji pengiriman lagi.

Email tiba di kotak masuk webhook.site di samping permintaan: sebuah pesan polos yang membawa field formulir dan footer yang mencatat Caputchin memverifikasi kiriman. Email dikirim lewat penyedia email Caputchin, jadi ia bisa butuh sedikit lebih lama untuk mendarat ketimbang POST webhook. Dengan baik URL webhook maupun alamat email disetel, satu kiriman menyebar ke keduanya, dan dihitung terkirim jika salah satunya berhasil.

8. Tukar dengan tujuan nyatamu

Saat kotak masuk uji telah menunjukkanmu apa yang diharapkan, ganti ia dengan milikmu sendiri:

Webhook-mu sendiri. Taruh URL endpoint-mu di field URL webhook. Ia harus URL https publik; Caputchin menolak URL yang menyelesaikan ke alamat privat, loopback, atau cloud-metadata, dan ia tak akan mengikuti pengalihan. Handler-mu menerima persis bentuk JSON di atas. Pengiriman tak ditandatangani, jadi jaga URL tetap rahasia, karena kerahasiaannyalah yang mengautentikasi panggilan.
Email sebagai gantinya, atau sekalian. Taruh alamatmu sendiri di field email, sama seperti kamu mengujinya di atas. Kamu bisa menjalankan keduanya sekaligus, misalnya sebuah webhook untuk pemrosesan plus salinan email ke dirimu sendiri.

Kirim satu lagi kiriman nyata terhadap tujuan live untuk memastikan, lalu kamu selesai.

Ke mana selanjutnya

Statistik verifikasi terhosting: pantau kesehatan pengiriman sepanjang waktu.
Verifikasi terhosting: konsepnya, sikap privasi, dan apa yang sengaja ditinggalkan.
Verifikasi di backend-mu: alternatif jika kamu nanti menambahkan server.

Siapkan verifikasi terhosting dengan kotak masuk uji

Di halaman ini