Google reCaptcha Botschutz einbauen

Aus bknowledgebase
Zur Navigation springen Zur Suche springen

Einführung[Bearbeiten]

Botnetze stellen ein immer größeres Problem im Netz dar. Deshalb sind wirksame Technologien zum Schutz von Web-Formularen einzusetzen, die die übermäßige Nutzung derselben durch automatisierte Programme möglichst unterbinden oder erschweren.

Eines der bekanntesten "Tools" dazu ist die reCaptcha von Google, die samt der Google-API genutzt werden kann um dieses Ziel zu erreichen.

Den Einsatz stelle ich kurz vor.

Vorbereitung[Bearbeiten]

Zunächst muss die zu schützende Domain bei Google registriert werden. Man benötigt dazu nur einen Google-Account und kann dann folgende Website aufrufen:

https://www.google.com/recaptcha/admin#list

Dann wählt man den reCaptcha-Typ aus. Meist wird hier wohl Version 2 zum einsatz kommen, aber auch andere Typen z.B. speziell für Android Geräte können gewählt werden.

Und man trägt die Domain ein, die geschützt werden soll. z.B. "bknowledgebase.de"

Anschließend wird man auf eine Seite weitergeleitet auf der (fast) alle notwendigen Infos enthalten sind um eine einfache Implementation zu verwirklichen.

Auf dieser Infoseite erhält man den Websiteschlüssel und den Geheimen Schlüssel die in der Folge noch zum Einsatz kommen werden.

Implementation[Bearbeiten]

Hier werde ich ein Einfaches Formular verwenden und eine simple Bestätigungsseite je nachdem ob die Überprüfung durch reCaptcha erfolgreich war oder nicht.

Der Websiteschlüssel wird auf der Formularseite benötigt, um quasi Google gegenüber zu signalisieren welche Website gerade eine Validierung durchführen möchte und der

Geheime Schlüssel wird auf der Folgeseite zur Validierung genutzt.


Formularseite[Bearbeiten]

Auf dieser Seite müssen die reCapcha Snippets eingefügt werden, die die Validierung auslösen

1.

Dazu fügt man folgenden Code am ende des "head Tags" also vor dem schließenden "</head" ein.

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

Wie man sieht ist es immer der gleiche Code, hier sind keine Parameter/Variablen Elemente enthalten.

2.

Außerdem fügt man folgenden Code am Ende des "Form Elementes" der Seite ein. Bzw. dort wo das bekannte reCaptcha Element in folgender Form:

ReCaptcha.png

erscheinen soll.

<div class="g-recaptcha" data-sitekey="<Websiteschlüssel>">


Bei <Websiteschlüssel> fügt man natürlich den Schlüssel ein, der einem von Google auf der Infoseite bekannt gegeben wurde.


3.

Hier eine Beispielimplementation für die Formularseite.

<!DOCTYPE html>
<html lang="de">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <script src='https://www.google.com/recaptcha/api.js'></script>
  </head>
  <body>
    <header>
	</header>
	  
	  <form action="follow.php" method="POST">
		<div>
			<label for "username">Username</label>
			<input type="text" id="username" name="username"></input>
		</div>
		<div>
			<label for "password">Password</label>
			<input type="text" id="password" name="password"></input>
		</div>
		
		<div>
			<div class="g-recaptcha" id="g-recaptcha" data-sitekey="<Website-Schlüssel>">
			</div>
        </div>
		
		<div>
            <label for="submitButton"> </label>
            <input type='submit' id='submitButton' value='Submit'/>
        </div>
	  </form>
	  
	<footer>
	</footer>
  
  </body>

</html>
	

Folgeseite[Bearbeiten]

Auf dieser Seite muss nun noch via Google-API überprüft werden ob die Validierung erfolgreich war

Dazu ist es gut zu wissen, dass das Google-Snippet ein verstecktes Input Element auf der Seite einfügt, welches den Namen g-recaptcha-response trägt und somit mit den Formulardaten übertragen wird.

Den hier übergebenen "Response-Code" wollen wir nun auf dieser Seite verwenden um Ihn mitsamt dem Geheimen Schlüssel und der IP-Adresse des Users an Google weiterzugeben. Die Antwort des Google Dienstes enthält dann die Meldung ob die Validierung erfolgreich war.

Wir benötigen also 4 Dinge.

1. Die URL zur Google-API für den Aufruf

https://www.google.com/recaptcha/api/siteverify

2. Den Geheimen Schlüssel/Secret von der Info-Seite (Beispielhaft)

6LfciDgUDKJFGIEAptXJXgKJyalv0cpCEfrU3NlHm

3. Die IP Adresse des Users/Clients der die Seite aufruft. Dazu kann man eine PHP Variable verwenden.

$_SERVER['REMOTE_ADDR']

4. Eine Möglichkeit die Google API aufzurufen. Ich verwende hier für dieses Beispiel die simpelste Methode via "file_get_contents" die einfach nur die Website abruft und gebe die Parameter mit. Es gibt natürlich noch schönere Möglichkeiten via CURL o.ä.

file_get_contents($url);

Wenn nun die entsprechenden Werte wie im Beispiel (s.U) übergeben werden, bekommt man eine Antwort vom Server die mit json_decode in ein Objekt umgewandelt werden können (nur zur schöneren Verwendung).

Alternativ könnt Ihr euch auch via var_dump($response) einfach mal den rohen Inhalt der Antwort vom Server ansehen, dann wird es auch ziemlich klar und einfach erkennbar was hier passiert.

Schließlich kann man dann je nach Rückgabewert (Success = 1 oder 0) die gewünschte Folgeaktion ausführen, z.B. eine Mail versenden oder eben eine Fehlermeldung ausgeben etc.


Und hier die Beispielimplementation für die Folgeseite, die durch das Form-Element aufgerufen wird.

<?php
/*Recapcha Validieren*/

$url = "https://www.google.com/recaptcha/api/siteverify";
$response_key = $_POST['g-recaptcha-response'];
$response = file_get_contents($url.'?secret=<Geheimer Schlüssel/Secret>'.'&response='.$response_key.'&remoteid='.$_SERVER['REMOTE_ADDR']);

$response = json_decode($response);

if($response->success != 1) {

  /*Message ausgeben und zurück zum Formular*/

  echo '<script language="javascript">';
  echo 'alert("Please Validate That you are no Bot.");';
  echo "window.location.href = 'form.html';";
  echo '</script>';

} else {

  print "Erfolgreich! - Tolle Wolle";
}
?>

Beispiel[Bearbeiten]

Hier gibts auch die Beispielimplementation zum anschauen.

https://bknowledgebase.de/reCaptcha/form.html