Jak integrovat "No CAPTCHA reCAPTCHA" na vaší webové stránce

() translation by (you can also view the original English article)

CAPTCHA je dost možná ta nejvíce frustrující věc na internetu. Je dost otravná pro většinu uživatelů, kteří jsou nevidomí nebo závislí na asistenčních technologiích jako například čtečka obrazu pro přístup na web. Bohužel, CAPTCHA je naprosto funkční v boji proti spamu.

A necessary evil thanks spammers — Nutné zlo (díky spameři)

Ironií je, že ačkoli tradiční CAPTCHA s "rozostřeným textem" se lidem špatně čte, moderní umělá inteligenci s tím má menší problém. Google dokonce používá podobnou technologii pro čtení čísel domů a značek, pro potvrzení míst na Google Street View.

Je tedy logické, že vývojáři z Googlu přišli s nejlepší řešením CAPTCHA do konce roku 2014. No CAPTCHA reCAPTCHA nepotřebuje nic víc než hnout prstem, kliknout myší nebo stisknout mezerník.

Ve většině případů je to takto jednoduché, pokud si ale Google není jist, že jste člověk, objeví se druhá výzva.

Můžete to již vidět všude na webu, například na podací stránce @materialup.

Získejte No CAPTCHA reCAPTCHA

Pojďme tedy přímo k věci a nastavme No CAPTCHA.

Krok 1

Nejdříve potřebujeme klíč API, takže jděte na https://www.google.com/recaptcha/admin. Pro získání přístupu musíte být přihlášeni na Google účet. Budete vyzvání k registraci vaší webové stránky, takže jí dejte vhodné jméno, potom vypište seznam domén (např. tutsplus.com) kde bude tato reCAPTCHA použita. Subdomény (jako webdesign.tutsplus.com a code.tutsplus.com) jsou započítány automaticky.

Krok 2

S tímto dostanete klíč stránky a jeho tajný partnerský klíč:

Krok 3

Pod klíči uvidíte snippety pro obsažení reCAPTCHA na vaší stránce. První je JavaScript:

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

Můžete také definovat, která ze 40 podporovaných jazyku používáte, přidáním parametru do stringu: Zde přídáme es, což nám nastaví španělskou reCAPTCHA:

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

Umístěte tento script tag v zápatí vaší stránky (nebo pod formulář kde bude reCECAPTCHA, záleží na prioritách nahrávání vašich zdrojů).

Krok 4

Další na řadě je zástupný objekt, který musíte přidat do formuláře, kde chcete, aby se reCAPTCHA objevila:

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

Poznámka: data-sitekey atribut bude držet hodnotu vašeho klíče, ne tento příklad.

Existují jiné atributy, které můžete přidat pro upravení vzhledu a funkcionality vaší reCAPTCHA. Například přidáním data-theme="dark" do tohoto div získáte tmavší verzi, která se může lépe hodit na vaše uživatelské prostředí:

Víc detailu o nastavení vaší reCAPTCHA najdete na developers.google.com

Dáme to dohromady

Nyní máme počáteční přísady a je na čase je vložit do pracovního prostředí.

Krok 1

Vložme náš script tag a zástupný objekt do jednoduchého formuláře:

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

Zde jsme použili holou stránku s formulářem obsahujícím vložení name a email a tlačítko submit. Není zde žádné stylování, protože v rámci tutorialu není potřeba.

our captcha form — Nyní byste měli mít něco podobné tomuto

Pro ověření, že reCAPTCHA test prošel, budeme muset udělat nějaké kontroly na serveru. V tomto případě, to uděláme pomocí PHP, takže uložte tento soubor jako nový projekt index.php.

Krok 2

Všimněte si metody post, takže když jsou data odeslána budou navrácena na tuto stránku uvnitř pole proměnných. Můžeme je vypsat pomocí smyčky, takže přidejte následující někam na svoji stránku:

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

Toto vezme každý pár klíč/hodnota v našem $_POST poli a vypíše je s trochou formátování. Nyní, když odešlete formulář, měli byste vidět něco jako je toto:

Uvidíte navrácenou hodnotu name a email, ale také hodnotu g-recaptcha-response. Pokud jste neprošli CAPTCHA testem, tato hodnota bude prázdná, pokud jste ale zaškrtli "I'm not a robot" checkbox, uvodíte obrovský řetězec znaků.

A je to právě tato hodnota, kterou musíme odeslat Googlu, aby mohla být ověřena, takže to náš další úkol.

Krok 3

Naštěstí, vývojářský tým u Googlu udělal tu těžkou práci za nás, takže jděte na Github, projekt ReCAPTCHA a stáněte si kopii knihovny recaptchalip.php. Umístěte ji do rootu vašeho projektu a referencujte ji navrchu vašeho souboru index.php:

<?php

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

?>

Krok 4

Knihovna obsahuje kolekci funkcí, které odesílají g-recaptcha-response (spolu s naším tajným klíčem) do Googlu přes HTTP žádost. Shromažďují odezvy a kontrolují zda byla nebo nebyla CAPTCHA úspěšná. Abychom tuto funkci použili, je třeba nejprve nastavit několik proměnných před uzavřením PHP tagu:

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

// empty response
$response = null;

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

ReCaptcha() kontroluje, zda je přítomen náš tajný klíč. Pokud ne, ukončí proces a doporučí nám ho získat. Následně uvádíme naše detaily:

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

Krok 5

Za předpokladu, že vše je v našem odeslaném formuláři, bude se proměnná $response hlásit zpět s "úspěchem" a můžeme pokračovat ve zpracování údajů o formulářích. Zde je návod, jak by to mohlo vypadat: odstraňte kousek, ve kterém jsme přecházeli data formuláře, a přidejte následující kontrolu nad formulář:

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

Nakonec přidejte za formulář uzavírací PHP tag:

1	<?php } ?>

Formulář se zobrazí, pokud nebyl úspěšně předložen, v takovém případě se zobrazí malé upozornění. Zde je konečné demo.

Závěr

Toto bylo velmi hrubá a hotová PHP implementace No CAPTCHA reCAPTCHA. Je široce otevřená pro vylepšení, ale doufám, že vám ukáže základní pojmy. Kredit za knihovnu jde do týmu vývojářů Google a také bych rád poděkoval Mattu Aussaguelovi za to, že mi to ukázal.

Užitečné zdroje

ReCAPTCHA 1.0.0 na Githubu
ReCAPTCHA dokumentace
Jste robot? Představení "No CAPTCHA reCAPTCHA" Google Security Blog
WordPress ReCaptcha Integration reCaptcha plugin pro přihlašování, registraci, komentování, Ninja formulář a kontaktní formulář 7.