Reklama sponsora

tutorial instalacja recaptcha PHP (od Google)




Internet jest przepełniony różnego rodzaju niebezpieczeństwami. W dzisiejszym poradniku zabezpieczymy formularz przed „botami” wykorzystując w tym celu narzędzie udostępniane przez Google.

W tym celu potrzebujemy konta google, którego utworzenie nie powinno sprawić problemu. Po zalogowaniu na konto wyszukujemy w google hasło reCaptcha lub po prostu przechodzimy do TEJ strony. Klikamy niebieski przycisk „Get reCAPTCHA” gdzie znajduje się formularz rejestracji nowej strony. Wypełniamy formularz i zatwierdzamy.

Screenshot_1


Teraz naszym oczom powinny się ukazać najważniejsze dane, czyli klucze niezbędne do integracji naszego serwisu z tym narzędziem. „Site key” to klucz publiczny zaś „Secret key” to klucz prywatny.

Screenshot_2


W tym miejscu otrzymujemy także kod, który powinniśmy umieścić na stronie do poprawnego działania. Jest to plik ze skryptami JavaScript API Google oraz kod zabezpieczenia formularza.

Screenshot_3


Do poprawnego działania potrzebujemy także odpowiedniej biblioteki obsługującej reCaptcha po stronie naszego serwera, którą można pobrać TUTAJ. Klikamy zielony przycisk „clone or download” następnie pobieramy zip. Po rozpakowaniu biblioteki interesuje nas folder src, w którym powinien znajdować się plik autoload.php i folder ReCaptcha. Zarówno folder i plik kopiujemy do folderu gdzie znajduje się nasz główny plik z formularzem. Jeśli jeszcze nie mamy tego pliku to tworzymy go w tym właśnie miejscu i możemy przejść do kodowania.

Na początku otwieramy znacznik PHP i dołączamy bibliotekę autoload.php

 


<?php
require_once 'autoload.php';

Następnie określamy nasze klucze, publiczny i prywatny oraz język odbiorców naszego serwisu.


$siteKey = '6LcAxwcTAAAAAL9E8CM1wWNRSruwDOH7Pbc6sbnQ';
$secret = '6LcAxwcTAAAAAAab6Clq51Doyqx2SQuys9TZfKsT';

$lang = 'pl';

Zamykamy znacznik PHP i rozpoczynamy dokument html oraz wstawiamy sekcje nagłówkową dokumentu. W tym przykładzie określam tylko tytuł strony i kodowanie.

?>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <title>Test reCAPTCHA</title>
    </head>
    <body>

Teraz przechodzimy do konkretów. Na początek tworzymy warunek sprawdzający czy kod został wysłany i w zależności od tego czy został wysłany wyświetla nam komunikat o powodzeniu lub nie powodzeniu weryfikacji testu „antybotowego” albo jeśli nie został wysłany to sam formularz.

<?php
    if(isset($_POST['g-recaptcha-response']))
    {
         //formularz został wysłany, sprawdzam i wyświetlam wynik
    }
    else
    {
         //formularz nie został wysłany, więc go wyświetlam
    }
    ?>

I zamykamy dokument html

</body>
</html>

Teraz zajmijmy się wyświetleniem naszego formularza zabezpieczonego reCaptcha. Co tu się stanie? Utworzymy najzwyklejszy formularz z jednym polem tekstowym, przyciskiem zatwierdzenia, weryfikacją reCaptcha oraz dołączymy plik ze skryptem JavaScript od Google. Kod dołączający skrypty oraz weryfikację otrzymaliśmy po dodaniu strony w panelu Google z tym że nieco zmodyfikujemy zabezpieczenie pobierając klucz publiczny ze zmiennej PHP, którą utworzyliśmy wczesniej.

if(isset($_POST['g-recaptcha-response']))
{
    //formularz został wysłany, sprawdzam i wyświetlam wynik
}
else
{
     echo '
     <form method="post">
     <p>POdaj imie: <input type="text" name="Imię" value="test"></p>
     <div class="g-recaptcha" data-sitekey="'.$siteKey.'"></div>
     <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl='.$lang.'">
     </script>
     <p><input type="submit" value="wyślij" /></p>
     </form>
     ';
}

Pozostaje nam już tylko sprawdzić czy użytkownik nie jest robotem i przeszedł prawidłowo test. W tym celu stworzymy obiekt pobranej wcześniej klasy obsługującej API Google. Wyślemy za pomocą tego obiektu zawartość pola formularza a następnie przypiszemy wynik do zmiennej i wyświetlimy stosowny komunikat.

if(isset($_POST['g-recaptcha-response']))
{
     //Tworzymy obiekt wykorzystując w tym celu nasz klucz prywatny zdefiniowany wcześniej
     $recaptcha = new \ReCaptcha\ReCaptcha($secret);
     //za pomocą stworzonego obiektu wysyłany otrzymane dane do Google i otrzymany wynik przypisujemy do zmiennej
     $resp = $recaptcha->verify($_POST['g-recaptcha-response'], $_SERVER['REMOTE_ADDR']);
     //warunek sprawdzający czy test został wykonany poprawnie jeśli tak to wyświetlamy komunikat o sukcesie
     //zaś jeśli nie to o porażce
     if($resp->isSuccess())
     {
          echo '<h2>Sukces!</h2><p>Przeszedłeś test antybotowy.</p>';
     }
     else
     {
          echo '<h2>Coś poszło nie tak </h2><p>Wygląda na to że jesteś botem :(</p>';
     }
}
else
{
     echo '
     <form method="post">
        <p>POdaj imie: <input type="text" name="Imię" value="test"></p>

        <div class="g-recaptcha" data-sitekey="'.$siteKey.'"></div>
        <script type="text/javascript" src="https://www.google.com/recaptcha/api.js?hl='.$lang.'">
        </script>
        <p><input type="submit" value="wyślij" /></p>
        </form>
     ';
}

I to już wszystko teraz wrzucamy pliki na hosting lub localhost odpalamy i powinniśmy uzyskać prosty formularz jak na obrazku poniżej. Po zaznaczeniu „nie jestem botem” trzeba chwilę odczekać i gotowe. Jest to dobre rozwiązanie ponieważ użytkownicy nie mają problemów z tak prostym testem.


Screenshot_5Screenshot_6Screenshot_7Screenshot_8


Jednak jeśli użytkownik wyśle pewną ilość formularzy pojawia się trudniejszy test polegający najczęściej na wyborze konkretnych obrazków.

Screenshot_9


W miejscu komunikatu o sukcesie umieszczamy kod odpowiedzialny za działania związane z poprawną weryfikacją testu i mamy w pewnym stopniu zabezpieczoną stronę.

Cały kod wykorzystany w tym artykule można pobrać Tutaj

 


Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *