Google reCAPTCHA v3
Google reCAPTCHA v3 ist die neueste Version von Googles beliebtem CAPTCHA-Service.
Version 3 baut auf der unsichtbaren Umsetzung von v2 auf und bietet dem Seitenbetreiber viel mehr Freiheiten. Im nachfolgenden Beitrag erklären wir dir die Unterschiede der alten zur neuen Version und zeigen auf, wie du die neue Version in deine Webseite oder dein Webformular einbindest. Ausserdem ziehen wir ein kurzes Fazit zu reCAPTCHA v3 und erklären, ob wir es wirklich besser finden, als v2.
Unterschied v2 vs. v3
Sowohl bei der sichtbaren, als auch bei der unsichtbaren Version von reCAPTCHA v2 geht es darum, dass Google eine Interaktion des Users mit dem Frontend auswertet. Entweder lässt er den Nutzer gewähren oder es findet eine sogenannte «Challenge» (meist in Form eines Bilderrätsels) statt. Die sichtbare Version wertet dabei den Klick des Users auf die bekannte Checkbox aus, die unsichtbare Version kann prinzipiell auf jedes GUI-Element angewandt werden. Hierfür setzt man den Triggerpunkt beispielsweise auf den Submit-Button eines Formulars, welchen der User ohnehin anklicken muss, um das Formular abzusenden. Dabei erspart man den Nutzern den zusätzlichen Klick auf die reCAPTCHA Checkbox. Im Hintergrund passiert jedoch bei beiden Varianten dasselbe: Google wertet den Klick aus und entscheidet, ob dem Nutzer zur eindeutigen Identifizierung zusätzlich eine Challenge angezeigt werden soll oder nicht.
Das Problem bei v2: In reCAPTCHA v2 kann der Entwickler ein Callback definieren, welches ausgeführt wird, sobald der Nutzer als Mensch identifiziert wurde. Es ist jedoch nicht möglich, eine spezielle Aktion auszuführen, wenn Google den Nutzer als Bot eingestuft hat.
Hier kommt reCAPTCHA v3 ins Spiel: Es löst dieses Problem, indem es auf ein neuartiges Score-System setzt, mit dessen Hilfe man nur eine Einschätzung abgibt und die weiteren Handlungen ganz dem Seitenbetreiber überlässt. Weiter muss erwähnt sein, dass sich mit reCAPTCHA v3 weitaus bessere UX-Erfahrungen implementieren lassen, als mit der Vorgängerversion. Wenn die neue Version optimal ins Frontend integriert ist, merkt der Nutzer nichts mehr von der Überprüfung und wird daher auch nicht in seiner Interaktion mit der Webapplikation gestört.
Umsetzung im Frontend
Um die grösstmögliche Flexibilität zu haben, wählen wir jeweils den Weg, die reCAPTCHA Prüfung programmatisch zu starten, sobald der User mit einem zuvor definierten GUI-Element interagiert (z.B eine Klick-Interaktion). Dabei muss zuvor die JavaScript-API von Google reCAPTCHA geladen werden. Danach kann man mithilfe der Funktion
.execute(public_key, callback)
die Prüfung auslösen.
Nach der Prüfung liefert Google einen Token zurück. Dieser wird vom Server nochmals mit einer speziellen Verifizierungs-API von Google geprüft.
Damit diese zusätzliche Prüfung passieren kann, muss im Callback der Token asynchron an den Server gesendet werden. Der Server bekommt von Google u.a. auch den bereits angesprochenen Score-Wert als Antwort. Anhand von diesem Score-Wert entscheidet in unserer Umsetzung der serverseitige Code, ob man den Nutzer als Bot einstuft oder nicht.
Die weiteren Aktionen im Code sind also abhängig von der asynchronen Antwort vom Server. Der Nutzer wird somit als Mensch identifiziert. Man kann die Person jedoch auch dazu zwingen, sich einzuloggen oder eine Fehlermeldung anzeigen.
Alternativ kann man die Auswertung des Score-Wertes natürlich auch im Frontend durchführen, es bietet sich jedoch an, die Schwellenwerte dafür serverseitig zu speichern sowie auch im Backend zu entscheiden, welchen State das Frontend aufgrund des Auswertungsergebnisses annehmen soll. Daher haben wir uns – wie bereits erwähnt – stets dafür entschieden, die Auswertung komplett dem Server zu überlassen.
Ab der ersten Interaktion mit dem GUI bis zur vollständigen Auswertung von Server und der reCAPTCHA-API können je nach Netzwerk-Geschwindigkeit oder auch Server-Performance einige Sekunden vergehen. Es liegt also bei bestimmten Interaktionen nahe, während dieser Zeit eine Ladeanimation anzuzeigen und diese erst wieder zu entfernen, wenn der Nutzer erfolgreich als Mensch identifiziert wurde.
Umsetzung im Backend
Wie bereits im Abschnitt zur Frontendumsetzung kurz angesprochen, muss der Token, welcher vom Frontend zum Backend gesendet wird, serverseitig nochmals validiert werden. Google stellt dafür eine eigene Verifizierungs-API zur Verfügung, welches mit dem erwähnten Token sowie dem privaten Lizenz-Key aufgerufen werden muss.
Die API antwortet mit einem JSON-Objekt, welches unter anderem den Score-Wert enthält. Der Score-Wert ist eine Nummer und kann Werte von 0.0-1.0 annehmen. Dabei ist 0.0 sehr wahrscheinlich ein Bot und 1.0 vermutlich eine valide Nutzeranfrage.
Die Entscheidung, ob die Interaktion von einem Nutzer oder einem Bot kommt, ist abhängig vom gesetzten Schwellenwert dieses Score-Werts.
Fazit
Es ist schwierig zu sagen, welches der zwei Verfahren das bessere ist.
Version 2 nervt die User oft mit Bilderrätseln und unterbricht somit den Flow, welchen man sich für das UX einer Website ausgedacht hat. Version 3 wiederum, ist aufwendiger zu implementieren, da ein Teil der Prüfung serverseitig stattfindet. Es gibt jedoch aus unserer Sicht zwei Punkte, welche ausschliesslich mit reCAPTCHA v3 möglich sind:
1. Eine smoothe UX, wenn der Nutzer ein Mensch und kein Bot ist: Mit reCAPTCHA v3 kann man dem User ein barrierefreies UX-Erlebnis bieten, welches nicht etwa durch nervige Bilderrätsel unterbrochen wird.
2. Fallunterscheidung Bot/Mensch im Frontend: Hat man die Befürchtung, bei einer Eingabe könnte es sich um einen Bot-Angriff handeln, ist man sich in der Regel nie 100 % sicher, ob dem wirklich so ist. In den älteren Versionen von Google reCAPTCHA konnte man in diesem Falle nur verhindern, dass ein Formular nicht abgeschickt oder ein Button nicht angeklickt werden kann. Mit reCAPTCHA v3 jedoch, kann man sich für den Fall einer negativen Validierung alternative Szenarien überlegen und so dem Nutzer etwa ein Login-Overlay anbieten, um sich zu identifizieren. Diese Flexibilität im Zusammenspiel mit einer besseren UX-Erfahrung für die Nutzer ist aus unserer Sicht ein grosser Pluspunkt.
In unseren Augen ist Google reCAPTCHA v3 die logische Weiterentwicklung der bisherigen reCAPTCHA Lösungen und es gibt definitiv Anwendungszwecke, für welche die neue Version besser geeignet ist, als die alte.
Sollte der Anwendungszweck jedoch nur darin bestehen, ein Formular abzusenden, kann auch die unsichtbare Version von reCAPTCHA v2 ohne weiteres angewandt werden.
Geschrieben von:
Benjamin Buff, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.