Tambahkan game dari marketplace

Formulir kontak BananaSeed sudah punya widget yang berfungsi dari pelajaran sebelumnya. Di pelajaran terakhir ini kita ganti checkbox biasa dengan game sungguhan yang bisa dimainkan, yang harus dituntaskan setiap pengunjung.

Buat apa repot, kalau checkbox sudah berfungsi? Checkbox adalah minimum yang diam. Sebuah game mengubah momen tak terelakkan "buktikan kamu manusia" menjadi sesuatu yang dinikmati pengunjung alih-alih ditahankan, dan itulah bagian yang bertahan melawan penyerang canggih. AI hari ini bisa mencentang checkbox dan memecahkan kisi gambar, tapi sebuah game sungguhan adalah satu tantangan yang tak bisa ia curangi, karena tak ada mesin yang bermain seperti manusia. 💪

Pelajaran ini sedikit lebih melibatkan ketimbang menaruh widget tadi: kamu memilih sebuah game, memasangnya di kunci situs-mu, dan menyalakan gerbang yang mewajibkannya. Imbalannya adalah game menjadi hal nyata yang berdiri di antara sebuah bot dan formulirmu, bukan hiasan yang bisa kamu lewati. Mekanik token di bawahnya identik, jadi backend-mu tak berubah sama sekali. Semua di sini berfungsi di paket gratis.

Apa yang akan kamu miliki di akhir

• Sebuah game dari marketplace terpasang di kunci situs-mu.
• Game itu diwajibkan untuk verifikasi, jadi sebuah checkbox telanjang tak bisa lagi lolos.
• Formulir kontak yang sama, kini dijaga game, dengan pemeriksaan backend-mu tak berubah.

1. Pilih sebuah game dari marketplace

Marketplace adalah katalog publik tempat kamu memilih. Buka dan jelajahi: saring berdasarkan kategori, atau berdasarkan apa yang didukung sebuah game (sentuh, papan ketik, pembaca layar, suara), agar kamu bisa mencocokkan game dengan audiensmu. Tiap game punya halamannya sendiri dengan pratinjau dan sebuah id seperti caputchin/games/leaf-memory.

Penjelajahan terbuka, tanpa antrean persetujuan: setiap game di katalog tersedia untuk dipakai. Pilih satu dan salin id-nya. Kita akan memakai Leaf Memory (caputchin/games/leaf-memory) untuk sisa pelajaran ini.

2. Pasang game di kunci situs-mu

Sebelum sebuah game bisa menjaga sebuah key, kamu memasangnya di key itu. Memasang memberi tahu Caputchin untuk mengambil snapshot game yang dipin dan terverifikasi, jadi versi persis yang dimainkan pengunjungmu adalah versi yang bisa Caputchin jalankan ulang saat memeriksa sebuah hasil nanti.

Di dasbor, buka tim-mu, buka kunci situs-mu, dan pergi ke halaman Game-nya. Di panel Tambahkan game, cari game di kotak Game marketplace dan pilih dari daftar (atau klik Buka).

Caputchin mendaftarkan game, mengambil snapshot-nya, dan menjatuhkanmu di halaman pengaturan game. Game kini muncul di bawah Game terdaftar kembali di halaman Game, siap menjaga key. Hampir setiap game marketplace siap begitu kamu mendaftarkannya, yang milik sendiri selalu; jika sebuah game langka menunjukkan lencana Tidak bisa diputar ulang di sini, ia tak bisa menggerbang sampai penulisnya mengirim build yang bisa diputar ulang.

Kamu bisa menambahkan lebih dari satu game. Tambahkan di satu kunci situs, atau tambahkan sekali di tim untuk membagi set yang sama ke setiap key di dalamnya.

Kunci situs-mu kini punya sebuah game terpasang dan terverifikasi. Berikutnya kita jadikan ia wajib. 🎉

3. Wajibkan sebuah game untuk verifikasi

Memasang sebuah game membuatnya tersedia; itu belum memaksa siapa pun memainkannya. Gerbang yang melakukan itu.

Di kunci situs-mu, buka halaman Keamanan-nya dan nyalakan Wajibkan game untuk verifikasi. Mulai sekarang, setiap pengunjung key ini harus memainkan salah satu game terpasangnya untuk lolos, dan menuntaskan checkbox telanjang tak lagi cukup. (Kamu tak bisa menyalakan gerbang sampai setidaknya satu game terpasang, itulah sebabnya langkah 2 lebih dulu.)

Dengan gerbang menyala, Caputchin memilih game terpasang mana yang didapat tiap pengunjung dan menyerahkannya lewat sebuah tiket sekali pakai yang bertanda tangan. Seorang pengunjung, atau sebuah bot, tak bisa memilih game-nya, melewatinya, atau menukarnya dengan yang lebih mudah: pilihan dibuat di sisi Caputchin, segar untuk tiap sesi. Itulah yang mengubah game dari sekadar pemanis menjadi perlindungan sungguhan.

Mengelola seluruh set key? Sebuah tim punya halaman Keamanan-nya sendiri dengan Wajibkan game di setiap kunci situs, yang menyalakan gerbang di setiap key dalam tim sekaligus.

4. Tukar elemennya

Sekarang halamannya. Game dirender di elemen yang berbeda, <caputchin-game>. import "@caputchin/widget" yang sudah kamu tambahkan mendaftarkannya juga, jadi tak ada yang baru untuk dipasang. Karena key kini mewajibkan sebuah game, <caputchin-widget> yang hanya-checkbox tak bisa lagi lolos padanya, jadi tukar ini adalah langkah wajib terakhir.

Di formulir kontakmu, ubah satu baris ini:

// before
<caputchin-widget sitekey="cpt_pub_..." />

// after
<caputchin-game sitekey="cpt_pub_..." />

Kamu tak melewatkan sebuah id game. Karena key mewajibkan sebuah game, Caputchin menyajikan salah satu game terpasangmu dan memilihnya per kunjungan. Jika kamu lebih suka memin satu game tertentu, atau membatasi rotasi ke sebuah subset, sebutkan namanya (masing-masing harus terpasang di key):

// always Leaf Memory
<caputchin-game sitekey="cpt_pub_..." game="caputchin/games/leaf-memory" />

// a random one of these two per visit
<caputchin-game
  sitekey="cpt_pub_..."
  games="caputchin/games/leaf-memory,caputchin/games/dino-runner"
/>

Menyebut sebuah game yang tak terpasang di key tak akan memuatnya: widget melaporkan bahwa gerbang tak punya game seperti itu alih-alih meloloskan pengunjung.

5. Coba

Muat ulang aplikasimu. Checkbox lenyap: pengunjung kini memainkan game di sebuah iframe ber-sandbox. Saat mereka menang, widget menambahkan field tersembunyi caputchin-token yang sama ke formulir, jadi pembacaan FormData-mu dan pemeriksaan backend /siteverify-mu keduanya tak berubah dari pelajaran sebelumnya.

Buka statistik kunci situs-mu dan kamu akan melihat sesi mengalir lewat funnel yang sama seperti sebelumnya. Kamu bisa menyaring seluruh tampilan ke satu game untuk membandingkan satu dengan yang lain.

Formulir kontak BananaSeed kini dijaga game sungguhan yang bisa dimainkan, yang harus dituntaskan setiap pengunjung, dan setiap kiriman tetap diverifikasi di servermu. Kamu sudah mengirimkannya. 🎉

Kamu beranjak dari akun kosong ke formulir terverifikasi yang dijaga game.

Apa yang baru saja terjadi

Apa berikutnya

Inilah area yang paling mungkin kamu tuju dari sini:

• Kustomisasi game: setel bahasa, skin, dan tingkat kesulitan game-mu.
• Keamanan: gerbang game, tingkat kesulitan proof-of-work, origin, dan sisa perlindungan sebuah key.
• Statistik dan sesi: baca funnel dan bandingkan satu game dengan yang lain.
• Manajemen akun: masuk, access token, penagihan, dan kursi.
• Tim: atur kunci situs-mu dan, di paket berbayar, undang timmu.