ROG Innovation Logo

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

reCAPTCHA - Der einfache Spamschutz von Google

reCaptcha Website Formular Spamschutz in Website einbinden

Inhaltsverzeichnis:
  - Einleitung
  - Beispiel
  - Erstellung
  - Einbindung Checkbox
  - Einbindung ohne Checkbox
  - Auswertung (PHP)
  - Code Beispiel ohne JavaScript
  - Formular Code Beispiel (Download)
info Inhalt wurde mit PHP 7.2.0 geprüft 

Einleitung

reCAPTCHA von Google ist ein gratis Captcha-Dienst (Spamschutz) und kann in die eigene Website z.B. als Formular Spamschutz eingebunden 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 reCHAPTCHA, Version 2

*Name


*Nachricht





*Pflichtfeld

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 (allfällige Unterdomänen werden ebenfalls automatisch berechtigt).

Bei der reCHAPTCHE Methode von Google kann zwischen 3 möglichen Typen unterschieden werden:

reCaptcha Spamschutz einrichten

Nach der reCAPTCHA-Typ Auswahl kann schon mit dem Einbinden des Codes in die eigene Website begonnen werden.


reCHAPTCHA, Version 2
Hier muss der Benutzer eine Checkbox anhaken oder Bilder zuordnen
reCaptcha Spamschutz einbinden

Invisible reCHAPTCHA
Hier versucht Google anhand des Browserverlaufs und den Internetaktivitäten das Anhaken einer Checkbox zu vermeiden, im Zweifelsfall wird aber auch hier eine Verifizierung durch eine Checkbox oder Bilder verlangt.
reCaptcha Formular Spamschutz erstellen

reCHAPTCHA-Android
Ist für Android Apps gedacht.


Einbindung reCHAPTCHA, Version 2

Folgender JavaScript-Code 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 das reCAPTCHA-Widget im <form>-Bereich vor dem "Sende-Button" im Formular eingefügt.

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 Beispiel
<html>
  <head>
   <title>PHP Kontaktformular mit Google reCAPTCHA Spamschutz</title>
   <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
   <h1>Google reCAPTCHA Spamschutz</h1>
   <h2>PHP Kontaktformular mit Google reCAPTCHA Spamschutz</h2>
   <!-- Fallback bei deaktiviertem JavaScript im Browser -->
   <noscript>
    <span style="color: red;">Bitte JavaScript im Browser aktivieren!</span<br>
    So kann JavaScript im Browser aktiviert werden: <span class="articletextlink"<a target="_blank" title="javascript" href="http://enable-javascript.com/de/"JavaScript aktivieren</a></span>.
   </noscript>
   <!-- Formular Eingaben mit reCAPRCHA Spamschutz -->
   <form id="comment_form" action="auswertung.php" method="post">
   <span style="color: #DF0101;">*</span>Name<br>
   <input required="required" class="inputbox" name="name" type="text"><br>
   <br>
   <span style="color: #DF0101;">*</span>Nachricht<br>
   <textarea maxlength="500" required="required" class="inputbox" rows="7" name="nachricht"></textarea><br>
   <br>
   <!-- Google reCAPRCHA Checkbox -->
   <div class="g-recaptcha" data-sitekey="---HIER DEIN WEBSITESCHLÜSSEL EINGEBEN---"></div><br>
   <!-- Formular zur Auswertung absenden -->
   <input type="submit" name="submit" value="Senden">
   </form>
   <br><br>
   <span style="color: #DF0101;">*</span><span style="font-style: italic;">Pflichtfeld</span><br>
  </body>
</html>

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

Die Auswertung vom Google reCHAPTCHA Spamschutz wird in der auswertungsseite.php Datei realisiert.

Genauere Informationen zur Benutzung des reCAPTCHA Version 2 von Google sind hier zu finden: Google Developers reCAPTCHA.


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

Einbindung Unsichtbares (Invisible) reCHAPTCHA

Genauere Informationen zur Benutzung des Invisible reCHAPTCHA von Google sind hier zu finden: Google Developers reCAPTCHA.

Auswertung (PHP)

Kommen wir zur Auswertung.
Natürlich muss das Ergebniss von Google ausgewertet werden, damit zwischen Spam oder eben nicht Spam unterschieden werden kann.
Hierfür wird der Rückgabewert der Variabel 'g-recaptcha-response' mit der Kombination von dem geheimen Schlüssel (Secret Key) verwendet.
Die Auswertung kann danach bequem über eine PHP-Seite (in unserem Fall "auswertungsseite.php") erfolgen.
Der Secret Key befindet sich im reCaptcha Menu unter dem Punkt 'Schritt 2: Serverseitige Integration' (aufklappen).

reCaptcha Formular Spamschutz Abfrage und Auswertung

Folgender PHP-Code muss nun zur Auswertung in die "auswertungsseite.php" eingefügt werden.

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 ="";}
if (isset($_POST["name"]))
  {$name = htmlspecialchars($_POST["name"]);}
  else {$name ="";}
  if (isset($_POST["nachricht"]))
  {$nachricht = htmlspecialchars($_POST["nachricht"]);}
  else {$nachricht ="";}
// Google reCaptcha Checkbox wurde nicht angehakt
if(!$captcha){
  echo 'Google reCaptcha Checkbox wurde nicht angehakt.<br>
  Bitte nochmals versuchen - Danke.<br><br>
  <a href="formular.php"><span class="button">zurück</span></a>';
  exit;}
// Google reCAPTCHA Auswertung
$secretKey = "---HIER DEIN GEHEIMER SCHLÜSSEL EINGEBEN---";
$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);
// Spamversuch
if(intval($responseKeys["success"]) !== 1) {
  echo 'Leider Spam!<br><br>
  <a href="formular.php"><span class="button">zurück</span></a>';}
// Kein Spam: Hier kann z.B. eine eMail versendet werden oder ein Datenbankeintrag erstellt werden
else {
  echo 'Überprüfung war Erfolgreich<br><br>';
  echo 'Name: '.$name.'<br>';
  echo 'Nachricht: '.$nachricht;
  echo '<br><br><a href="formular.php"><span class="button">zurück</span></a>';}
?>

Achtung!
Der verwendete Server oder Hostinganbieter muss für die Auswertung PHP unterstützen.

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>

Formular Code Beispiel für reCHAPTCHA Version 2

Gebrauchshinweise:
  • In der Datei formular.php muss der "WEBSITESCHLÜSSEL" durch den eigenen "reCAPTCHA Schlüssel" ersetzt werden.
  • In der Datei auswertung.php muss der "GEHEIMER SCHLÜSSEL" durch den eigenen "Geheimer Schlüssel" ersetzt werden.

download Download
recaptcha_example.zip

Enthaltene Dateien:
  • formular.php
  • auswertung.php


letztes Update 19. Januar 2018

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

Patrick 13.04.2020 15:05
Vielen Dank für dieses Tutorial. Das ist super!
Ich konnte das Recaptcha erfolgreich einbauen. Aber leider funktioniert das Versenden des Formulars mit FormMail.cgi nicht mehr.
Vor dem Einbau des Recaptcha:
<form action="/cgi-sys/FormMail.cgi" method="post">
Nachher:
<form id="order-form" action="auswertungsseite.php" method="post">
Ich denke, ich muss jetzt FormMail.cgi im PHP aufrufen. Aber ich weiss nicht, wie das genau geht.
Weiss das jemand?
ROG Innovation 10.02.2020 18:01
Hallo @Bob
Vielen Dank für Dein Feedback. Sowas zu hören freut uns natürlich immer :)
Bob 09.02.2020 17:12
Hallo ROG Innovation
Vielen Dank! Dieses Tutorial hat mich vom ewigen "Googeln" erlöst, weil es von Beginn an perfekt funktioniert hat.
Gruss Bob
Otmar 21.01.2019 19:01
Vielen Dank für die Vorlagen. Die Herausforderung war, deinen Code in das schon vorhandene Formular bzw. die Auswertung einzufügen. Wenn man alle Details genau so wie vorgegeben eingibt, funktioniert das einwandfrei.
ROG Innovation 12.05.2018 12:07
Hallo @Steffen Dieses Tutorial wurde mit der PHP Version 7.2 überprüft, welche PHP Version verwendest du?
Hast du den "reCAPTCHA Schlüssel" in der Datei formular.php und den "Geheimer Schlüssel" in der Datei auswertung.php durch deine eigenen Angaben ersetzt?
Ist JavaScript in deinem Browser aktiviert?
Funktioniert das reCAPTCHA Beispiel oben auf dieser Tutorial Seite bei dir?
Verwendest du die "reCHAPTCHA, Version 2" oder welche Einbindung hast du gewählt?

Steffen 12.05.2018 07:56
Ich verzweifle gleich an dem recaptcha sch** Hab mir nach100 Versuchen der Integration hier die Demodaten runtergeladen, personalisiert und ausprobiert. Egal was ich anstelle, immer "Leider Spam"... Router neu gestartet, neue IP, the same. Hilfääää!
ROG Innovation 23.03.2018 21:26
Hallo @Lulli
Super, dass Dir dieses Tutorial weiterhelfen konnte :)
Besten Dank für Dein motivierendes Feedback.
Lulli 23.03.2018 18:07
Danke! Nach langem Suchen und Probieren, das erste und einzige Tutorial, das man VERSTEHEN und UMSETZEN konnte.

*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