Das ist Christopher Dörge Entwicklung eines reCaptcha Paketes für FLOW3

Von Christopher Dörge am 27.03.2012
img

Bei meiner Arbeit mit FLOW3 entwarf ich ein nützliches Paket, welches das von Google bereitgestellte reCaptcha zum Schutz vor Spam in das Framework integriert und sich einfach benutzen lässt.

Da einem bei der Entwicklung von Webanwendungen Captchas häufig über den Weg laufen, möchte ich an dieser Stelle eine Installationsanleitung geben und dieses Paket anderen Entwicklern zur Verfügung stellen.

Installation

Zur Installation geht man wie folgt vor:

cd [Flow3Dir]/Packages/Application
git clone –recursive git://github.com/incloud-cdoerge/FLOW3-Recaptcha.git Incloud.Recaptcha
cd ../../
./flow3 package:activate Incloud.Recaptcha

Nun sollte das Paket heruntergeladen und aktiviert worden sein.

Danach benötigt man noch einen privaten und einen öffentlichen Schlüssel, um sich bei der Kommunikation mit den Google Servern authentifizieren zu können. Dazu geht man einfach auf http://www.google.com/recaptcha und generiert sich diese. Hierfür ist ein Account bei Google notwendig.

Nachdem man sich die beiden Schlüssel erzeugt hat, setzt man diese in der Settings.yaml im Modul ([Flow3Dir]/Packages/Application/Incloud.Recaptcha/Configuration/Settings.yaml) ein :

Incloud:
  Recaptcha:
    security:
      publicKey: "yourgeneratedpublickey"
      privateKey: "yourgeneratedprivatekey"

Diese Einstellungen können auch direkt in den Settings der jeweiligen Applikation ([Flow3Dir]/Packages/Application/[Vendor.Name]/Configuration/Settings.yaml) erfolgen. Dann müssen allerdings die Einstellungen im oben angegebenen Pfad sinnvoll angepasst werden, da der Scope sonst auf ihnen liegt.

Damit ist die Installation bereits abgeschlossen.

Erstellen einer Beispielanwendung

In unserer Beispielanwendung soll ein reCaptcha zu lösen sein und das Ergebnis der Validierung als Flash Message erscheinen.

Dazu erstellen wir einfach ein neues Paket, welches ich Incloud.Demo taufe:

cd [Flow3Dir]
./flow3 kickstart:package Incloud.Demo

Nun wurde für uns ein Standard Controller samt Index View angelegt. Diese beiden Dateien sollen uns zur Einbindung des reCaptchas ausreichen. In der View im Pfad [Flow3Dir]/Packages/Application/Incloud.Demo/Resources/Private/Templates/Standard/Index.html erzeugen wir einfach einen Namespace für den View Helper und binden dann das Captcha über den Funktionsaufruf ohne weitere Parameter ein:

{namespace ir=IncloudRecaptchaViewHelpersWidget}

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Index view of Recaptcha Demo</title>
		<f:base />
	</head>
<body>
	<h1>Recaptcha Demo</h1>
	<f:flashmessages class="flashmessages" />
	<f:form action="validate" controller="Standard" method="post" name="validationform">
		<ir:recaptcha />
		<f:form .submit value="Validate" />
	</f:form>
</body>
</html>

Die Form wurde so angepasst, dass sie die Methode validate auf unserem Standard Controller anspricht. Um diesen kümmern wir uns auch als nächstes.

Es ist wichtig, das reCaptcha Model per Dependency Injection zu injizieren, damit wir das Captcha validieren lassen können:

namespace Incloud\Demo\Controller
use TYPO\FLOW3\Annotations as FLOW3;

/**
 * Standard controller for the Incloud.Demo package
 *
 * @FLOW3\Scope("singleton")
 */

class StandardController extends \TYPO3\FLOW3\MVC\Controller\ActionController {
	/**
	 * @FLOW3\Inject
	 * @var Incloud\Recaptcha\Domain\Model\Recaptcha
	 */
	protected $recaptcha;
	...

Nun sind wir in der Lage, in der Funktion validateAction die Validierung unseres reCaptchas vorzunehmen. Dazu einfach die validate-Funktion des Models aufrufen. Diese benötigt die von Google bereitgestellte Challenge und die Eingabe des Nutzers. Diese beiden Parameter wurden von der Form als Request weitergeleitet. Das Ergebnis der Funktion ist entweder true, wenn die Eingabe erfolgreich validiert werden konnte oder eine Error-String, wenn ein Problem auftrat oder die Eingabe schlicht falsch war.

Ich lasse einfach das Captcha auswerten und packe das Ergebnis in eine Flash Message. Danach mache ich einen redirect auf die Index Action:

/**
 * Validate action
 *
 * @return void
 */

public function validateAction() {
	$arguments = $this->request->getArguments();
	$resp = $this->recaptcha->validate($arguments["recaptcha_challenge_field"], $arguments["recaptcha_response_field"]);

	if($resp !== true)
		$this->addFlashMessage($resp);
	else
		$this->addFlashMessage("Validation successful!");$this->redirect("index");
}

Herzlichen Glückwunsch! Damit ist die Einbindung eines Captchas in ein Formular erfolgt. Simpel, oder?

Remember Funktionalität

Das reCaptcha Paket ist in der Lage, sich das Lösen eines Captchas zu merken, sodass ein Nutzer nicht ständig zum Lösen aufgefordert werden muss. Dazu einfach den dritten Parameter der validate-Funktion auf true setzen. Die Zeit, die sich die Applikation nun das Lösen merkt, ist per default 900 Sekunden. Diese Zeit kann aber in der Settings.yaml beliebig verändert werden:

Incloud:
  Recaptcha:
    security:
      publicKey: "yourgeneratedpublickey"
      privateKey: "yourgeneratedprivatekey"
      memory:
      validTime: 900

Das Gedächtnis kann aber auch manuell mit der invalidate-Funktion bei Bedarf wieder gelöscht werden.

Sprachunterstützung

Momentan unterstützt das Paket nur die englische Sprache. Es ist aber angedacht, das Benutzen in verschiedenen Sprachen zu ermöglichen. Allerdings bedarf es dazu der Internationalisierungsfunktion seitens FLOW3, die aber erst mit Version 1.1 fertig implementiert sein soll. Bis dahin muss Englisch erst einmal ausreichen. Bei Bedarf können natürlich die sprachspezifischen Stellen im Code verändert werden.

Zum Abschluss möchte ich anmerken, dass ich mich über jedes Feedback freuen würde. Das zum Modul zugehörige git-Repository ist hier zu finden: https://github.com/incloud-cdoerge/FLOW3-Recaptcha

Weiterempfehlen:
Diskutieren:

Unser kleines Geschenk:
Incloud Ping

Unser Newsletter informiert Sie alle 2 Monate über unsere Ansichten zu den relevantesten digitalen Themen.

Wir langweilen Sie nicht und liefern Ihnen mit jedem Ping einen kleinen digitalen Aha-Moment. Ihre Zeit ist wertvoll, wir werden sie nicht verschwenden. Versprochen.

Jetzt abonnieren! Spannend, gratis & jederzeit abmeldbar. Was gibt es da schon zu verlieren?