Pouze tento týden sleva až 80% na e-learning týkající se Kotlinu. Zároveň využij akci až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
kotlin week

Nová reCaptcha - Jak ji použít?

V předchozí lekci, Konfigurační soubor .htaccess II. část, jsme si ukázali další funkce, které můžeme vytvořit pomocí konfiguračního souboru .htaccess.

Otravní roboti nebo nečitelný text. Až doteď problém většiny webmasterů, kteří používali (nebo nepoužívali) captchu, konkrétně reCaptchu od Googlu. Ten ale vypustil novou verzi se sloganem "Tough on bots, Easy on humans" a my si v tomto článku ukážeme, jak ji použít.

Jak nová captcha funguje?

Google díky tomu, že includujete jeho skript, může sledovat pohyb kurzoru uživatele, klávesy, které mačká a může si zjistit i operační systém, prohlížeč či rozlišení displeje. Až do chvíle, než zaškrtnete "Nejsem robot" se tyto údaje vyhodnocují. Po zaškrtnutí se odesílají na server spolu s tím, co vy berete metodou GET (to identifikuje návštěvníka). Po zaškrtnutí se vše vyhodnotí a Google vás buď propustí, nebo vám na PC zobrazí starou reCaptchu, na mobilu vybíráte zvířátka. Celé je to sice sofistikovaný systém, ale asi bude jen chvíli trvat, než se i roboti naučí být lidštější.

Registrace

Jako první si na webu https://www.google.com/recaptcha/admin přiřadíme web, na kterém chceme reCaptchu používat, pod svůj Google účet (je nutné být přihlášen do jakékoli služby od Googlu). Potom web rozklikneme a podíváme se do kroku 1 - client-side integration (integrace na straně klienta).

Integrace reCaptcha

Integrace

Do hlavičky webu si vložíme skript (upraven kvůli validitě)

<script type="text/javascript" src="https://www.google.com/recaptcha/api.js"></script>
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

a tam, kde chceme mít formulář, vložíme kód, který jsme od Googlu získali (vy budete mít jiný):

<div class="g-recaptcha" data-sitekey="6Lc-Uv8SAAAAAAKsjm2DKzA64jWNRGkea3GA-2OI"></div>

Odbyli jsme si tu lehkou část, teď jdeme hlouběji do kódu. Před krokem jedna máme ještě Keys (klíče). Rozbalíme a uvidíme něco takového:

Site key reCaptcha

PHP

Vzhledem k tomu, že je tento tutorial v sekci PHP, budeme používat PHP. Vytvoříme si proměnou recaptcha, do které dekódujeme JSON soubor nacházející se na adrese: (VasSiteKey nahraďte vaším klíčem)

https://www.google.com/recaptcha/api/siteverify?secret=VasSiteKey&response=get

PHP kód:

$recaptcha = json_decode(file_get_contents('https://www.google.com/recaptcha/api/siteverify?secret=ITnetwork.cz&response=' . $_POST['g-recaptcha-response']));

A kde že máme vzít response? Response na stránku odesílá reCaptcha při odeslání formuláře pomocí POSTu a získáme ho tak, jak je uvedeno v kódu výše. Teď již nám jen zbývá ověřit, zda reCaptcha udělala z uživatele robota nebo člověka. Uděláme to jednoduchým ifem, protože zda je nebo není člověk rozhoduje v JSONu jen hodnota successu [bool].

if ($recaptcha->{'success'} == 'true') {
    echo('Uživatel je člověk.');
} else {
    echo('Uživatel není člověk.');
}

Aby toho nebylo málo, můžeme si hlášení rozšířit i o konkrétní chybu. Chyby jsou celkem 4 a jsou v JSONu v parametru error-codes:

  • missing-input-secret Secret kód nebyl serveru předán
  • invalid-input-secret Secret kód je neplatný
  • missing-input-response Odpověď klienta nebyla serveru předána
  • invalid-input-response Odpověď klienta je neplatná

Přidáme je jednoduše:

if ($recaptcha->{'success'} == 'true') {
    echo('Uživatel je člověk.');
} else {
    echo('Uživatel není člověk.<br>');
    if ($recaptcha->{'error-codes'}) {
        echo('Při ověřování nastala chyba: ');
        if ($recaptcha->{'error-codes'}  == 'missing-input-secret') {
            echo('Secret kód nebyl serveru předán');
        } elseif ($recaptcha->{'error-codes'}  == 'invalid-input-secret') {
            echo('Secret kód je neplatný');
        } elseif ($recaptcha->{'error-codes'}  == 'missing-input-response') {
            echo('Odpověď klienta nebyla serveru předána');
        } elseif ($recaptcha->{'error-codes'}  == 'invalid-input-response') {
            echo('Odpověď klienta je neplatná');
        }
    }
}

Doufám, že vám tento článek aspoň trochu pomohl a že z českého internetu zmizí otravné staré nečitelné reCaptchy :)

Nakonec bude web vypadat takto:

reCaptcha

Pokud se Googlu zdát nebudete, vybafne na vás opět stará klasická captcha.

reCaptcha

 

Předchozí článek
Konfigurační soubor .htaccess II. část
Všechny články v sekci
Bezpečnost webových aplikací v PHP
Článek pro vás napsal Neaktivní Účet
Avatar
Uživatelské hodnocení:
18 hlasů
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (10)

Avatar
Neaktivní uživatel:26.5.2017 11:36

Super, moc děkuji. :-)

Odpovědět
26.5.2017 11:36
Neaktivní uživatelský účet
Avatar
Šimon Rataj
Člen
Avatar
Šimon Rataj:28.12.2017 13:35

Kdyby to někomu nešlo kvůli direktivě allow_url_fopen a nemůže to změnit (nemá přístup k php.ini), může zkusit tuto funkci:

function get_remote_data($url, $post_paramtrs = false) {
    if(is_array($post_paramtrs) || is_object($post_paramtrs)) {
      $arr = (array) $post_paramtrs;
      $arr2 = [];
      foreach($arr as $k => $v) {
        $arr2[] = $k . "=" . urlencode($v);
      };
      $post_paramtrs = implode("&", $arr2);
    };
    $c = curl_init();
    curl_setopt($c, CURLOPT_URL, $url);
    curl_setopt($c, CURLOPT_RETURNTRANSFER, 1);
    if($post_paramtrs) {
      curl_setopt($c, CURLOPT_POST, true);
      curl_setopt($c, CURLOPT_POSTFIELDS, $post_paramtrs);
    };
    curl_setopt($c, CURLOPT_SSL_VERIFYHOST, false);
    curl_setopt($c, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($c, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows NT 6.1; rv:33.0) Gecko/20100101 Firefox/33.0");
    curl_setopt($c, CURLOPT_COOKIE, 'CookieName1=Value;');
    curl_setopt($c, CURLOPT_MAXREDIRS, 10);
    $follow_allowed = !(ini_get('open_basedir') || ini_get('safe_mode'));
    if($follow_allowed)
      curl_setopt($c, CURLOPT_FOLLOWLOCATION, 1);
    curl_setopt($c, CURLOPT_CONNECTTIMEOUT, 9);
    curl_setopt($c, CURLOPT_REFERER, $url);
    curl_setopt($c, CURLOPT_TIMEOUT, 60);
    curl_setopt($c, CURLOPT_AUTOREFERER, true);
    curl_setopt($c, CURLOPT_ENCODING, 'gzip,deflate');
    $data = curl_exec($c);
    $status = curl_getinfo($c);
    curl_close($c);
    preg_match('/(http(|s)):\/\/(.*?)\/(.*\/|)/si', $status['url'], $link);
    $data = preg_replace('/(src|href|action)=(\'|\")((?!(http|https|javascript:|\/\/|\/)).*?)(\'|\")/si','$1=$2' . $link[0] . '$3$4$5', $data);
    $data = preg_replace('/(src|href|action)=(\'|\")((?!(http|https|javascript:|\/\/)).*?)(\'|\")/si','$1=$2' . $link[1].'://' . $link[3] . '$3$4$5', $data);
    if($status['http_code']==200)
      return $data;
    elseif($status['http_code']==301 || $status['http_code']==302) {
      if(!$follow_allowed) {
        if(!empty($status['redirect_url']))
          $redirURL = $status['redirect_url'];
        else {
          preg_match('/href\=\"(.*?)\"/si',$data,$m);
          if(!empty($m[1]))
            $redirURL=$m[1];
        };
        if(!empty($redirURL))
          return  call_user_func(__FUNCTION__, $redirURL, $post_paramtrs);
      };
    };
    return "ERRORCODE22 with " . $url . "!!<br/>Last status codes<b/>:" . json_encode($status) . "<br/><br/>Last data got<br/>:" . $data;
  };

A pak to načíst nějak takhle:

$json = json_decode(get_remote_data("https://www.google.com/recaptcha/api/siteverify", ['secret' => "vašKlíč", 'response' => $_POST['g-recaptcha-response']]));
 
Odpovědět
28.12.2017 13:35
Avatar
JackieDecker
Člen
Avatar
JackieDecker:28.12.2018 15:48

Dobrý den,
mohl byste mi prosím poradit, jak zprovozním google captchu ve wordpressu. Už se s tím peru nějakou dobu a stále se mi nedaří přijít na to, jak to udělat...
Předem děkuji za odpověď.

 
Odpovědět
28.12.2018 15:48
Avatar
Odpovídá na JackieDecker
Michal Novák:8.3.2019 10:02

Ahoj, zkoušel jsi hledat nějaký již hotový plugin pro WP? Kdyžtak budu rád, když zkusíš ten můj: https://cs.wordpress.org/…e-recaptcha/

 
Odpovědět
8.3.2019 10:02
Avatar
JackieDecker
Člen
Avatar
JackieDecker:23.3.2019 19:44

Zkoušela jsem, ale asi jsem levá, protože se mi to pořád nepodařilo rozchodit. Zkusím tedy ten tvůj, děkuji za odkaz :)

 
Odpovědět
23.3.2019 19:44
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
David Beko
Člen
Avatar
David Beko:26.11.2020 19:43

Postupujem presne podla navodu, kluce zadavam urcite spravne, ale uz len ked vlozim script a div tak pri nacitani webu sa mi zobrazuje chyba:
CHYBA pre vlastníka webu: typ kľúča nie je platný
V com moze byt problem?

 
Odpovědět
26.11.2020 19:43
Avatar
Lukáš Hornych
Tvůrce
Avatar
Odpovídá na David Beko
Lukáš Hornych:26.11.2020 21:14

Možná nemáš správně nastavenou doménu pro ty klíče.

 
Odpovědět
26.11.2020 21:14
Avatar
David Beko
Člen
Avatar
Odpovídá na Lukáš Hornych
David Beko:26.11.2020 21:57

co to znamena?

 
Odpovědět
26.11.2020 21:57
Avatar
Lukáš Hornych
Tvůrce
Avatar
Odpovídá na David Beko
Lukáš Hornych:26.11.2020 22:00

Na stránkách Googlu, kde si necháváš generovat ty klíče, se dá specifikovat, na jakých doménách ty klíče budou fungovat.

 
Odpovědět
26.11.2020 22:00
Avatar
David Beko
Člen
Avatar
David Beko:26.11.2020 23:41

To mam nastavene spravne. Bez www, bez http, proste len domena a koncovka jak je v priklade.domena.cz

 
Odpovědět
26.11.2020 23:41
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 20. Zobrazit vše