TYPO3 / Formhandler: No CAPTCHA reCAPTCHA ErrorCheck

noCaptcha reCaptcha für Formhandler

Nachdem die Entwickler von Google zufällig herausgefunden haben, dass ihr eigener reCaptcha knackbar ist, haben sich die Brains von Google etwas neues einfallen lassen. Das Ergebnis: Der noCAPTCHA CAPTCHA bzw. Version 2 vom reCaptcha, der ohne das Eingeben eines Codes vor Spam schützen soll.
Eine super Sache wie ich finde. Deshalb möchte ich diese natürlich auch in TYPO3 Projekten verwenden. Grundsätzlich arbeiten wir bei vielen TYPO3 Formularen mit der Extension Formhandler. Diese bietet zwar einen Validator für den alten reCAPTCHA, bisher jedoch nicht für den neuen no CAPTCHA reCAPTCHA. Glücklicherweise kann man bei Formhandler relativ leicht seine eigenen Komponenten einbringen und so habe ich mal einen simplen ErrorCheck für den neuen reCAPTCHA geschrieben.

UPDATE (28.09.2015): Die Extension jh_captcha bringt nun automatisch schon einen ErrorCheck für die noCaptcha Recaptcha Validierung für Formhandler mit!

Vorbereitung

Als erstes müsst ihr euch auf der reCAPTCHA Seite von Google einen reCAPTCHA für eine Seite einrichten. Die Domain muss korrekt hinterlegt sein. Sobald ihr einen reCAPTCHA für eine Seite generiert habt, erhaltet ihr einen Websiteschlüssel und einen geheimen Schlüssel. Beide werdet ihr gleich benötigen.

Der ErrorCheck

Eigene Formhandler Komponenten kann man entweder per Extension oder als Standalone Script nachrüsten (siehe hier). In meinem Fall hab ich es einfach mal per Standalone Script gemacht. Dazu legt ihr die folgende PHP-Datei einfach in einem Verzeichnis ab (z.B. fileadmin/scripts/)

Tx_Formhandler_ErrorCheck_Recaptcha.php

<?php
    class Tx_Formhandler_ErrorCheck_Recaptcha extends Tx_Formhandler_AbstractErrorCheck {
        public function check() {
            $checkFailed = '';
            if (isset($this->gp[$this->formFieldName])) {
                    
                # Hier euren Secret Key eintragen!
                $secret = 'TOTALGEHEIM';
                $url = 'https://www.google.com/recaptcha/api/siteverify';
                $apiResponse = json_decode(\TYPO3\CMS\Core\Utility\GeneralUtility::getUrl($url.'?secret='.$secret.'&response='.$this->gp[$this->formFieldName]), true);
                if($apiResponse['success'] == FALSE) {
                    $checkFailed = $this->getCheckFailed();    
                }
            } else if($this->gp[$this->formFieldName]=='') {
                $checkFailed = $this->getCheckFailed();
            }
            return $checkFailed;
        }
    }
?>

Typoscript Konfiguration

Danach könnt ihr in der Typoscript Konfiguration eures Formhandler Formulars den Pfad zu Scriptdateien angeben.

plugin.Tx_Formhandler.settings.additionalIncludePaths.1 = fileadmin/scripts/

Dadurch könnt ihr den Validator nun schonmal auf ein Feld anwenden. Im Validator Bereich eurer Typoscript Konfiguration bindet ihr diesen Validator an ein Feld eurer Wahl (in meinem Beispiel heißt es einfach reCaptcha).

recaptcha.errorCheck.1 = Tx_Formhandler_ErrorCheck_Recaptcha

Template Integration

Als letztes müssen wir den Captcha nur noch ins Frontend bringen. Dazu fügt ihr in eurem Formhandler Template einfach ein paar Zeilen hinzu:

<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<script type="text/javascript">var captchaCallback = function() { document.getElementById("captchaResponse").value = document.getElementById("g-recaptcha-response").value }</script>
<div class="g-recaptcha" data-sitekey="SEITENSCHLUESSEL" data-callback="captchaCallback"></div>
<input type="hidden" id="captchaResponse" name="formhandler[recaptcha]" value="" />

Zeile 1 bindet das benötigte Javascript von Google ein. Ihr könntet es aber auch einfach per page.includeJS einbinden. Zeile 2 ist eine einfache Javascript Funktion die bei der Validierung des Nutzers den erhaltenen Code in das hidden Field schreibt, damit Formhandler auch Zugriff auf das Feld hat. In Zeile 3 wird der Captcha dann ausgegeben. Wo ihr was positioniert ist relativ egal, solange es sich zwischen <form> und </form> steht 😉
Denkt daran in dem DIV-Tag euren Seitenschlüssel einzutragen.

Schon sollte die Validierung scharf sein. Alles was euch jetzt vielleicht noch fehlt ist eine entsprechende Fehlermeldung an die Benutzer. Diese könnt ihr in der üblichen Formhandler Sprachdatei hinterlegen:

<label index="error_recaptcha_Tx_Formhandler_ErrorCheck_Recaptcha">Bitte bestätigen Sie, dass Sie kein Roboter sind.</label>

Fettig!

Bei dem ErrorCheck für Formhandler und dessen Template Integration habe ich mich von der Extension jh_captcha inspirieren lassen. Diese bietet auch einen wunderbaren ViewHelper für die Integration des no CAPTCHA reCAPTCHA für Extbase Formulare.

Den ErrorCheck habe ich mal an die großen Macher von Formhandler geschickt, damit dies vielleicht in die Extension mit aufgenommen wird und man dann vielleicht auch seinen Secret Key einfach per Typoscript an den ErrorCheck übergeben kann. Aber alles zu seiner Zeit 🙂