Wie können Sie "No CAPTCHA reCAPTCHA" in Ihre Website integrieren?

German (Deutsch) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

CAPTCHA-Eingaben sind vielleicht die häufigste aller frustrierenden Erfahrungen im Internet. Sie sind schmerzhaft genug für die Mehrheit der Benutzer, geschweige denn für sehbehinderte Personen oder jeden, der auf assistive Technologien wie Screenreader angewiesen ist, um auf das Web zuzugreifen. Leider sind CAPTCHAs im Kampf gegen Spam absolut unerlässlich.

A necessary evil thanks spammers — Ein notwendiges Übel (Danke Spammer)

Trotz der Tatsache, dass traditionelle CAPTCHAs mit "verzerrtem Text" für menschliche Benutzer nicht lesbar sind, hat die moderne künstliche Intelligenztechnologie weniger Probleme, sie zu lösen. Google verwendet sogar eine ähnliche Technologie, um Hausnummern und Roadsigns zu lesen, um Google Street View-Standorte zu bestätigen!

Es ist daher nur logisch, dass Googles eigene Entwickler gegen Ende 2014 die beste CAPTCHA-Lösung entwickelt haben. Das NoCAPTCHA reCAPTCHA erfordert nichts weiter als einen Fingertipp, einen Mausklick oder die Fokussierung auf die Eingabe mit der Tastatur und dem Schlagen die Leertaste.

In den meisten Fällen ist es so einfach, aber wenn die Risikoanalyse von Google immer noch nicht sicher ist, ob Sie ein Mensch sind, wird eine zweite Aufforderung angezeigt.

Sie können es bereits überall im Web sehen, wie auf der Anmeldeseite von @materialup zum Beispiel.

Erhalten Sie NoCAPTCHA reCAPTCHA

Lassen Sie uns auf den Punkt kommen und uns mit NoCAPTCHA einrichten.

Schritt 1

Zuerst benötigen wir einen API-Schlüssel. Gehen Sie also zu https://www.google.com/recaptcha/admin. Um auf diese Seite zugreifen zu können, müssen Sie in einem Google-Konto angemeldet sein. Sie werden aufgefordert, Ihre Website zu registrieren, geben Sie ihr einen passenden Namen und listen Sie dann Domains auf (zum Beispiel tutsplus.com), wo dieser bestimmte reCAPTCHA verwendet wird. Subdomains (wie webdesign.tutsplus.com und code.tutsplus.com) werden automatisch berücksichtigt.

Schritt 2

Danach erhalten Sie einen Site-Schlüssel und seinen Partner-Geheimschlüssel:

Schritt 3

Unter den Schlüsseln sehen Sie einige Auszüge, um reCAPTCHA auf Ihrer Website einzubinden. Zuerst gibt es das JavaScript:

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

Sie können auch definieren, welche der 40 unterstützten Sprachen Sie verwenden, indem Sie der Zeichenfolge einen Parameter hinzufügen. Hier fügen wir es hinzu, das uns eine spanische Sprache reCAPTCHA geben wird:

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

Platzieren Sie dieses Skript-Tag am Fuß Ihrer Seite (oder direkt unter dem Formular, in dem der reCAPTCHA angezeigt wird, je nachdem, wie Sie das Laden Ihrer Assets priorisieren).

Schritt 4

Als nächstes folgt der Platzhalter, den Sie Ihrem Formular-Markup hinzufügen müssen, wo auch immer der reCAPTCHA erscheinen soll:

1	<div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

Hinweis: das Attribut data-sitekey enthält den Wert Ihres Schlüssels, nicht dieses Dummy-Beispiels.

Es gibt weitere Attribute, die Sie hinzufügen können, um das Aussehen und die Funktionalität Ihres reCAPTCHA an dieser Stelle anzupassen. Wenn Sie z. B. data-theme="dark" zu diesem div hinzufügen, erhalten Sie eine dunkle Version, die möglicherweise besser zu Ihrer Benutzeroberfläche passt:

Weitere Informationen zur Konfiguration Ihres reCAPTCHA finden Sie unter developers.google.com.

Etwas zusammensetzen

Jetzt haben wir die ersten Zutaten, es ist Zeit, sie in eine Arbeitsumgebung zu bringen.

Schritt 1

Lassen Sie uns unser Skript-Tag und den Platzhalter in eine einfache Form bringen:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>How to Integrate Google “No CAPTCHA reCAPTCHA” on Your Website</title>
  </head>

  <body>

    <form action="" method="post">

      <label for="name">Name:</label>
      <input name="name" required><br />

      <label for="email">Email:</label>
      <input name="email" type="email" required><br />

      <div class="g-recaptcha" data-sitekey="6LcePAATAAAAAGPRWgx90814DTjgt5sXnNbV5WaW"></div>

      <input type="submit" value="Submit" />

    </form>

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

  </body>
</html>

Hier haben wir eine Barebones-Seitenstruktur mit einem Formular verwendet, das eine name-Eingabe, eine email-Eingabe und eine Senden-Schaltfläche enthält. Es gibt hier überhaupt kein Styling, weil es für dieses Tutorial nicht wirklich notwendig ist.

our captcha form — Sie sollten etwas haben, das so aussieht

Um zu zeigen, dass der reCAPTCHA-Test bestanden wurde, müssen wir einige serverseitige Überprüfungen durchführen. In diesem Fall tun wir das mit PHP, also speichern Sie diese Datei in einem neuen Projekt als index.php.

Schritt 2

Sie werden feststellen, dass die Methode des Formulars eine post ist. Wenn wir die Formulardaten übermitteln, wird sie innerhalb eines Arrays von Variablen an diese Seite zurückgegeben. Wir können diese Variablen ausgeben, indem wir sie überlappen, also fügen Sie Ihrer Seite irgendwo folgendes hinzu:

    <?php 
      foreach ($_POST as $key => $value) {
        echo '<p><strong>' . $key.':</strong> '.$value.'</p>';
      }
    ?>

Das nimmt jedes Schlüssel/Wert-Paar, das in unserem $_POST-Array vorhanden ist, und gibt sie mit ein wenig Formatierung aus. Wenn Sie nun das Formular abschicken, sollten Sie Folgendes sehen:

Sie sehen den zurückgegebenen Wert für name und email, aber auch einen Wert für g-recaptcha-response. Wenn Sie den CAPTCHA-Test nicht abschließen konnten, ist dieser Wert leer, aber wenn Sie die Checkbox "Ich bin kein Roboter" aktiviert haben, sehen Sie eine riesige Zeichenfolge.

Diesen Wert müssen wir an Google senden, damit er überprüft werden kann.

Schritt 3

Glücklicherweise hat das Entwicklerteam von Google hier die harte Arbeit für uns geleistet. Gehen Sie also zum ReCAPTCHA-Projekt auf Github über und holen Sie sich eine Kopie der Bibliothek recaptchalib.php. Platzieren Sie es im Stamm deines Projekts und referenziere es dann oben in deiner index.php Datei:

<?php

// grab recaptcha library
require_once "recaptchalib.php";

?>

Schritt 4

Diese Bibliothek enthält eine Sammlung von Funktionen, die die g-recaptcha-response (zusammen mit unserem geheimen Schlüssel) über eine HTTP-Anfrage an Google senden. Sie sammeln dann die Antwort und überprüfen, ob das CAPTCHA erfolgreich war oder nicht. Um das zu verwenden, müssen wir vor dem schließenden PHP-Tag zunächst einige Variablen einrichten:

// your secret key
$secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT";

// empty response
$response = null;

// check secret key
$reCaptcha = new ReCaptcha($secret);

ReCaptcha() überprüft, ob unser geheimer Schlüssel vorhanden ist. Wenn nicht, tötet es den Prozess und rät uns, einen zu holen. Wir führen dann unsere Details durch:

// if submitted check response
if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
    );
}

Schritt 5

Angenommen, es ist alles gut mit unserem übermittelten Formular, wird die $response-Variable mit "success" zurückgemeldet und wir können die Formulardaten weiter verarbeiten. So könnte das aussehen: Entfernen Sie das Bit, in dem wir die Formulardaten durchlaufen haben, und fügen Sie über dem Formular die folgende Überprüfung hinzu:

    <?php
      if ($response != null && $response->success) {
        echo "Hi " . $_POST["name"] . " (" . $_POST["email"] . "), thanks for submitting the form!";
      } else {
    ?>

Fügen Sie abschließend ein schließendes PHP-Tag nach dem Formular hinzu:

1	<?php } ?>

Das zeigt das Formular an, es sei denn, es wurde erfolgreich gesendet. In diesem Fall wird ein kleines Dankeschön angezeigt. Hier ist die letzte Demo.

Schlussfolgerung

Das war eine sehr grobe und fertige PHP Implementierung des NoCAPTCHA reCAPTCHA. Es ist weit offen für Verbesserungen, aber wird Ihnen hoffentlich die Grundlagen vermitteln. Die Gutschrift für die Bibliothek geht an das Entwicklerteam von Google, und ich möchte auch Matt Ausstaguel dafür danken, dass er mich darauf aufmerksam gemacht hat.

Nützliche Ressourcen

ReCAPTCHA 1.0.0 auf Github
ReCAPTCHA Dokumentation
Bist du ein Roboter? Einführung "CAPTCHA reCAPTCHA" des Google Sicherheitsblogs
WordPress ReCaptcha Integration reCaptcha Plugin für Login, Anmeldung, Kommentarformulare, Ninja Forms und Kontaktformular 7