
Cloudflare Turnstile
So verwendet man Cloudflares Turnstile Captcha in einem HTML Formular mit HTML CSS und PHP
Cloudflare Turnstile ist ein kostenloses Tool, das CAPTCHAs ersetzt. Turnstile bietet Website-Besuchern ein frustrationsfreies, CAPTCHA-freies Web-Erlebnis. Darüber hinaus verhindert Turnstile missbräuchliche Verwendung und bestätigt, dass die Besucher echt sind – ohne den Datenschutz zu gefährden und ganz ohne die schlechte Nutzererfahrung, die mit CAPTCHAs einhergeht. Weiters ist dieses viel zuverlässiger als beispielsweise Google reCAPTCHA
In dieser Anleitung zeigen wir dir, wie du Turnstile in ein HTML Formular einbaust und das ganze mit PHP validierst und anschließend das Formular auch noch mit der simplen PHP mail Funktion oder einem SMTP Mailer versenden kannst.
Das Ganze wird anhand von einem simplen Beispiel erklärt:
Cloudflare
Bevor wir uns jetzt dem Einbinden auf der Website widmen, müssen man die Keys von Cloudflare für das Turnstile erzeugen lassen. Dazu muss man einen Account bei Cloudflare haben.
Nachdem man sich angemeldet hat, klickt man auf Turnstile und anschließend auf "Add Site" um die Website hinzuzufügen.

Im nächsten Schritt gibst du dem Turnstile einen Namen und stellst die Domain bereit. Falls man das Captcha komplett verschwinden lassen will, kann man dieses hier auf Invisible stellen. Beim Non-Interactive Modus muss der Nutzer nichts machen, um das Captcha zu lösen. Dennoch wird empfohlen den gemanaged Modus zu verwenden. Die Pre-clearance kann je nach Verwendungszweck ausgeschalten werden. Für ein Formular empfiehlt es sich diesen auszuschalten. Jetzt nur noch auf Create klicken und die Keys sind bereit.

Jetzt haben wir die Keys und können mit dem einbinden beginnen. Es gibt 2 Keys einmal den öffentlichen und auch den Privaten.

Einbindung auf der Website
Beim Einbinden auf der Website unterscheidet man zwischen der Client seitigen Einbindung und der Server seitigen Einbindung. Um einen vollständigen und sicheren Schutz vor Spam und Bots zu gewährleisten ist es notwendig beides zu machen. Trotzdem wird diese Anleitung in Clientseitige und Serverseitige Einbindung unterteilt.
Clientseitige Integration
Um das Cloudflare Captcha zu verwenden müssen wir zuerst diesen Code im Head-Bereich einfügen.
Als Nächstes muss das Element selbst im Formular eingefügt werden. Dabei ist zu beachten, dass anstelle von "Dein öffentlicher Key" dein generierter Clientseitiger Key eingegeben werden muss. Jetzt sollte auf deiner Seite das Widget schon sichtbar sein.
Da ich das ganze anhand von einem Beispiel erkläre, ist hier der Beispielcode für das obige Formular:
Somit ist die Clientseitige Integrierung jetzt fertig.
Serverseitige Integrierung
Um jetzt nochmal ganz sicher zu kontrollieren, dass es sich bei dem Besucher nicht um einen Bot handelt wird das Captcha Serverseitig auch nochmal validiert. Diesen Schritt habe ich mit einfachem PHP gemacht. Im weiteren Verlauf dieser Anleitung zeige ich, wie man nur die Serverseite Validierung mit PHP macht, wie man es direkt mit der PHP mail Funktion verwenden kann, und dann auch noch wie wir professioneller die Formulareingabe über SMTP verschicken könnnen um eine sichere Ankunft der Nachricht bei den meisten E-Mail-Anbietern zu gewährleisten.
Die Serverseitige Integrierung
Wenn du vorhast diesen Code für anderwärtige Projekte zu verwenden, zum Beispiel für ein Login, stelle ich hier diesen Code auch zur Verfügung. Falls du nur ein Formular verwenden willst, welches die Inhalte über E-mail weiterleitet, kannst du diesen Teil überspringen, da der Code in den folgenden Fällen sowieso integriert ist.
Serverseitige Integrierung mit einfacher PHP-Mail-Funktion
Hier ist der Code für die send.php Datei, welche die Validierung und anschließende Versendung mit der einfachen PHP-Mail-Funktion. Da diese aber meist nur auf der eigenen Domain verlässlich funktioniert empfiehlt es sich, die danach folgende SMTP Funktion zu verwenden. Trotzdem steht hier der Code für euch bereit. Wichtig ist hier, dass diese Datei gleich heißt wie der Action Tag in deinem Formular sonst funktionert hier nichts. Damit das jetzt funktioniert, musst du noch den SecretKey an der richtigen Stelle eintragen und die Empfänger E-mail angeben. Weiters kann auch noch der Betreff gewählt werden. Falls du andere Formularfelder hast, ist es wichtig diese Funktion abzuändern. Wenn du nicht weißt, wie das funktioniert, frag einfach ChatGPT.
Serverseitige Integrierung mit SMTP-Mail-Funktion
Hier ist der Code für die send.php Datei mit SMTP-Mail-Funktion. Eigentlich funktioniert es hier gleich wie in der oberen nur das die Mail über den SMTP Server versendet wird. Um dies zu verwenden braucht man zwei Dinge: Den SMTP Zugang sowie den PHPMailer. Den aktuellsten PHPMailer kannst du hier herunterladen oder einfach den in dem Beispiel verwendeten PHPMailer kopieren. Danach musst du ihn richtig in deine Ordnerstruktur einbinden. Lade dir die Beispieldatei herunter um zu verstehen, wo du die Ordner platzieren musst. Im nächsten Schritt musst du einfach die Daten austauschen: Den geheimen Schlüssel hinzufügen, den SMTP Server hinzufügen, sowie den SMTP Nutzernamen als auch das SMTP Passwort. Da es schon sehr viele Gute Anleitungen für sowas gibt, zeige ich jetzt nicht wie man an diese Daten kommt, aber hier ist eine Videoanleitung . Wie auch schon zuvor funktioniert das Versenden der Inhalte nur wenn es das genau gleiche Formular wie oben ist, falls das nicht zutrifft diese Datei bitte anpassen oder ChatGPT fragen.
So das wars jetzt auch mit dieser Anleitung, falls du noch Fragen hast oder gerne hättest, dass ich die Integrierung für dich übernehme, kannst du dich gerne bei mir melden.