Daten-Validierung mit Google

Logo reCAPTCHA

Mein Webseiten-Projekt auf beispiele.rolfkarlen.ch habe ich nun mit einer Datenbank verbunden. Damit ich die anfallenden Daten zu meinen Beispiel-Programmen auf einfache Weise in die Datenbank einfügen kann, möchte ich einen geschützten Bereich einrichten. Dazu benötige ich eine Anmelde-Seite. Damit mein Webauftritt nicht einem Denial of Service (DoS) erliegt, füge ich der Anmelde-Seite ein sogenanntes reCAPTCHA von Google hinzu. In diesem Beitrag erläutere ich, wie ich vorgehe. Zuerst möchte ich aber für den technisch nicht so versierten Leser erklären, wofür DoS (Denial of Service) steht.

Was ist DoS?

Bei DoS handelt sich um einen Ausfall eines Computers – meist Webserver -. Dieser kann dann über das Internet nicht mehr erreicht werden. Dass es so weit kommt, liegt in vielen Fällen einem übermässigen Aufrufen des Webservers zugrunde, eine sogenannte DDoS-Attacke. Mehr dazu in diesem Wikipedia-Artikel.

Wo gibt es reCAPTCHA?

reCAPTCHA-Widget validiert
ReCAPTCHA-Widget Validierung Clientside.

Das reCAPTCHA-Widget wird von Google unterhalten. Zurzeit steht die 3. Version in den Startlöchern. Auf dieser Google-Seite gibt es Hintergrund-Informationen.

Vorgehen

API-Schlüssel erhalten

Auf dieser Google-Seite kann das Widget angemeldet werden.

reCAPTCHA-Widget einrichten
ReCAPTCHA-Widget einrichten.

Als Erstes muss dem Widget einen Namen vergeben werden. Im Bild unter Punkt 1. Dann muss die Version ausgewählt werden. Ich wähle Version 2 (Punkt 2). Es kann aus drei Möglichkeiten ausgewählt werden. Ich wähle die Sichtbare für Webseiten (Punkt 3). Als Nächstes muss mindestens eine Domain – Webadresse – angeben werden. Es sollte die Hauptdomain sein. Subdomains werden dann automatisch eingebunden. Dem Domain-Namen sollte auch die drei W’s nicht vorangestellt werden (Punkt 4). Nach Akzeptieren der Nutzungsbedingungen kann das Formular abgeschickt werden. Danach werden die API-Schlüssel bereitgestellt. Die Schlüssel können auch unter den Einstellungen angesehen werden. Die Einstellungen finden sich auf der Haupt-Adminseite. Oben rechts muss auf das Zahnrad geklickt werden.

reCAPTCHA-Widget-Schlüssel
ReCAPTCHA-Widget-Schlüssel

HTML-Datei der Aufbau

Das Widget besteht aus einem div-Element, das in jedes html-Formular eingefügt werden kann.

<div id="div-recaptcha" class="g-recaptcha" data-callback="recaptchaCallback" data-expired-callback="expCallback" data-sitekey="WEBSITESCHLÜSSEL"></div>

Und so sieht mein html-Formular aus.

<form class="form" action="validation.php" method="POST">
  <label class="form-label" for="username">Benutzername:</label><br>
  <input id="username" name="username" type="email" required autocomplete="username"><br><br>
  <label class="form-label" for="current-password">Passwort:  </label><br>
  <input id="current-password" name="password" type="password" minlength="8" required autocomplete="current-password"><br><br>
  <div id="div-recaptcha" class="g-recaptcha" data-callback="recaptchaCallback" data-expired-callback="expCallback" data-sitekey="WEBSITESCHLÜSSEL"></div><br>
  <input id="submit-button" class="submit" type="submit" value="Senden" disabled>
</form>

Darunter setze ich die Javascript-API-Verbindung.

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

Im Kopf der html-Datei setzte ich einen weiteren Javascript-Block. Mit ihm schalte ich den Senden-Button ein und aus. Dies sieht so aus.

<script type="text/javascript">
  function expCallback(){
    const submitButton = document.getElementById('submit-button');
    const typ = document.createAttribute('disabled');
    submitButton.attributes.setNamedItem(typ);
  }
  function recaptchaCallback(){
    if(grecaptcha && grecaptcha.getResponse().length !== 0){
      const submitButton = document.getElementById('submit-button');
      submitButton.attributes.removeNamedItem('disabled');
    }
  }
</script>

Auf die beiden Funktionen im oberen Javascript-Code verweisen die beiden Attribute data-callback und data-expired-callback im div-Element. Für das div-Element gibt es noch weitere Attribute. Auf dieser Seite sind sie alle aufgelistet.

PHP-Datei die Validierung

Damit das Formular verarbeitet werden kann, braucht es die Server seitige Programmiersprache PHP. Und so sieht der Inhalt der PHP-Datei aus.

echo $_POST['username'].'<br>';
echo $_POST['password'].'<br>';

if (isset ($_POST['g-recaptcha-response']) && !empty ($_POST['g-recaptcha-response'])){
  $secret = 'GEHEIMERSCHLÜSSEL'; 
  $verifyResponse = file_get_contents ('https://www.google.com/recaptcha/api/siteverify?secret='.$secret.'&response='.$_POST['g-recaptcha-response']);
  $responseData = json_decode ($verifyResponse); 
  if ($responseData-> success){
    echo 'Validierung: erfolgreich'; 
  } else {
    echo 'Validierung: fehlgeschlagen'; 
  }
}

Dieser PHP-Code gibt zuerst den Inhalt der beiden input-Elemente aus. Danach prüft er, ob das div-Element gesetzt und nicht leer ist. In der ersten Variablen der if-Verzweigung wird der Geheimschlüssel hinterlegt. Dann wird der Inhalt des div-Elements auf dem Google-Server validiert. Von Google kommt eine json-Datei zurück, die PHP umwandeln muss. Steht in json-Datei success, war die ganze Validierung erfolgreich.

Das Ergebnis

Unten ist das html-Formular mit reCAPTCHA zum Ausfüllen. Es leitet auf die Datei validation.php weiter.








Fazit

Somit ist mein html-Formular vor einer DDoS-Attacke geschützt. Dank der Vorarbeit von Google ist das Schützen von Daten eine einfache Angelegenheit.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.