Ein Spiel aus dem Marketplace hinzufügen

BananaSeeds Kontaktformular hat aus der vorigen Lektion bereits ein funktionierendes Widget. In dieser letzten Lektion ersetzen wir die schlichte Checkbox durch ein echtes, spielbares Spiel, das jeder Besucher lösen muss.

Wozu der Aufwand, wenn die Checkbox schon funktioniert? Die Checkbox ist das stille Minimum. Ein Spiel macht aus dem unvermeidlichen Moment "beweise, dass du ein Mensch bist" etwas, das ein Besucher genießt statt erträgt, und es ist der Teil, der gegen raffinierte Angreifer standhält. Die heutige KI kann eine Checkbox anklicken und Bildraster lösen, aber ein echtes Spiel ist die eine Aufgabe, bei der sie nicht schummeln kann, weil keine Maschine so spielt wie ein Mensch. 💪

Diese Lektion ist etwas aufwendiger als das Einsetzen des Widgets: Du wählst ein Spiel, installierst es auf deinem Site-Key und schaltest das Gate ein, das es zur Pflicht macht. Der Lohn ist, dass das Spiel zur eigentlichen Sache wird, die zwischen einem Bot und deinem Formular steht, nicht zu Deko, die man überspringen kann. Die Token-Mechanik darunter ist identisch, also ändert sich dein Backend überhaupt nicht. Alles hier funktioniert im kostenlosen Tarif.

Was du am Ende hast

• Ein Spiel aus dem Marketplace, installiert auf deinem Site-Key.
• Dieses Spiel als Pflicht zur Verifizierung, sodass eine nackte Checkbox nicht mehr durchkommt.
• Dasselbe Kontaktformular, jetzt vom Spiel bewacht, mit deiner Backend-Prüfung unverändert.

1. Wähle ein Spiel aus dem Marketplace

Der Marketplace ist der öffentliche Katalog, aus dem du wählst. Öffne ihn und stöbere: filter nach Kategorie oder danach, was ein Spiel unterstützt (Touch, Tastatur, Screenreader, Ton), damit du ein Spiel auf dein Publikum abstimmst. Jedes Spiel hat seine eigene Seite mit einer Vorschau und einer id wie caputchin/games/leaf-memory.

Das Stöbern ist offen, ohne Freigabeschlange: Jedes Spiel im Katalog steht zur Nutzung bereit. Wähl eins und kopier seine id. Wir nehmen Leaf Memory (caputchin/games/leaf-memory) für den Rest dieser Lektion.

2. Installier das Spiel auf deinem Site-Key

Bevor ein Spiel einen Key bewachen kann, installierst du es auf diesem Key. Das Installieren weist Caputchin an, einen gepinnten, verifizierten Snapshot des Spiels zu nehmen, sodass genau die Version, die deine Besucher spielen, diejenige ist, die Caputchin später beim Prüfen eines Ergebnisses erneut ausführen kann.

Öffne im Dashboard dein Team, öffne deinen Site-Key und geh auf seine Spiele-Seite. Such im Panel Spiel hinzufügen im Feld Marketplace-Spiel nach dem Spiel und wähl es aus der Liste (oder klick Öffnen).

Caputchin registriert das Spiel, nimmt seinen Snapshot und setzt dich auf die Einstellungsseite des Spiels. Das Spiel erscheint jetzt unter Registrierte Spiele zurück auf der Spiele-Seite, bereit, den Key zu bewachen. Fast jedes Marketplace-Spiel ist einsatzbereit, sobald du es registrierst, die hauseigenen immer; zeigt ein seltenes Spiel hier ein Nicht abspielbar-Abzeichen, kann es nicht gaten, bis der Autor einen abspielbaren Build ausliefert.

Du kannst mehr als ein Spiel hinzufügen. Füg sie auf einem einzelnen Site-Key hinzu, oder füg sie einmal auf dem Team hinzu, um denselben Satz über jeden Key darin zu teilen.

Dein Site-Key hat jetzt ein Spiel installiert und verifiziert. Als Nächstes machen wir es zur Pflicht. 🎉

3. Ein Spiel zur Verifizierung verpflichten

Ein Spiel zu installieren macht es verfügbar; es zwingt noch niemanden, es zu spielen. Das tut das Gate.

Öffne auf deinem Site-Key seine Sicherheit-Seite und schalt Ein Spiel zur Verifizierung verlangen ein. Von nun an muss jeder Besucher dieses Keys eines seiner installierten Spiele spielen, um durchzukommen, und eine nackte Checkbox zu lösen reicht nicht mehr. (Du kannst das Gate nicht einschalten, bevor mindestens ein Spiel installiert ist, weshalb Schritt 2 zuerst kommt.)

Mit eingeschaltetem Gate wählt Caputchin, welches installierte Spiel jeder Besucher bekommt, und reicht es über ein einmaliges, signiertes Ticket aus. Ein Besucher, oder ein Bot, kann das Spiel nicht wählen, überspringen oder gegen ein leichteres tauschen: Die Wahl trifft Caputchins Seite, frisch für jede Session. Genau das macht aus dem Spiel statt einer netten Beigabe echten Schutz.

Verwaltest du einen ganzen Satz Keys? Ein Team hat seine eigene Sicherheit-Seite mit Ein Spiel auf jedem Site-Key verlangen, was das Gate über jeden Key im Team auf einmal einschaltet.

4. Tausch das Element

Jetzt die Seite. Spiele rendern auf einem anderen Element, <caputchin-game>. Das import "@caputchin/widget", das du schon hinzugefügt hast, registriert es ebenfalls, also gibt es nichts Neues zu installieren. Weil der Key jetzt ein Spiel verlangt, kommt das nur-Checkbox-<caputchin-widget> auf ihm nicht mehr durch, also ist dieser Tausch der letzte Pflichtschritt.

Ändere in deinem Kontaktformular die eine Zeile:

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

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

Du übergibst keine Spiel-id. Weil der Key ein Spiel verlangt, liefert Caputchin eines deiner installierten Spiele und wählt es pro Besuch. Willst du lieber ein bestimmtes pinnen oder die Rotation auf eine Teilmenge begrenzen, benenn sie (jedes muss auf dem Key installiert sein):

// 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"
/>

Ein Spiel zu benennen, das nicht auf dem Key installiert ist, lädt es nicht: Das Widget meldet, dass das Gate kein solches Spiel hat, statt den Besucher durchzulassen.

5. Probier es aus

Lad deine App neu. Die Checkbox ist weg: Der Besucher spielt jetzt das Spiel in einem gesandboxten Iframe. Wenn er gewinnt, fügt das Widget dem Formular dasselbe versteckte caputchin-token-Feld hinzu, also bleiben dein FormData-Auslesen und deine Backend-/siteverify-Prüfung beide unverändert gegenüber der vorigen Lektion.

Öffne die Statistik deines Site-Keys, und du siehst Sessions durch denselben Funnel fließen wie zuvor. Du kannst die ganze Ansicht auf ein einzelnes Spiel filtern, um eins gegen ein anderes zu vergleichen.

BananaSeeds Kontaktformular ist jetzt von einem echten, spielbaren Spiel bewacht, das jeder Besucher lösen muss, und jede Einsendung wird weiterhin auf deinem Server verifiziert. Du hast es ausgeliefert. 🎉

Du bist von einem leeren Konto zu einem verifizierten, spielbewachten Formular gekommen.

Was gerade passiert ist

Was als Nächstes kommt

Dies sind die Bereiche, nach denen du von hier aus am ehesten greifst:

• Die Spiele anpassen: setz Sprache, Skin und Schwierigkeit deiner Spiele.
• Sicherheit: das Spiel-Gate, die Proof-of-Work-Schwierigkeit, Origins und der Rest des Schutzes eines Keys.
• Statistik und Sessions: lies den Funnel und vergleich ein Spiel gegen ein anderes.
• Kontoverwaltung: Anmeldung, Zugriffstoken, Abrechnung und Sitze.
• Teams: organisier deine Site-Keys und lade, in einem bezahlten Tarif, dein Team ein.