Hogyan integráld a "No CAPTCHA reCAPTCHA"-t a weboldaladba

Hungarian (Magyar) translation by Szabó Péter (you can also view the original English article)

A CAPTCHA valószínűleg a leginkább frusztráló élmény a weben. Eléggé használhatatlan volt a felhasználók többsége számára, pláne a látássérülteknek vagy olyanoknak, akik olyan kisegítő technológiákra támaszkodnak a web eléréhez, mint a képernyőolvasók. Sajnos ugyanakkor a CAPTCHA-k abszolút létfontosságúak a spam elleni küzdelemben.

A necessary evil thanks spammers — Egy szükséges rossz (köszönhetően a spammereknek)

Ironikus módon míg a hagyományos "torzított szöveg" CAPTCHA-k kínosan olvashatatlanok voltak az emberi felhasználók számára, a modern mesterséges intelligencia technológiának sokkal kevesebb gondja akadt a megoldásukkal. Sőt, a Google hasonló technológiát használ házszámok és útjelzések elolvasására, hogy megerősítse a Google Street View helyszíneit!

A Google robotot pontosan el tudják olvasni ezeket

Ez teljesen érthető, mivel a Google saját fejlesztői álltak elő idáig a legjobb CAPTCHA megoldással 2014 végéig. A No CAPTCHA reCAPTCHA használatához semmi más nem kell, csak egy érintés, egy kattintás, vagy a billentyűzettel kiválasztás és a szóköz leütése

A legtöbb esetben ez egyszerű, de ha a Google kockázatelemzése még mindig nem biztos benne, hogy ember vagy, egy második kérés is megjelenik.

Ezt már mindenfelé láthatod a weben működés közben, például a @materialup feliratkozó oldalán.

No CAPTCHA reCAPTCHA beszerzése

Fogjuk rövidre és álljunk neki a No CAPTCHA beállításának.

1. lépés

Először is szükségünk lesz egy API kulcsra, úgyhogy menjünk a https://www.google.com/recaptcha/admin oldalra. Ha hozzá akarsz férni ehhez az oldalhoz, be kell jelentkezned egy Google fiókba. Meg fog kérni, hogy regisztráld a weboldaladat, így adj neki egy megfelelő nevet, majd add meg a domainek listáját (például tutsplus.com), ahol ez a reCAPTCHA használva lesz. Az aldomainek (mint a webdesign.tutsplus.com és code.tutsplus.com) automatikusan beleszámítódnak a fiókba.

2. lépés

Ha ezzel kész vagy, kapni fogsz egy oldal kulcsot és egy partneri titkos kulcsot:

3. lépés

A kulcsok alatt látni fogsz néhány kódrészletet a reCAPTCHA beleillesztéséhez a weboldaladba. Először is ott a JavaScript:

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

Azt is meghatározhatod, hogy a 40 támogatott nyelv közül melyiket használod egy paraméter hozzáadásával a karakterlánchoz. Mi itt az es-t adtuk hozzá, ami egy spanyol nyelvű reCAPTCHA-t ad nekünk

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

Helyezd el ezt a szkript taget az oldalad lábrészébe (vagy az űrlap alá, ahol a reCAPTCHA meg fog jelenni, attól függően, hogy hogyan rangsoroltad a betöltését).

4. lépés

Ezután következik a helymegőrző megadása, amit szükséges hozzáadnod az űrlapod kódjában oda, ahol szeretnéd, hogy a reCAPTCHA megjelenjen:

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

Megjegyzés: a data-sitekey attribútum a te kulcsod értékét fogja tartalmazni, nem ezt a kezdetleges példát.

Ezen a ponton vannak további attribútumok is, amik hozzáadhatóak a kinézet és a funkcionalitás testreszabása érdekében a reCAPTCHA-dhoz. Például a data-theme="dark" hozzáadása ehhez a divhez a sötét változatot adja neked, ami talán jobban illeszkedhet az UIdhoz:

További részletekért a reCAPTCHA-d konfigurálásához vess egy pillantást a developers.google.com-ra.

Rakjuk össze

Most, hogy már megvannak a hozzávalók, itt az idő, hogy elhelyezzük őket egy munkakörnyezetbe.

1. lépés

Helyezzük el a szkript tagünket és a helymegőrzőt egy egyszerű űrlapba:

<!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>

Mi itt a barebones oldalszerkezetet használjuk egy űrlappal, ami egy name inputot, egy email inputot és egy elküldés gombot tartalmaz. Itt semmi stilizálást nem használtunk, mert az nem igazán szükséges ehhez a bemutatóhoz.

our captcha form — Valami ilyesmit kell látnod most

A sikeres reCAPTCHA teszt demonstrálásához le kell futtatnunk néhány szerveroldali ellenőrzést. Jelen esetben ezt PHP-vel csináljuk, ezért mentsük el ezt a fájlt egy új projektbe index.php néven.

2. lépés

Észre fogod venni, hogy az űrlap küldési módja post, így amikor az űrlapadatokat elküldjük, akkor az oldalra egy változótömbben fog visszatérni. Ki tudjuk íratni őket ciklikusan, ezért adjuk hozzá a következőt valahová az oldalhoz:

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

Ez fogja mindegyik kulcs/érték párt a $_POST tömbünkből és egy kis formázással megjeleníti őket. Most ha elküldöd az űrlapot, akkor valami ilyesmit kell látnod:

Látni fogod, hogy az érték visszatér name-hez és emailhez, valamint egy értékkel a g-recaptcha-response számára. Ha nem sikerül teljesíteni a CAPTCHA tesztet, ez az érték üres lesz, de ha bepipáltad a "Nem vagyok robot" négyzetet, egy hosszú karakterláncot fogsz látni.

Ezt az értéket kell elküldenünk a Google-nak, hogy ellenőrizhesse, szóval tegyük is ezt meg.

3. lépés

Szerencsére a Google fejlesztői csapata kemény munkát végzett a számunkra, szóval vegyük az irányt a ReCAPTCHA projekthez a GitHubon és szerezz egy másolatot a recaptchalib.php könyvtárról. Helyezd el a projekted gyökérmappájába és utána hivatkozz rá az index.php fájlod elejénél:

<?php

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

?>

4. lépés

Ez a könyvtár tartalmaz egy függvénygyűjteményt, ami elküldi a g-recaptcha-response-t (a titkos kulcsunkkal együtt) a Google-nak egy HTTP kérésen keresztül. Ők ezután begyűjtik a választ, és ellenőrzik, hogy a CAPTCHA sikeres volt-e vagy sem. Ennek használatához először be kell állítani pár változót a PHP tag lezárása előtt:

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

// empty response
$response = null;

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

A ReCaptcha() ellenőrzi, hogy a titkos kulcsunk jelen van-e. Ha nincs ott, akkor megállítja a folyamatot és azt tanácsolja, hogy menjünk és szerezzünk egyet. Ezután végigfuttatjuk a többi részt a következő módon:

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

5. lépés

Feltéve, hogy minden rendben az elküldött űrlapunkkal a $response változó "success"-szel fog visszatérni, és folytathatjuk az űrlapadatok feldolgozását. Valahogy így nézhet ki: eltávolítjuk az iteráló bitet az űrlapadatok közül, majd hozzáadjuk a következő ellenőrzést a fenti űrlaphoz:

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

Végezetül hozzáadunk egy záró PHP taget az űrlap végére:

1	<?php } ?>

Ez megjeleníti az űrlapot, hacsak nem lett sikeresen elküldve, mely esetben egy kis köszönő üzenetet jelenít meg. Itt a végső demó.

Konklúzió

Ez csak egy nagyon vázlatos PHP implementációja volt a No CAPTCHA reCAPTCHA-nak. Szabad az út a fejlesztéséhez, remélhetőleg meg tudtuk adni hozzá az alapokat. A könyvtár a Google fejlesztőcsapat érdeme, és szeretnék egy gyors köszönetet mondani Matt Aussaguelnek is azért, hogy felhívta rá a figyelmemet.

Hasznos források

ReCAPTCHA 1.0.0 a Githubon
ReCAPTCHA dokumentáció
Are you a robot? Introducing “No CAPTCHA reCAPTCHA” Google Security Blog
WordPress ReCaptcha Integration reCaptcha bővítmény bejelentkezéshez, regisztrációhoz, hozzászólás űrlaphoz, Ninja Formokhoz és Contact Form 7-hez