Captcha

Visuelles Beispiel

Allgemein

Das Modul Captcha dient der Prüfung von Eingaben in webbasierten Formularen. Es stellt sicher, dass die Eingaben von Personen und nicht durch Computer (z. B. über Skripts oder andere Programme) erfolgen.

Leistungsmerkmale

Anzeige einer zufällig ausgewählten Zeichenkette in grafischer Form (Bilddatei)
Eingabemöglichkeit für die Zeichenkette als Text
Prüfung, ob Bild- und Textinformation übereinstimmt
Auslösen einer Aktion (z. B. Mailversand, Datenbankeintrag), nur wenn die Prüfung positiv verläuft
Fehlermeldung, falls Bild- und Textinformation nicht übereinstimmt
Clientseitige Überprüfung der Eingabe ohne Postback

Beschreibung

CAPTCHA ['kæptʃə] ist ein Akronym für “Completely Automated Public Turing test to tell Computers and Humans Apart”. Wörtlich übersetzt bedeutet das „Vollautomatischer öffentlicher Turing-Test, um Computer und Menschen zu unterscheiden“. Das Modul realisiert den oben beschriebenen Leistungsumfang. Es wird im Zusammenhang mit formularbasierten Modulen wie dem Mailformular, Forum oder Kommentarfunktion eingesetzt.

Hinweis: Die Verwendung des Captcha Moduls erhöht die Sicherheit der Website, kann aber deren Barrierefreiheit beeinträchtigen.

Im Einzelnen können die folgenden speziellen Einstellungen getroffen werden:

Captcha Form: Wählen Sie hier das gewünschte Formular-Template aus, das in der Regel aus einer Captcha-Grafik sowie einer Textbox zur Eingabe des Captcha-Textes beinhaltet.
Groß-/Kleinschreibung Überprüfung deaktivieren: Aktivieren Sie diese Option, wenn Sie nicht zwischen Groß- und Kleinschreibung unterscheiden wollen.
Captcha Code Generierung inklusive Kleinbuchstaben: Aktivieren Sie diese Option, wenn Sie zusätzlich Kleinbuchstaben verwenden wollen. Standardmäßig werden nur Großbuchstaben generiert.
Captcha Code Generierung inklusive Zahlen: Aktivieren Sie diese Option, wenn Sie zusätzlich Zahlen verwenden wollen. Standardmäßig werden nur Großbuchstaben generiert.
Captcha Code Generierung benutzte Farben: Bei Aktivierung durch Anhaken können Farben für die Captcha-Bilder einstellt werden,
z. B. welche Farbe der Text haben soll oder welche Farbe der Hintergrund hat.

Abb.: Spezielle Einstellungen des Captcha Moduls.

Eine detaillierte Beschreibung der möglichen Customization-Punkte und Templates können Sie in unserem Partner- und Support-Portal (partner.contentxxl.com) finden.

Templatebeispiel

<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-image"></label>
      <div class="col-md-3">[CaptchaImage]</div>
      <div class="col-md-5"><a class="btn btn-default" href="javascript:CaptchaRefresh();"><span class="glyphicon glyphicon-refresh"></span></a></div>
</div>
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-note"></label>
        <div class="col-md-8"><span class="alert-text">[localize:captcha_enter_code]</span></div>
</div>
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-text"></label>
      <div class="col-md-3">[tb:captchatext:class="form-control"]</div>     
</div> 
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-errormessage"></label>
      <div class="col-md-8">
         <span class="alert-text" [mvif:errorcode:eq:1]>[localize:captcha_not_correct]</span>
    </div>     
</div>

Templatebeispiel mit Ajax (Aufruf ohne Postback)

<script type="text/javascript">
function GetCaptcha() {
        try {
           PageMethods.set_path(baseurl + "desktopdefault.aspx/");
           PageMethods.GetCaptchaCode(onSucceeded, onFailed);
        catch (e) {
        }
function onSucceeded(result) {
  {
    if (document.getElementById('<%=captchatext.clientid%>').value == result  )
      sendForm();
    else
    document.getElementById('msg').innerHTML = 'Falscher Code';
  }
}
  function onFailed(error) {
   alert(error);
}
</script>
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-image"></label>
      <div class="col-md-3">[CaptchaImage]</div>
      <div class="col-md-5"><a class="btn btn-default" href="javascript:CaptchaRefresh();"></a></div>
</div>
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-note"></label>
        <div class="col-md-8"><span class="alert-text">Bitte Code eingeben</span></div>
</div>
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-text"></label>
      <div class="col-md-3">[tb:captchatext:class="form-control"]</div>     
</div> 
<div class="form-group">
       <label class="col-md-4 control-label" for="captcha-errormessage"></label>
      <div class="col-md-8">
         <span id="msg" class="alert-text"></span>
    </div>
</div>
<a href="javascript:GetCaptcha();">Formular absenden</a>

Im korrespondierenden Mailformular-Template muss die aufgerufene Funktion sendForm definiert sein. Diese löst dann das Absenden des Formulars über den Button mit der ID senden (beispielsweise) aus:

function sendForm() { document.getElementById('<%=senden.ClientID%>').click(); }

[lbn:senden:text="" CommandName="Update"]

Platzhalter

Platzhaltername	Typ	Platzhalterbeschreibung
[CaptchaImage]	control	Erstellt das Bild mit dem Captcha-Code.
[Errorcode]	integer	Nach dem Abschicken des Formulars (Postback) wird der eingegebene Text mit dem Bildcode verglichen. Wenn Sie übereinstimmen, wird hier 0 zurückgegeben, ansonsten 1.

Anmerkung :
Sie müssen zudem eine Textbox mit der id „captchatext“ in Ihr Template einbauen, damit der Benutzer die Möglichkeit hat, den Captchacode einzugeben, der im Bild angezeigt wird (siehe obiges Beispiel).

Sie können einem Benutzer ermöglichen, das Captcha-Bild zu aktualisieren, indem Sie folgenden Beispielcode verwenden:

<a href="javascript:CaptchaRefresh();">refresh</a>

Captcha

Service Links