reCaptcha. Czym jest i jak jej użyć w swoim projekcie?

Zależy Ci na bezpieczeństwie i chcesz zabezpieczyć formularz na swojej stronie przed spamem? Nie wiesz jak to zrobić? Użyj Google reCaptcha. Dzisiaj opiszę krok po kroku jak użyć tej funkcjonalności.

Dlaczego o tym piszę?

Bezpieczeństwo w sieci jest tematem bardzo wrażliwym i większość świadomych użytkowników internetu ma to na uwadze. Sprawa robi się jeszcze bardziej poważna jeśli jesteś posiadaczem swojego serwisu przez który prowadzisz komunikację z użytkownikami. Google reCaptcha jest jednym z narzędzi stworzonych przez inżynierów z Doliny Krzemowej chroniący nas niektórymi zagrożeniami. Dlatego warto je znać.

Czym jest reCaptcha?

Hmmm… Jak by ją nazwać? Narzędzie? Usługa? Plugin? Jakakolwiek wersja nie byłaby bardziej precyzyjna reCaptcha służy do ochrony formularzy przed różnego rodzaju automatami i botami które mogłyby poprzez wysyłanie dużej ilości informacji zapchać nasze serwery i rozprzestrzeniać niebezpieczne oprogramowanie. Taki antySpam. To jest przynamniej jej główną funkcją i ta definicja na potrzeby tego artykułu jest wystarczająca. Więcej na oficjalnej stronie:

https://www.google.com/recaptcha/intro/android.html

Pewnie rozpoznajesz powyższy obrazek i przysparza Cię o irytację kiedy na coś takiego natrafisz przy przeglądaniu sieci ale to dla wspólnego dobra. To krótka chwila frustracji w zamian za bezpieczeństwo. To reCaptcha.

Czego się dowiesz w tym wpisie?

Dzisiaj opiszę podstawą konfigurację reCaptch’y w projekcie z użyciem PHP. Co przez to rozumiem? Mamy jakiś prosty formularz w HTML który nie wyślę się zanim nie zweryfikujemy go reCaptchą. Opiszę wszystko po kolei.

Dlaczego używam PHP?

PHP to jeszcze najpopularniejszy język back-endowy i jest obsługiwany w zasadzie przez wszystkie serwerownie. Dlatego prawdopodobieństwo, że jako developer będziesz potrzebował/a PHP jest stosunkowo wysokie.

Zanim zaczniesz pracę z PHP- środowisko lokalne

PHP to język back-endowy więc potrzebuje jakiegoś serwera z którym może się komunikować czy to globalnego czy lokalnego. Dlatego jeśli nie miałeś z nim wcześniej do czynienia może Cię zdziwić, że Twoje środowisko do Frontu nie obsługuje PHP. Trzeba sobie sobie z tym poradzić.

Na potrzeby implementacji reCaptchy możemy do tego podejść na 2 sposoby:

  1. Posiadamy własny serwer globalny który obsłuży PHP. Ta opcja jest trochę męcząca bo po prostu za każdym razem kiedy piszemy fukcjonalność w PHP to uploadujemy plik i patrzymy co się dzieje. No ale da radę.
  2. Instalujemy środowisko lokalne i wszystko dzieje się u nas na kompie. Niby łatwiejsze i lepsze ale jak nie zrobiłeś/aś tego na samym początku to trzeba migrować projekt…

XAMPP czyli środowisko lokalne pod PHP

Postawienie środowiska jest w zasadzie banalnie proste. Ściągamy odpowiednią wersję aplikacji stąd:

https://www.apachefriends.org/pl/index.html

Należy pamiętać 2 rzeczach:

  1. Wybierz odpowiedni system operacyjny- oczywista sprawa.
  2. Wybierz odpowiednią wersję PHP w której będziesz pisał kod. To bardzo ważne!

O co chodzi? Jeśli napisałeś kod PHP używając składni w wersji np.7.2.1 a masz zainstalowany XAMPP 5.6.33 to niestety nie pojedziesz na tym… Nie pomalujesz…

Dla informacji w tym tutorialu użyty został PHP w wersji 5.6.32. Jeśli chcesz dowiedzieć się jakiej wersji PHP używasz w swoim projekcie sprawdź mój poprzedni wpis.

Implementacja reCaptcha

Do implementacji reCaptchy potrzebujemy:

  1. Kodu HTML z formularzem.
  2. Skryptu w JS który wysyła formularz.
  3. Skryptu w JS z API reCaptchy.
  4. Kluczy SiteKey i SecretKey.
  5. Obsługa back-endu czyli skrypty PHP.

Jedziemy po kolei.

Formularz w HTML’u

Prosta sprawa, niech będzie standardowy formularz, 2 inputy i przycisk:

<form id="contactForm" name="contactForm" method="post" action="index.php">
    <input type="text" name="name" id="inputName" placeholder="Your Name"></input>
    <input type="email" name="email" id="inputEmail" placeholder="Email"></input>
    <button type="submit" id="formSend" name="submit" value="submit">Send</button>
</form>

Co jest najważniejsze powyżej? Atrybuty name bo dzięki nim PHP będzie pobierał wartości, id dla JSa, value dla buttona i action dla formularza bo tak linkuje się plik z kodem PHP. Poza tym klasy dla styli CSS ale to tutaj pomijam.

Aby użyć reCaptchy należy wkleić do formularza jej kod. Wygląda to tak:

<div class="g-recaptcha" data-sitekey=“Your Site Key"></div>

Jak widać mamy tu atrybut data-sitekey który narazie zostanie pusty dopóki nie uzupełnimy go własną wartością. To później.

Zasadniczo w HTML to tyle.

Stylizacja reCaptchy w CSS

Wbrew pozorom nie jet to takie proste. Jak stylizować reCaptche? Mamy dostępne dwa podstawowe presety czyli jasny i ciemny. Info tutaj:

https://developers.google.com/recaptcha/docs/faq

Jeżeli chcemy określić jak ma się zachowywać tzn. chcemy podstawową weryfikację czy może przepisywanie kodu itp. to reCaptchy należy nadać odpowiednią klasę. Info poniżej:

https://developers.google.com/recaptcha/old/docs/customization

No dobra a jak po prostu się dobrać w klasycznym CSSie? Najlepiej wsadzić ją do oddzielnego diva i nim manewrować na stronie. Jeśli chodzi o np. sam rozmiar to możemy go zmienić dodając atrybut style w HTMLu.

Poniżej jest prosty przykład na stylizację reCaptchy w HTMLu:

<div class="capt_style">
    <div class="g-recaptcha" data-theme="dark" style="transform:scale(0.45);margin-left:0;" data-sitekey="Your Site Key"></div>
</div>

Jak komuś bardzo zależy na customowej reCaptchy to może użyć wersji Invisible jednak sporo z tym zabawy. Link tutaj:

https://developers.google.com/recaptcha/docs/invisible

To co z tym formularzem?

Ostatecznie może on wyglądać np. tak:

<form id="contactForm" name="contactForm" method="post" action="index.php">
    <input type="text" name="name" id="inputName" placeholder="Your Name"></input>
    <input type="email" name="email" id="inputEmail" placeholder="Email"></input>
    <button type="submit" id="formSend" name="submit" value=“submit">Send</button>
    <div class="capt_style">
        <div class="g-recaptcha" data-theme="dark" style="transform:scale(0.45);margin-left:0;" data-sitekey="Your Site Key"></div>
    </div>
</form>

Wysłanie formularza za pomocą JavaScript

Ta część jest dość prosta. Po kliknięciu na przycisk Send wysyłamy formularz:

$(function () {
    var sendForm = document.getElementById(formSend);
    sendForm.on('click', () => {
        let submitForm = () => {
            document.contactForm.submit();
            console.log('Dziala!');
        }
        submitForm();
    });
});

Można to zrobić też na wiele innych sposobów. Jeśli formularz się wysyła to znaczy, że działa.

W praktyce poza tym ważna jest walidacja formularza czyli sprawdzenie czy pola nie są puste przed wysłaniem. Można to zrobić na froncie za pomocą JSa lub na backu w tym wypadku PHPem. Tego się dzisiaj nie dotykamy.

Skrypt JS z API reCaptchy

W tym kroku po prostu podpinamy gotowy plik .js do pliku .html tak jak podłączane są również inne skrypty. Formuła wygląda tak:

<script src=„https://www.google.com/recaptcha/api.js” async defer></script>

Wtyczka do podpinania linków w skryptach mnie nie puszcza więc link powyżej bez kolorków…

Zainteresowani mogą oczywiście plik przestudiować 🙂

Site Key i Secret Key

Teraz przyszedł czas na parę kluczy do API reCaptchy dzięki którym nasza aplikacja jest identyfikowana i możliwa jest wzajemna komunikacja. Wyglądają one mniej więcej tak:

Site key: 6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI

Secret key: 6LeIxAcTAAAAAGG-vFI1TnRWxMZNFuojJ4WifJWe

Powyższe kody mogą być używane do testów. Będzie wtedy widoczny odpowiedni komunikat.

https://developers.google.com/recaptcha/docs/faq

Dla każdej strony/aplikacji jest potrzebna unikalna para kluczy. Aby ją wygenerować należy założyć sobie konto na Googlach i wejść do panelu admina:

https://www.google.com/recaptcha/admin#list

Jest to dość intuicyjny proces. Należy wybrać wersję reCaptchy która nas interesuje tzn. v2, potem zarejestrować domenę i klucze się wygenerują. Ważne aby zarejestrować również localhosta jeśli robimy na nim developerkę.

Potem należy skopiować Site key i wkleić w odpowiednie miejsce w formularzu HTML. Jeśli wszystko poszło dobrze to będziemy widzieć działającą reCaptche na naszej stronie bez komunikatu o wersji testowej.

Secret Key zostaje na później.

Obsługa Back-Endu w PHP

Jeśli wszystko zrobiliśmy dobrze to powinniśmy widzieć piękny formularz z reCaptchą gdzie po weryfikacji i kliknięciu przycisku ‚wyślij’ dane z formularza powinny być wysyłane na serwer.

Zanim jednak to się stanie trochę się dzieje w międzyczasie i tu potrzebne jest trochę back-endu. Jak wygląda algorytm?

  1. reCaptha pobiera informacje z walidatora.
  2. Walidacja reCaptcha zwraca token.
  3. Jeśli token posiada posiada pozytywną weryfikację to przechodzimy do wykonania zadania.
  4. Wysyłamy swoje dane na serwer.
  5. Wyświetlamy komunikat o statusie zadania tzn. success/fail.

Więcej o walidacji po stronie serwera znajdziesz tutaj:

https://developers.google.com/recaptcha/docs/verify

Walidacja reCaptcha

Napisanie skryptu do pobrania, walidacji i potem zwrócenia tokenu reCaptcha w PHP może być nieco kłopotliwe. Zwłaszcza dla fronta. Inżynierowe z Googla jak zwykle o nas pomyśleli i przygotowali nam plik z obsługą tego eventu. Można go znaleść tutaj:

https://github.com/tutsplus/how-to-integrate-google-no-captcha-recaptcha-on-your-website/blob/master/recaptchalib.php

W praktyce po prostu skopiuj ten kod do nowego pliku o nazwie recaptchalib.php i umieść go w folderze głównym aplikacji obok index.html.

Obsługa formularza

Teraz rzeczywiście coś napiszemy w PHPie. Należy stworzyć nowy plik w folderze głównym index.php (ważne aby nazwa zgadała się z tą w formularzu HTML) i zaczynamy kodzić.

Najpierw importujemy plik recaptchalib.php z obsługą reCaptchy:

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

Następnie definiujemy zmienną z naszym Secret key:

// secret key

$secret = “Your Secret";

Dwie kolejne zmienne gdzie definiujemy odpowiedź i sprawdzamy Secret (hehe jak to brzmi):

// empty response

$response = null;

// check secret key

$reCaptcha = new ReCaptcha($secret);

Kolejny krok to sprawdzenie odpowiedzi reCaptcha po przesłaniu formularza:

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

Ostatni krok w weryfikacji reCaptchy. Jeśli odpowiedź jest pozytywna to coś robimy, jeśli nie, to nie:

if ($response != null && $response->success) {
   echo ‘Super reCaptcha';
   } else {
   echo ‘reCaptcha nie dziala…’;
   }

W zasadzie to tyle 🙂 Teraz jeśli chcemy żeby ten formularz coś w ogóle robił to wstawiamy odpowiednią formułę w miejsce sukcesu.

Napiszę kod który będzie pobierał dane z pól formularza i wysyłał na wskazanego maila:

$to= ‘mail@twojserwer.pl';
$to2= 'twojmail@docelowy.com';
$name = $_POST['name'];
$email = $_POST['email'];
$subject = ‘Wiadomość od' . $name . ' z (' . $email . ')';
$headers = 'From: ' . $name . ' (' . $email . ')';
$headers .= 'Content-Type: text/html; charset=utf-8';

mail($to2, $subject ,$header);

if(mail($to, $subject, $header)) {
   echo ‘<h1>Formularz wysłany</h1>‘;
   } else {
   echo ‘<h1>Błąd Serwera</h1>';
   }

Co się dzieje powyżej? PHP pobiera dane z formularza i przesyła go na maila $to2 na pomocą adresu proxy $to który jest dowolną skrzynką pocztową na serwerze Twojej aplikacji. Ma to sens?

Zbieram do kupy

To teraz wszystkie części kodu razem:

<?php
// grab recaptcha library
require_once “recaptchalib.php";

// secret key
$secret = “Your Secret”;

// empty response
$response = null;

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

if ($_POST["g-recaptcha-response"]) {
    $response = $reCaptcha->verifyResponse(
        $_SERVER["REMOTE_ADDR"],
        $_POST["g-recaptcha-response"]
        );
    }
 
if ($response != null && $response->success) {
    $to= ‘mail@twojserwer.pl';
    $to2= 'twojmail@docelowy.com';
    $name = $_POST['name'];
    $email = $_POST['email'];
    $subject = ‘Wiadomość od' . $name . ' z (' . $email . ')';
    $headers = 'From: ' . $name . ' (' . $email . ')';
    $headers .= 'Content-Type: text/html; charset=utf-8';

    mail($to2, $subject ,$header);

    if(mail($to, $subject, $header)) {
        echo ‘<h1>Formularz wysłany</h1>‘;
    } else {
        echo ‘<h1>Błąd Serwera</h1>';
    }
    } else {
    echo ‘reCaptcha nie dziala…’;}
?>

Podsumowanie

Powyżej przedstawiłem przykładową konfigurację reCaptchy dla Twojego projektu. Jeśli w między czasie nie został popełniony żaden błąd to wszystko powinno działać. Starałem się to przedstawić w miarę klarownie.

Ten tutorial jest dość podstawowy i można potraktować go jako wstęp do lepszego zrozumienia całej koncepcji reCaptha i API aby w przyszłości tworzyć lepszy kod.

Jeśli dotrwałeś/aś do tego miejsca to propsy 🙂

Print Friendly, PDF & Email

Bartek Cis

Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?