URBAN BASE Code

reCAPTCHA v3 als Spamschutz auf der eigenen Webseite einbinden

mario

Um ein Kontaktformular oder ein Loginformular vor Spambots zu schützen kannst du reCAPTCHA von Google verwenden.

Hier zeige ich dir wie du mit reCAPTCHA v3 ein Loginformular schützt.

Was ist reCAPTCHA?

Bei reCAPTCHA handelt es sich um einen Dienst von Google, der einen effektiven Spamschutz bieten soll.

reCAPTCHA v1

Die erste Version von reCAPTCHA wurde im März 2018 abgeschaltet und ist heute nicht mehr relevant.

Damals musste man noch einen Text eingeben der darüber etwas schlecht leserlich angezeigt wurde.

reCAPTCHA v2

Die Version 2 kennt man vermutlich, denn hier musste man nur mehr noch eine Check box anklicken.

Es gab auch schon eine „invisible“-Version wo man nichts mehr klicken musste.

reCAPTCHA v3

Die dritte und aktuelle Version ist fast komplett unsichtbar, lediglich ein kleiner Hinweis wird seitlich unten auf der Webseite eingeblendet.

Bei reCAPTCHA v3 wird ein „Score“ von 0.1 bis 1.0 erstellt und es liegt bei dir was passieren soll.

Bei jeder Seite in die du reCAPTCHA integrierst kommunizierst du mit einem reCAPTCHA Server, dieser schickt dir eine Antwort in JSON mit einem Score zurück.

Du kannst dich zum Beispiel bei einem Kontaktformular dafür entscheiden nur Anfragen durchzulassen die einen Score haben der höher als 0.6 ist.

Da Bots meist einen sehr geringen Score haben.





reCAPTCHA v3 einrichten

Um reCAPTCHA zu verwenden benötigst du einen Google Account.

Dann gehst du auf www.google.com/recaptcha und klickst auf „Admin console“.

Jetzt klickst du auf das Plus-Symbol oder gehst diese URL www.google.com/recaptcha/admin/create um eine neue Webseite zu registrieren.

Hier ein kleiner Überblick was du hier eintragen und auswählen solltest.

  1. Das Label ist der Name und ist nur für dich zur Übersicht, du kannst also entweder die URL oder einen Namen dafür verwenden.
  2. Hier wählst du reCAPTCHA Version 3 aus.
  3. Hier gibst du deine Domain an wo reCAPTCHA laufen soll, die Angabe dieser Domain schließt alle Subdomains ein.
  4. Bei Inhaber steht deine E-Mail Adresse, du kannst auch weitere Personen hinzufügen die Zugriff haben dürfen.
  5. Die Nutzungsbedingungen müssen natürlich gelesen und akzeptiert werden
  6. Die Benachrichtigungen solltest du aktivieren, dann bekommst du eine E-Mail wenn ein Problem auftaucht oder Spamzugriffe zunehmen.

Hast du alles ausgefüllt und ausgewählt, dann bist du auch schon fertig und du kommst auf die nächste Seite mit deinen Schlüsseln.

  1. Dieser Schlüssel wird in die öffentlich zugängliche Webseite eingebunden.
  2. Der Geheime Schlüssel darf der öffentlichkeit nicht zugänglich sein und wird nur im Backend für die Kommunikation mit den Google-Servern verwendet.

reCAPTCHA v3 auf der Webseite einbinden

Ich zeige dir hier am Beispiel eines Loginformulars wie du reCAPTCHA v3 einbindest.

Ich persönlich binde immer eine PHP-Datei (constants.php) ein die gewisse Konstanten definiert mit Daten die ich auf der gesamten Webseite immer wieder benötige.

Denn wenn ich etwas ändern will, dann sollte das zentral auf einer Stelle passieren.

Ich definiere hier den öffentlichen und den geheimen Schlüssel und den Score.

Die hier gezeigten Keys sind nur für dieses Beispiel, ersetze diese also mit deinen eigenen Keys.

// Öffentlicher Schlüssel
define('RECAPTCHA_KEY_PUBLIC', '6LeM46QZAAAAAFVGrdndVSjnYhDhcVC4F-jEXWKc');
// Geheimer Schlüssel
define('RECAPTCHA_KEY_SECRET', '6LeM46QZAAAAABpk6kPZPIoKMzUsZ1KwXytE8KrZ');
// Score-Wert
define('RECAPTCHA_SCORE', 0.6);

Das Loginformular

Als nächstes musst du dein Loginformular (login.php) etwas umbauen.

Das ist ein sehr einfacher Aufbau eines Loginformulars, aber zu Demonstrationszwecken ist es ausreichend.

<form method="post" action="verify.php">
    <input name="email" type="email">
    <input name="password" type="password">
    <button name="login" type="submit">Login</button>
</form>

Für reCAPTCHA musst du folgendes ändern.

Direkt in das Formular musst du ein verstecktes Eingabefeld einbauen: <input type="hidden" name="recaptcha_token" id="recaptcha_token">

Den Namen und die ID des versteckten Eingabefeldes kannst du selbst bestimmen.

Unter dem Formular musst du etwas JavaScript einbauen.

Als erstes wird die reCAPTCHA API JavaScript-Datei eingebunden mit dem Parameter ?render=<?=RECAPTCHA_KEY_PUBLIC?>. Du schickst also den öffentlichen Schlüssel mit.

Darunter wird ein kleiner JavaScript Code ausgeführt, dieser ändert den value Wert im versteckten Eingabefeld und fügt den öffentlichen Schlüssel als Wert ein.

die Angabe action: 'login' gibt an um was es sich handelt, du kannst selbst bestimmen was da steht, in diesem Fall nehme ich login.

Mit der Angabe von einer action kannst du auf der Admin console in der Statistik besser unterscheiden wo die meisten Spanzugriffe passieren.

Dieser Wert wird bei der Überprüfung mitgeschickt und kommt auch als Antwort wieder zurück.

// constants.php muss eingebunden sein

<script src="https://www.google.com/recaptcha/api.js?render=<?=RECAPTCHA_KEY_PUBLIC?>"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('<?=RECAPTCHA_KEY_PUBLIC?>', {action: 'login'}).then(function(token) {
            document.getElementById('recaptcha_token').value = token;
        });
    });
</script>

Das fertig Umgebaute Formular sieht dann so aus:

// constants.php muss eingebunden sein

<form method="post" action="verify.php">
    <input name="email" type="email">
    <input name="password" type="password">
    <input type="hidden" name="recaptcha_token" id="recaptcha_token">
    <button name="login" type="submit">Login</button>
</form>

<script src="https://www.google.com/recaptcha/api.js?render=<?=RECAPTCHA_KEY_PUBLIC?>"></script>
<script>
    grecaptcha.ready(function() {
        grecaptcha.execute('<?=RECAPTCHA_KEY_PUBLIC?>', {action: 'login'}).then(function(token) {
            document.getElementById('recaptcha_token').value = token;
        });
    });
</script>

Formular Überprüfung

Wenn das Formular abgeschickt wird wirst du zu verify.php weitergeleitet.

Hier wird eine Anfrage an den reCAPTCHA Server gestellt mit dem geheimen Schlüssel und dem Wert des versteckten Eingabefeld als Parameter.

Die Antwort kommt im JSON-Format:

{
  "success": true|false,      // Boolean-Wert ob die Anfrage stimmt oder nicht
  "score": number             // Der zurückgegebene Score (0.0 - 1.0)
  "action": string            // Deine angegebene "action"
  "challenge_ts": timestamp,  // Zeitstempel der Anfrage (ISO-Format yyyy-MM-dd'T'HH:mm:ssZZ)
  "hostname": string,         // Der Hostname der Seite
  "error-codes": [...]        // Optional
}

Für die Auswertung kannst du dir selbst etwas überlegen, hier mein Vorschlag.

In diesem Beispiel überprüfe ich einfach ob die Anfrage erfolgreich war und ob der zurückgegebene Score größer oder gleich meiner Vorgabe ist.

// constants.php muss eingebunden sein

// Anfrage
$request = file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=' . RECAPTCHA_KEY_SECRET . '&response=' . $_POST['recaptcha_token']);
// JSON-Antwort dekodieren
$request = json_decode($request);

if ($request->success == true && $request->score >= RECAPTCHA_SCORE) {
    // Die Anfrage war erfolgreich und der Score passt
} else {
    //...
}

Weiteres

Weitere Infos für Entwickler gibt es hier auf dieser Webseite: developers.google.com/recaptcha/docs/v3

Die mobile Version verlassen