Share
CAPTCHA-Eingaben sind vielleicht die häufigsten frustrierenden Erfahrungen im Web. Sie sind schmerzhaft genug für die Mehrheit der Benutzer, ganz zu schweigen von Sehbehinderten oder für alle, die auf unterstützende Technologien wie Bildschirmlesegeräte angewiesen sind, um auf das Internet zuzugreifen. Leider sind CAPTCHAs absolut unerlässlich im Kampf gegen Spam.
Ein notwendiges Übel (danke Spammer)Obwohl traditionelle CAPTCHAs mit „verzerrtem Text“ für menschliche Benutzer nur schwer lesbar sind, hat die moderne Technologie für künstliche Intelligenz ironischerweise weniger Probleme, sie zu lösen. Google verwendet sogar ähnliche Technologien, um Hausnummern und Straßenschilder zu lesen, um die Google Street View-Standorte zu bestätigen!
Google-Roboter können diese genau lesenDaher ist es nur folgerichtig, dass die eigenen Entwickler von Google bis Ende 2014 die beste CAPTCHA-Lösung entwickelt haben. Für das no CAPTCHA reCAPTCHA ist nichts weiter als ein Fingertipp, ein Mausklick oder das Fokussieren auf die Eingabe mit der Tastatur und Schlagen erforderlich das 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 im gesamten Web in Aktion sehen, wie zum Beispiel auf der Einreichungsseite von @materialup.
Lassen Sie uns auf die Jagd gehen und uns mit No CAPTCHA einrichten.
Zunächst 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 bei einem Google-Konto angemeldet sein. Sie werden aufgefordert, Ihre Website zu registrieren. Geben Sie ihr einen geeigneten Namen und listen Sie dann die Domänen auf (z. B. tutsplus.com), in denen dieser bestimmte reCAPTCHA verwendet wird. Subdomains (wie webdesign.tutsplus.com und code.tutsplus.com) werden automatisch berücksichtigt.
Damit erhalten Sie einen Standortschlüssel und den geheimen Schlüssel des Partners:
Unter den Tasten sehen Sie einige Auszüge, um reCAPTCHA auf Ihrer Website einzubinden. Zuerst gibt es das JavaScript:
Sie können auch festlegen, welche der 40 unterstützten Sprachen Sie verwenden, indem Sie der Zeichenfolge einen Parameter hinzufügen. Hier fügen wir hinzu es was uns eine spanische sprache reCAPTCHA gibt:
Platzieren Sie dieses Skript-Tag am Fuß Ihrer Seite (oder nur unter dem Formular, in dem der reCAPTCHA angezeigt wird, je nachdem, wie Sie das Laden von Assets priorisieren)..
Als Nächstes wird der Platzhalter hinzugefügt, den Sie Ihrem Formular-Markup hinzufügen müssen, wo auch immer reCAPTCHA angezeigt werden soll:
Hinweis: das Daten-Sitekey Attribut enthält den Wert von Ihre Schlüssel, nicht dieses Dummy-Beispiel.
Es gibt weitere Attribute, die Sie hinzufügen können, um das Aussehen und die Funktionalität Ihres reCAPTCHA an dieser Stelle anzupassen. Zum Beispiel hinzufügen data-theme = "dunkel" zu diesem div gibt Ihnen eine dunkle Version, die möglicherweise besser zu Ihrer Benutzeroberfläche passt:
Weitere Informationen zum Konfigurieren Ihres reCAPTCHA finden Sie unter http://developers.google.de.
Jetzt haben wir die ersten Zutaten, es ist Zeit, sie in eine Arbeitsumgebung zu bringen.
Lassen Sie uns das Skript-Tag und den Platzhalter in ein einfaches Formular einfügen:
So integrieren Sie Google "No CAPTCHA reCAPTCHA" auf Ihrer Website
Hier haben wir eine Barebones-Seitenstruktur mit einem Formular verwendet, das ein Name Eingabe, eine Email Eingabe und eine Senden-Schaltfläche. Hier gibt es kein Styling, weil es für dieses Tutorial nicht wirklich notwendig ist.
Du solltest etwas haben, das so aussiehtUm zu demonstrieren, dass der reCAPTCHA-Test bestanden wurde, müssen wir serverseitige Prüfungen durchführen. In diesem Fall machen wir das mit PHP, also speichern Sie diese Datei in einem neuen Projekt als index.php.
Sie werden feststellen, dass die Methode des Formulars ist Post, Wenn wir also die Formulardaten übermitteln, werden sie in einem Array von Variablen an diese Seite zurückgegeben. Wir können diese Variablen ausgeben, indem Sie sie in einer Schleife durchlaufen. Fügen Sie Ihrer Seite also Folgendes hinzu:
$ value) echo ''. $ key. ': '. $ value.'
'; ?>
Dies nimmt jedes Schlüssel / Wert-Paar in unserem $ _POST Array und gibt sie mit etwas Formatierung aus. Wenn Sie jetzt das Formular absenden, sollten Sie etwa Folgendes sehen:
Der Wert wird für zurückgegeben Name und Email, aber auch ein Wert für g-Recaptcha-Antwort. Wenn Sie den CAPTCHA-Test nicht bestanden haben, ist dieser Wert leer. Wenn Sie jedoch das Kontrollkästchen "Ich bin kein Roboter" aktivieren, wird eine große Zeichenfolge angezeigt.
Diesen Wert müssen wir an Google senden, damit er überprüft werden kann. Lassen Sie uns das als Nächstes tun.
Glücklicherweise hat das Google-Entwicklerteam die harte Arbeit für uns hier geleistet. Gehen Sie also zum ReCAPTCHA-Projekt auf Github und holen Sie sich eine Kopie der Bibliothek recaptchalib.php. Legen Sie es in das Stammverzeichnis Ihres Projekts und referenzieren Sie es oben in Ihrem Projekt index.php Datei:
Diese Bibliothek enthält eine Sammlung von Funktionen, die das senden g-Recaptcha-Antwort (zusammen mit unserem geheimen Schlüssel) an Google über eine HTTP-Anfrage. Sie sammeln dann die Antwort und prüfen, ob der CAPTCHA erfolgreich war oder nicht. Um dies zu nutzen, müssen wir vor dem abschließenden PHP-Tag zunächst einige Variablen einrichten:
// Ihr geheimer Schlüssel $ secret = "6LcePAATAAAAABjXaTsy7gwcbnbaF5XgJKwjSNwT"; // leere Antwort $ response = null; // geheimen Schlüssel prüfen $ reCaptcha = new ReCaptcha ($ secret);
ReCaptcha() prüft, ob unser geheimer Schlüssel vorhanden ist. Wenn nicht, bricht der Prozess ab und rät uns, einen zu bekommen. Anschließend führen wir unsere Details durch:
// wenn übergeben Antwort prüfen if ($ _POST ["g-recaptcha-response"]) $ response = $ reCaptcha-> verifyResponse ($ _SERVER ["REMOTE_ADDR"], $ _POST ["g-recaptcha-response"]) ;
Angenommen, alles ist gut mit unserem eingereichten Formular, dem $ Antwort Die Variable meldet sich mit Erfolg zurück und wir können die Formulardaten weiter verarbeiten. So könnte das aussehen: Entfernen Sie das Bit, an dem wir die Formulardaten durchlaufen haben, und fügen Sie die folgende Prüfung oberhalb des Formulars ein:
Accentsconagua
Erfolg) Echo "Hi". $ _POST ["Name"]. "(". $ _POST ["email"]. "), Vielen Dank für das Absenden des Formulars!"; else ?>Fügen Sie schließlich ein schließendes PHP-Tag nach dem Formular hinzu:
Daraufhin wird das Formular angezeigt, sofern es nicht erfolgreich übermittelt wurde. In diesem Fall wird ein kleines Dankeschön angezeigt.
Dies war eine sehr grobe und fertige PHP-Implementierung von No CAPTCHA reCAPTCHA. Es ist weit offen für Verbesserungen, gibt Ihnen aber hoffentlich einen Einblick in die Grundlagen. Die Bibliothek ist dem Google-Entwicklerteam zu verdanken. Ich möchte mich auch bei Matt Aussaguel für den Hinweis bedanken.
