Jak dodać własny prosty CAPTCHA do formularza?

Każdy z nas spotkał się z CAPTCHA – te irytujące małe pola, gdzie musisz zaznaczyć „Nie jestem robotem” albo przepisać zniekształcone litery. Ale hej, one są niezbędne! Bez nich formularze na naszych stronach byłyby zalewane przez boty. Ale co, jeśli chcesz stworzyć coś własnego, prostego i na luzie? W tym artykule pokażę Ci, jak dodać własne rozwiązanie CAPTCHA do formularza. Będzie prosto, bez zbędnych kombinacji, a przy okazji sam coś się nauczysz!

Dlaczego CAPTCHA jest ważne?

Zanim przejdziemy do kodu, wyjaśnijmy, po co to w ogóle robić. CAPTCHA to nic innego jak mechanizm weryfikacji, który sprawdza, czy użytkownik jest człowiekiem, a nie zautomatyzowanym botem. Boty potrafią:

Spamować formularze.
Wysyłać fałszywe dane.
Generować obciążenie serwera.

Proste CAPTCHA może skutecznie powstrzymać takie działania, a Ty zachowasz kontrolę nad swoim serwisem.

Jak działa prosta CAPTCHA?

Zasada jest banalnie prosta:

W formularzu użytkownik widzi pytanie (np. „Ile to 2 + 3?”).
Podaje odpowiedź w polu tekstowym.
Serwer sprawdza, czy odpowiedź jest poprawna.
Jeśli tak – formularz przechodzi dalej. Jeśli nie – wyświetlany jest błąd.

Przygotowanie środowiska

Aby stworzyć naszą własną CAPTCHA, potrzebujemy:

Podstawowej znajomości HTML, CSS i PHP (choć inne języki backendowe też dadzą radę).
Edytora kodu (np. Visual Studio Code).
Serwera lokalnego (np. XAMPP lub WAMP).

Kod źródłowy – krok po kroku

1. Tworzymy formularz HTML

Na początek potrzebujemy formularza, do którego dodamy naszą CAPTCHA.

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz z CAPTCHA</title>
</head>
<body>
    <h1>Prosty formularz z CAPTCHA</h1>
    <form action="process.php" method="post">
        <label for="username">Nazwa użytkownika:</label><br>
        <input type="text" id="username" name="username" required><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <!-- CAPTCHA -->
        <label for="captcha">Ile to 5 + 3?</label><br>
        <input type="text" id="captcha" name="captcha" required><br><br>

        <button type="submit">Wyślij</button>
    </form>
</body>
</html>

2. Obsługa CAPTCHA w PHP

Teraz zajmiemy się weryfikacją odpowiedzi po stronie serwera. Stworzymy plik process.php, który sprawdzi poprawność CAPTCHA.

<?php
// Odbieramy dane z formularza
$username = $_POST['username'];
$email = $_POST['email'];
$captcha = $_POST['captcha'];

// Sprawdzamy CAPTCHA
if ($captcha == 8) { // Poprawna odpowiedź na 5 + 3
    echo "Formularz przesłany poprawnie! Dzięki, $username!";
} else {
    echo "Błąd: Niepoprawna odpowiedź na pytanie CAPTCHA.";
}
?>

To już działa! Jeśli użytkownik wpisze poprawną odpowiedź (8), formularz zostanie zaakceptowany. W przeciwnym razie zobaczy błąd.

Udoskonalenie CAPTCHA

Żeby nasza CAPTCHA była bardziej uniwersalna, możemy generować losowe pytania matematyczne. Dzięki temu boty będą miały trudniejsze zadanie.

3. Dynamiczne pytania CAPTCHA

Zmieniamy nasz formularz, aby pytanie było losowe. W tym celu korzystamy z sesji PHP.

Formularz HTML z losowym pytaniem

<?php
session_start();
// Generujemy losowe liczby
$num1 = rand(1, 10);
$num2 = rand(1, 10);
$_SESSION['captcha_result'] = $num1 + $num2; // Zapisujemy wynik w sesji
?>

<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz z CAPTCHA</title>
</head>
<body>
    <h1>Prosty formularz z CAPTCHA</h1>
    <form action="process.php" method="post">
        <label for="username">Nazwa użytkownika:</label><br>
        <input type="text" id="username" name="username" required><br><br>

        <label for="email">Email:</label><br>
        <input type="email" id="email" name="email" required><br><br>

        <!-- CAPTCHA -->
        <label for="captcha">Ile to <?php echo $num1; ?> + <?php echo $num2; ?>?</label><br>
        <input type="text" id="captcha" name="captcha" required><br><br>

        <button type="submit">Wyślij</button>
    </form>
</body>
</html>

Obsługa dynamicznej CAPTCHA w PHP

Modyfikujemy process.php, aby sprawdzał wynik zapisany w sesji.

<?php
session_start();

// Odbieramy dane z formularza
$username = $_POST['username'];
$email = $_POST['email'];
$captcha = $_POST['captcha'];

// Sprawdzamy CAPTCHA
if ($captcha == $_SESSION['captcha_result']) {
    echo "Formularz przesłany poprawnie! Dzięki, $username!";
} else {
    echo "Błąd: Niepoprawna odpowiedź na pytanie CAPTCHA.";
}
?>

Wskazówki bezpieczeństwa

Walidacja po stronie serwera: Nigdy nie polegaj tylko na weryfikacji po stronie klienta (JavaScript). Boty mogą to łatwo obejść.
Unikaj prostych pytań: Jeśli pytania są zbyt przewidywalne, boty mogą je rozwiązać.
Ograniczenie prób: Możesz zaimplementować limit prób na użytkownika, aby zapobiec masowym zgłoszeniom.

Podsumowanie

I to wszystko! Teraz wiesz, jak dodać własne proste CAPTCHA do formularza. Oczywiście, są bardziej zaawansowane metody (np. reCAPTCHA od Google), ale takie rozwiązanie wystarczy dla prostych stron. Ważne jest, żeby Twoja CAPTCHA była wystarczająco różnorodna i trudna do obejścia dla botów, ale jednocześnie łatwa w obsłudze dla ludzi.