Włączenie reCAPTCHA wymaga dwóch etapów: utworzenia kluczy w konsoli Google oraz dodania ich do strony – ręcznie w kodzie albo przez ustawienia CMS. Klucz witryny trafia do części widocznej dla przeglądarki, a klucz tajny służy wyłącznie do weryfikacji po stronie serwera.
Czego potrzebujesz przed konfiguracją?
Przed rozpoczęciem przygotuj informacje i dostępy potrzebne do rejestracji domeny oraz późniejszej integracji:
- Konto Google, za pomocą którego otworzysz konsolę administracyjną reCAPTCHA.
- Domenę lub domeny, które chcesz zabezpieczyć.
- Dostęp do panelu administracyjnego CMS albo plików źródłowych strony.
- Dostęp do konfiguracji serwera, jeśli formularz ma weryfikować odpowiedź reCAPTCHA po stronie backendu.
Jak wygenerować klucze reCAPTCHA?
Klucze są przypisane do konkretnej witryny i wybranego typu reCAPTCHA. W konsoli Google otrzymasz dwa różne ciągi znaków. Site key jest kluczem publicznym używanym w kodzie strony. Secret key pozostaje poufny i służy serwerowi do sprawdzenia tokenu zwróconego przez usługę.
- Otwórz stronę administracyjną Google reCAPTCHA i zaloguj się na konto Google.
- Wybierz opcję dodania nowej witryny.
- Wpisz etykietę, która pozwoli rozpoznać konfigurację, na przykład nazwę domeny.
- Wybierz typ reCAPTCHA – v2 albo v3.
- Dodaj domenę witryny. Wpisuj samą domenę, bez ścieżki konkretnej podstrony.
- Zaakceptuj warunki usługi i zatwierdź formularz.
- Skopiuj klucz witryny oraz klucz tajny i przechowuj je w bezpiecznym miejscu.
Nie używaj jednego zestawu kluczy dla przypadkowych domen. Jeżeli konfiguracja obejmuje kilka domen, dodaj je w ustawieniach danej witryny zgodnie z zasadami obowiązującymi w konsoli Google.
reCAPTCHA v2 czy v3 – którą wersję wybrać?
Wybór zależy głównie od oczekiwanego sposobu działania formularza i poziomu kontroli, jaki chcesz zachować po stronie serwera.
| Wersja | Typ interakcji | UX | Zastosowanie |
|---|---|---|---|
| v2 | Checkbox „Nie jestem robotem”, a czasem dodatkowe zadanie | Użytkownik musi wykonać akcję | Formularze kontaktowe, komentarze, proste wdrożenia |
| v3 | Działanie w tle i zwracanie oceny ryzyka | Brak widocznego testu w typowym przebiegu | Serwisy, które chcą samodzielnie podejmować decyzję na podstawie wyniku |
v2 jest zwykle prostsza do uruchomienia w gotowym formularzu. v3 lepiej pasuje do rozwiązań, w których backend analizuje wynik i ustala próg akceptacji. Samo otrzymanie tokenu nie powinno być traktowane jako pełna decyzja bezpieczeństwa – serwer musi zweryfikować odpowiedź.
Jak dodać reCAPTCHA w CMS?
W systemach CMS najbezpieczniejszą ścieżką jest użycie funkcji wbudowanej w formularz albo sprawdzonej wtyczki. Przykładowo w WordPressie Contact Form 7 udostępnia integrację reCAPTCHA w sekcji ustawień integracji z zewnętrznymi usługami.
Ogólny schemat wygląda następująco:
- Zainstaluj lub włącz moduł formularza obsługujący reCAPTCHA.
- Otwórz ustawienia integracji z reCAPTCHA w panelu CMS.
- W polu klucza witryny wklej site key.
- W polu klucza tajnego wklej secret key.
- Zapisz konfigurację i włącz ochronę przy wybranych formularzach.
- Wyślij testowy formularz jako użytkownik niezalogowany, aby sprawdzić działanie.
W Joomla konfiguracja zwykle obejmuje włączenie dodatku CAPTCHA, wpisanie obu kluczy oraz wybranie go jako domyślnej ochrony w ustawieniach witryny. Nazwy menu mogą różnić się między wersjami systemu, dlatego sprawdź dokumentację używanej wersji i konkretnego rozszerzenia.
Jak wdrożyć reCAPTCHA ręcznie w HTML i JavaScript?
Ręczna integracja wymaga dodania skryptu Google, elementu widżetu oraz obsługi odpowiedzi. Dla reCAPTCHA v2 z checkboxem podstawowy fragment może wyglądać tak:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form action="/wyslij-formularz" method="post">
<input type="email" name="email" required>
<div class="g-recaptcha" data-sitekey="TWÓJ_SITE_KEY"></div>
<button type="submit">Wyślij</button>
</form>W miejsce TWÓJ_SITE_KEY wpisz klucz witryny wygenerowany dla tej domeny. Skrypt powinien być ładowany przez HTTPS. Po przesłaniu formularza odpowiedź widżetu jest przekazywana jako token, zwykle w polu g-recaptcha-response.
Po stronie serwera odczytaj token i wyślij go razem z kluczem tajnym do punktu weryfikacyjnego reCAPTCHA. Dopiero pozytywna odpowiedź powinna pozwolić na zapis formularza, wysłanie wiadomości albo wykonanie innej operacji. Nie sprawdzaj wyłącznie obecności pola w formularzu, ponieważ jego zawartość może zostać spreparowana.
W przypadku niewidocznej wersji v2 możesz powiązać widżet z przyciskiem i uruchomić formularz dopiero po pomyślnej weryfikacji:
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
<form id="formularz" action="/wyslij-formularz" method="post">
<button
class="g-recaptcha"
data-sitekey="TWÓJ_SITE_KEY"
data-callback="poWeryfikacji">
Wyślij
</button>
</form>
<script>
function poWeryfikacji(token) {
document.getElementById('formularz').submit();
}
</script>Przed wdrożeniem sprawdź formularz na komputerze i urządzeniu mobilnym. Zweryfikuj także przypadek wygaśnięcia tokenu, błąd połączenia oraz zachowanie strony, gdy użytkownik nie przejdzie weryfikacji.
Klucza tajnego nie umieszczaj w HTML, publicznym JavaScript ani repozytorium dostępym dla osób postronnych. Powinien znajdować się po stronie serwera, najlepiej w zmiennej środowiskowej lub bezpiecznej konfiguracji. Błędna edycja plików strony może wywołać błędy formularza albo całej witryny, dlatego przed zmianami wykonaj kopię zapasową. Jeżeli ręczna integracja powoduje problemy, skonfiguruj ochronę przez CMS lub zleć wdrożenie administratorowi.
Po instalacji reCAPTCHA sprawdź nie tylko widoczność widżetu, lecz także pełną weryfikację po stronie serwera. Dopiero wtedy ochrona formularza działa zgodnie z założeniem.
