Konto und ersten Site-Key erstellen

Dies ist die erste von drei kurzen Lektionen. Zusammen führen sie dich von einem leeren Konto zu einer echten Spielaufgabe, die ein Live-Formular bewacht.

Du arbeitest bei BananaSeed, und das Kontaktformular auf deiner Seite ertrinkt im Spam: Bots und skriptgesteuerte KI-Agenten feuern rund um die Uhr Müll-Einsendungen darauf ab. Du willst Caputchin vor diesem Formular stehen haben, damit nur echte Menschen durchkommen.

So macht Caputchin das. Wenn jemand dein Kontaktformular öffnet, gibt Caputchin ihm im Browser eine kurze Aufgabe (eine einfache Checkbox oder ein kurzes Spiel). Wer sie löst, erhält ein Einmal-Token, das die Seite mit der Einsendung mitschickt. Dein Server prüft dieses Token dann mit Caputchin, bevor er der Anfrage traut. Ein Bot, der direkt an deinen Endpunkt POSTet, hat nie eine Aufgabe gelöst, hat also kein gültiges Token, und dein Server weist ihn ab.

BananaSeeds Seite ist ein React-Frontend mit einem Node.js-Backend auf Express, deshalb liefern dir die nächsten beiden Lektionen funktionierenden Code für genau diesen Stack. Dieselben Schritte lassen sich auf jedes Framework oder jede Sprache übertragen; nur die Syntax ändert sich.

Zuerst braucht BananaSeed ein Konto und einen Site-Key. Etwa zwei Minuten, keine Kreditkarte, noch nichts zu installieren.

Was du am Ende hast

• Ein Caputchin-Konto.
• Einen Site-Key, der eigentlich ein Wertepaar ist:
  • einen Public Key (cpt_pub_...), der in deine Seite kommt,
  • ein Secret (cpt_sec_...), das auf deinem Server bleibt.

1. Anmelden (das erstellt auch dein Konto)

Geh zu caputchin.com/login. Es gibt keinen separaten Registrierungsschritt: Deine erste Anmeldung mit einer E-Mail erstellt das Konto. Wähl, was dir lieber ist:

• Anmeldelink per E-Mail, dann klick den Link in der E-Mail, oder
• Weiter mit GitHub, oder
• Weiter mit Google.

Wir lesen immer nur deine verifizierte E-Mail-Adresse.

Sobald du drin bist, beachte, dass die Adressleiste /app/troops zeigt. Caputchin setzt dich direkt in deine Teams.

2. Öffne dein persönliches Team

Bevor du einen Site-Key erstellst, hilft es zu wissen, wo er wohnt. Fast alles in Caputchin sitzt in einem Team. Ein Team ist ein Arbeitsbereich, und es ist das, was deine Site-Keys besitzt, die Spiel-Anpassung, die diese Keys teilen, und (in bezahlten Tarifen) die Teammitglieder, die du zur Mitverwaltung einlädst. Caputchin ist mit Absicht um Teams herum gebaut: Ein Site-Key gehört immer zu einem Team, nie direkt zu deinem Konto, und genau das lässt später ein ganzes Team dieselben Keys verwalten, ohne einen Login zu teilen. Abrechnung und Sitze sitzen auf Kontoebene, über deinen Teams, nicht in einem einzelnen davon.

Jedes Konto startet mit einem Team namens Personal, das nur aus dir besteht. Mehr brauchst du für diese Anleitung nicht. Wenn du es überwächst, erstellst du geteilte Teams und lädst Mitglieder ein, aber nichts weiter unten ändert sich.

Klick Personal, um es zu öffnen. Ein Team öffnet direkt auf seinen Site-Keys, also landest du dort. Beachte die Adressleiste: /app/troops/<id>/site-keys. Der Key, den du gleich erstellst, ist unter dem Team verschachtelt, genau die Besitzbeziehung, die wir eben beschrieben haben.

3. Erstelle deinen ersten Site-Key

Klick Site-Key erstellen, gib ihm einen Namen wie My site, und klick Erstellen. Mehr als einen Namen verlangt er nicht.

Caputchin zeigt dir zwei Werte:

Beachte das Banner: "Kopiere das Secret jetzt. Wir zeigen es nie wieder." Kopier das Secret und bewahr es irgendwo auf, wo dein Server es lesen kann (eine Umgebungsvariable, dein Secrets-Manager). Den Public Key kannst du jederzeit wieder auf der Integration-Seite des Keys einsehen, aber das Secret wird genau einmal gezeigt. Verlierst du es, rotierst du es, statt es wiederherzustellen.

Ein brandneuer Key hat noch keine Origin-Beschränkung, und genau das lässt deine Testseite in der nächsten Lektion lokal funktionieren. Mehr zu den Einstellungen eines Keys unter Site-Keys.

Was gerade passiert ist

Du hast ein Konto und deinen ersten Site-Key, das Fundament, auf dem alles Weitere aufbaut. Gut gemacht. 🎉

Weiter

Du hast deine Keys. Zeit, das Widget auf eine Seite zu setzen und eine echte Verifizierung mitzuerleben.

Weiter zu Das Widget zu deiner Seite hinzufügen.