WebAppz: Captcha

Inhaltsverzeichnis

• Versionen
  • WebAppz: Captcha FREE
  • WebAppz: Captcha BUSINESS
     
• Erklärung
  • Einbau im Formular
  • Validierung auf Ihrem Server (Backend)
     

Die Version "FREE" stellen wir kostenlos für Privatpersonen und Vereine zur Verfügung.
Generell darf diese Version frei verwendet werden, solange die Webseite nicht kommerziell genutzt wird.

Bitte beachten Sie, dass nicht alle Features und Leistungen in dieser Version enthalten sind.
Über die Unterschiede zur Version "BUSINESS" können SIe sich hier informieren.

Die Version "BUSINESS" ist für Webseiten gedacht, die kommerziell genutzt werden.
Mit dieser Version stellen wir umfangreiche Services und Dienste zur Verfügung.

Über die Unterschiede zur Version "FREE" können SIe sich hier informieren.

Die Integration von unserem CAPTCHA Modul in Ihrem Formular ist sehr einfach.
Hierzu kopieren Sie bitte das folgende HTML Snippet in Ihre Webseite:

<!-- wa_captcha -->
<script src="https://captcha.webappz.de/js/wa_captcha.js"></script>
<link href="https://captcha.webappz.de/css/wa_captcha.css" rel="stylesheet">
<script>
  var wa_captcha_text_placeholdertext = "CAPTCHA Code eingeben";    // optional --> specify placeholdertext for CAPTCHA input field
  var wa_captcha_mode = "O";                                        // mandatory --> M=mixed lines, O=ordered lines (default = M)
</script>
<!-- End wa_captcha -->

Mit dem Parameter "captcha_mode" kann man einstellen, wie der Code angeordnet werden soll.

Der Default-Wert = "M" . Das Ergebnis sieht so aus:


Mit dem Wert "O" wird der Code in einer eigenen Zeile dargestellt (nicht vermischt):


Innerhalb von Ihrem Formular müssen Sie jetzt noch einen "Platzhalter" definieren, indem das CAPTCHA angezeigt werden soll. Hierzu kopieren Sie einfach die Zeile:

<div id="wa_captcha" style="width: 200px"></div>

 an die gewünschte Stelle.

<form>
  ...
  ...
  <div id="wa_captcha" style="width: 200px"></div>
  ...
  ...
  <input type="submit" value="absenden">
</form>

Das Ergebnis sieht dann so aus:


In den vormals leeren "Platzhalter" wurden nun die folgenden HTML Formular-Elemente geladen:

<div id="wa_captcha" style="width: 200px">
  <img id="wa_captcha_img" name="wa_captcha_img"  src="https://captcha.webappz.de/img/captcha_start2_en.gif" alt="captcha">
  <progress id="wa_captcha_timer" value="20" max="20" style="width: 100%;"></progress>
  <input id="wa_captcha_id" name="wa_captcha_id" type="hidden">
  <input id="wa_captcha_text" name="wa_captcha_text" type="text" autocomplete="off" placeholder="CAPTCHA Code eingeben">
</div>

• wa_captcha_img
  Eine Bild-Komponente. Dieses Bild wird durch das eigentliche CAPTCHA Rätsel ausgestauscht, sobald man auf dieses klickt
   
• wa_captcha_timer
  Eine Timer-Komponente. Sobald das Rätsel geladen wurde, startet ein Countdown von 20 Sekunden. Innerhalb dieser Zeit muss der Benutzer die Lösung des Rätsels eingegeben haben und das Formular absenden.
   
• wa_capcha_id
  Ein unsichtbares Formularfeld. Dieses Feld beinhaltet die Lösung des Rätsels welches allerdings durch eine Verschlüsselung geschützt ist. Wir verwenden eine asymmetrische Verschlüsselung (RSA) um maximale Sicherheit zu gewährleisten.
   
• wa_captcha_text
  Ein Eingabefeld in welches der Benutzer die Lösung des Rätsels eingeben muss.

// ---- START: Check CAPTCHA  ---------------------------------------------------
if(count($error_arr) == 0) {  // if no error in form ... check captcha
	$ch = curl_init();
	curl_setopt($ch, CURLOPT_URL, "https://captcha.webappz.de/validate.php");
	curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($ch, CURLOPT_POST, true);

	$data = array(
		'wa_captcha_apikey' => "YOUR_API_KEY",
		'wa_captcha_id' => $_POST['wa_captcha_id'],
		'wa_captcha_text' => $_POST['wa_captcha_text']
	 );

	curl_setopt($ch, CURLOPT_POSTFIELDS, $data);
	$output = curl_exec($ch);
	curl_close($ch);

	switch ($output) {
	case 0:
		$errormsg = "Der CAPTCHA Code ist nicht korrekt";
		$error_arr['common'] = $errormsg;	
		break;
	case 1:
		// CAPTCHA wurde korrekt gelöst
		break;
	case 9:
		$errormsg = "CAPTCHA ist abgelaufen (bitte Bild anklicken)";
		$error_arr['common'] = $errormsg;	
		break;
	}	
}
// ---- END: Check CAPTCHA  ---------------------------------------------------