ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

reCaptcha - Der einfache Spamschutz von Google

reCaptcha

Inhaltsverzeichnis:
  - Einleitung
  - Beispiel
  - Erstellung
  - Einbindung
  - Auswertung (PHP)
  - Code Beispiel ohne JavaScript
  - Code Beispiel (Download)

Einleitung

reCaptcha von Google ist ein gratis Captcha-Dienst und kann in die eigene Website z.B. als Formular Spamschutz eingebunden und verwendet werden.
Die Aufgabe von reCaptcha besteht darin, bestimmte Handlung im Internet von einem Menschen zu einem Bot (Roboter oder automatisierter Spamserver) zu unterscheiden.
Somit kann sichergestellt werden, dass z.B. ein Formular wirklich von einem Menschen ausgefüllt wurde und nicht von einem Bot mit Spam zugemüllt wurde.

Beispiel


Name


e-Mail


Nachricht






Erstellung

Um die reCaptcha Funktion zu nutzen einfach auf Google reCaptcha mit seinem Google Account einloggen.
Nun kann die Website oder auch mehrere Websites festgelegt werden, welche den reCaptcha Code danach zur Spamverhinderung verwenden können (hier müssen ebenfalls auch allfällige Unterdomänen eingetragen werden).

reCaptcha

Danach kann schon mit dem Einbinden des Codes in die eigene Website begonnen werden.

Einbindung

Folgender JavaScript muss vor dem schliessenden </head>-Tag im HTML-Dokument eingebunden werden.

JavaScript Einbindung
<script src='https://www.google.com/recaptcha/api.js'></script>

Als nächstes wird noch das reCaptcha-Widget am Ende des <form>-Elements im Website-Formular eingefügt, welches auf Spam überprüft werden soll.

reCaptcha-Widget Einbindung
<div class="g-recaptcha" data-sitekey="WEBSITESCHLÜSSEL*"></div>

*WEBSITESCHLÜSSEL Muss durch den eigenen Google reCaptcha-Websitschlüssel ersetzt werden.

Den Website Schlüssel befindet Sich im reCaptcha Menu unter dem Punkt 'Schritt 1: Clientseitige Integration' (auf klicken).

reCaptcha

reCaptcha

Code Einbindung
<html>
  <head>
   <title>reCAPTCHA demo: Simple page</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
  </head>
  <body>
   <form action="?" method="POST">
    <div class="g-recaptcha" data-sitekey="WEBSITESCHLÜSSEL*"></div>
    <br/>
    <input type="submit" value="Submit">
   </form>
  </body>
</html>

*WEBSITESCHLÜSSEL Muss durch den eigenen Google reCaptcha-Websitschlüssel ersetzt werden.

Genauer Informationen zur Benutzung des reCAPTCHA von Google sind hier zu finden: Google Developers reCAPTCHA.


Achtung!
reCaptcha funktioniert nur wenn JavaScript im Browser nicht deaktiviert wurde.

Auswertung (PHP)

Kommen wir zur Auswertung. Natürlich müssen wir das Ergebniss von Google auslesen, damit wir zwischen Spam oder eben nicht Spam unterscheiden können.
Hierfür wird der Rückgabewert der Variabel 'g-recaptcha-response' mit der Kombination von unserem geheimen Schlüssel (Secret Key) verwendet.
Die Auswertung kann danach bequem über PHP erfolgen.
Dieser Secret Key befindet sich im reCaptcha Menu unter dem Punkt 'Schritt 2: Serverseitige Integration' (aufklappen).

reCaptcha

PHP Auswertung
<?php
// Variabeln
$captcha;
// Variabeln mit Inhalt aus dem Formular befüllen
if(isset($_POST['g-recaptcha-response'])){$captcha=$_POST['g-recaptcha-response'];}
else {$captcha ="";}
// Google reCaptcha Box wurde nicht angehakt
if(!$captcha){
 echo 'Google reCaptcha Checkbox aktivieren.'
 exit;}
// Spamversuch wird geblockt, es wird keine eMail versendet
$secretKey = "---DEIN SECRET KEY---";
$ip = $_SERVER['REMOTE_ADDR'];
$response=file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=".$secretKey."&response=".$captcha."&remoteip=".$ip);
$responseKeys = json_decode($response,true);
if(intval($responseKeys["success"]) !== 1) {
 echo 'Spam!';}
else {echo 'Erfolg';}
?>

Code Beispiel ohne Javascript

Soll reCAPTCHA auch von Besuchern welche JavaScript im Browser deaktiviert haben verwendet werden können muss das obige Code Beispiel mit untenstehenden Code Zeilen ergänzt werden.

Codebeispiel ohne JavaScript
<noscript> <div style="width: 302px; height: 422px;">
<div style="width: 302px; height: 422px; position: relative;">
<div style="width: 302px; height: 422px; position: absolute;">
<iframe src="https://www.google.com/recaptcha/api/fallback?k=your_site_key"
frameborder="0" scrolling="no"
style="width: 302px; height:422px; border-style: none;">
</iframe>
</div>
<div style="width: 300px; height: 60px; border-style: none;
bottom: 12px; left: 25px; margin: 0px; padding: 0px; right: 25px;
background: #f9f9f9; border: 1px solid #c1c1c1; border-radius: 3px;">
<textarea id="g-recaptcha-response" name="g-recaptcha-response"
class="g-recaptcha-response"
style="width: 250px; height: 40px; border: 1px solid #c1c1c1;
margin: 10px 25px; padding: 0px; resize: none;" >
</textarea>
</div>
</div>
</div>
</noscript>

Code Beispiel (Download)

download Download
recaptcha_example.zip


Enthaltene Dateien:
  • formular.php
  • auswertung.php



Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Free YouTube Video Music
Youtube gratis Musik für Youtube Videos
Anzeige
Spenden
ROG Innovation unterstützen