recaptcha na stronę

Dodawanie captcha na stronę formularza kontaktowego

przez

Aby dodać CAPTCHA na stronę formularza kontaktowego, możesz skorzystać z Google reCAPTCHA, które jest jednym z najpopularniejszych rozwiązań. Google reCAPTCHA zabezpiecza formularz przed botami i spamem, wymagając od użytkownika potwierdzenia, że jest człowiekiem.

Oto szczegółowy przewodnik krok po kroku, jak dodać Google reCAPTCHA do formularza kontaktowego:

1. Rejestracja na Google reCAPTCHA

Aby korzystać z Google reCAPTCHA, musisz zarejestrować swoją stronę w usłudze Google.

Kroki:

  1. Wejdź na stronę Google reCAPTCHA.
  2. Zaloguj się na swoje konto Google.
  3. Zarejestruj swoją stronę, wybierając typ reCAPTCHA (polecam reCAPTCHA v2 „I’m not a robot” lub reCAPTCHA v3).
    • reCAPTCHA v2: Widoczna, użytkownik musi kliknąć pole „Nie jestem robotem”.
    • reCAPTCHA v3: Niewidoczna, działa w tle, nie wymaga interakcji użytkownika.
  4. Po rejestracji dostaniesz dwa klucze:
    • Site Key: Klucz publiczny, który będzie osadzony w kodzie HTML.
    • Secret Key: Klucz prywatny, który będzie używany do weryfikacji odpowiedzi z CAPTCHA na serwerze.

2. Dodanie reCAPTCHA do formularza HTML

Oto przykład formularza z Google reCAPTCHA v2:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Formularz Kontaktowy</title>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>
<form action="process_form.php" method="POST">
<label for="name">Imię:</label><br>
<input type="text" id="name" name="name" required><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="message">Wiadomość:</label><br>
<textarea id="message" name="message" required></textarea><br><br>
<!-- Google reCAPTCHA widget -->
<div class="g-recaptcha" data-sitekey="TWOJ_SITE_KEY"></div><br>
<input type="submit" value="Wyślij">
</form>
</body>
</html>
<!DOCTYPE html> <html lang="pl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Formularz Kontaktowy</title> <script src="https://www.google.com/recaptcha/api.js" async defer></script> </head> <body> <form action="process_form.php" method="POST"> <label for="name">Imię:</label><br> <input type="text" id="name" name="name" required><br><br> <label for="email">Email:</label><br> <input type="email" id="email" name="email" required><br><br> <label for="message">Wiadomość:</label><br> <textarea id="message" name="message" required></textarea><br><br> <!-- Google reCAPTCHA widget --> <div class="g-recaptcha" data-sitekey="TWOJ_SITE_KEY"></div><br> <input type="submit" value="Wyślij"> </form> </body> </html>
<!DOCTYPE html>
<html lang="pl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formularz Kontaktowy</title>
    <script src="https://www.google.com/recaptcha/api.js" async defer></script>
</head>
<body>

    <form action="process_form.php" method="POST">
        <label for="name">Imię:</label><br>
        <input type="text" id="name" name="name" required><br><br>

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

        <label for="message">Wiadomość:</label><br>
        <textarea id="message" name="message" required></textarea><br><br>

        <!-- Google reCAPTCHA widget -->
        <div class="g-recaptcha" data-sitekey="TWOJ_SITE_KEY"></div><br>

        <input type="submit" value="Wyślij">
    </form>

</body>
</html>
  • Zastąp "TWOJ_SITE_KEY" własnym Site Key, który otrzymałeś podczas rejestracji.

3. Weryfikacja odpowiedzi reCAPTCHA na serwerze

Weryfikacja reCAPTCHA wymaga zapytania do serwera Google, co odbywa się w backendzie strony. Poniżej przykład dla PHP.

Skrypt w PHP:

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
// Twój Secret Key z Google reCAPTCHA
$secretKey = 'TWOJ_SECRET_KEY';
// Pobranie danych z formularza i reCAPTCHA
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];
$recaptchaResponse = $_POST['g-recaptcha-response'];
// Wysłanie żądania do Google w celu weryfikacji odpowiedzi CAPTCHA
$verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
$response = file_get_contents($verifyUrl . '?secret=' . $secretKey . '&response=' . $recaptchaResponse);
$responseKeys = json_decode($response, true);
// Sprawdzenie, czy reCAPTCHA była poprawna
if (intval($responseKeys["success"]) !== 1) {
echo 'Weryfikacja CAPTCHA nie powiodła się. Spróbuj ponownie.';
} else {
// Jeśli CAPTCHA poprawna, przetwarzamy formularz
// Możesz tutaj zapisać dane do bazy danych lub wysłać e-mail
echo 'Formularz został pomyślnie wysłany!';
}
}
?>
<?php if ($_SERVER['REQUEST_METHOD'] === 'POST') { // Twój Secret Key z Google reCAPTCHA $secretKey = 'TWOJ_SECRET_KEY'; // Pobranie danych z formularza i reCAPTCHA $name = $_POST['name']; $email = $_POST['email']; $message = $_POST['message']; $recaptchaResponse = $_POST['g-recaptcha-response']; // Wysłanie żądania do Google w celu weryfikacji odpowiedzi CAPTCHA $verifyUrl = 'https://www.google.com/recaptcha/api/siteverify'; $response = file_get_contents($verifyUrl . '?secret=' . $secretKey . '&response=' . $recaptchaResponse); $responseKeys = json_decode($response, true); // Sprawdzenie, czy reCAPTCHA była poprawna if (intval($responseKeys["success"]) !== 1) { echo 'Weryfikacja CAPTCHA nie powiodła się. Spróbuj ponownie.'; } else { // Jeśli CAPTCHA poprawna, przetwarzamy formularz // Możesz tutaj zapisać dane do bazy danych lub wysłać e-mail echo 'Formularz został pomyślnie wysłany!'; } } ?>
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // Twój Secret Key z Google reCAPTCHA
    $secretKey = 'TWOJ_SECRET_KEY';

    // Pobranie danych z formularza i reCAPTCHA
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    $recaptchaResponse = $_POST['g-recaptcha-response'];

    // Wysłanie żądania do Google w celu weryfikacji odpowiedzi CAPTCHA
    $verifyUrl = 'https://www.google.com/recaptcha/api/siteverify';
    $response = file_get_contents($verifyUrl . '?secret=' . $secretKey . '&response=' . $recaptchaResponse);
    $responseKeys = json_decode($response, true);

    // Sprawdzenie, czy reCAPTCHA była poprawna
    if (intval($responseKeys["success"]) !== 1) {
        echo 'Weryfikacja CAPTCHA nie powiodła się. Spróbuj ponownie.';
    } else {
        // Jeśli CAPTCHA poprawna, przetwarzamy formularz
        // Możesz tutaj zapisać dane do bazy danych lub wysłać e-mail
        echo 'Formularz został pomyślnie wysłany!';
    }
}
?>
  • Zamień "TWOJ_SECRET_KEY" na swój Secret Key z Google.
  • W przypadku powodzenia, odpowiedź CAPTCHA będzie zawierać pole success ustawione na true (1). Jeśli weryfikacja się nie powiedzie, można poinformować użytkownika o błędzie.

4. Testowanie

Przetestuj formularz, wysyłając go bez zaznaczenia reCAPTCHA oraz z poprawnym zaznaczeniem, aby upewnić się, że weryfikacja działa poprawnie. CAPTCHA nie przepuści formularza, jeśli nie będzie poprawnie wypełniona.

5. Uwagi końcowe:

  • Google reCAPTCHA v3 jest mniej inwazyjna, ponieważ działa w tle, ale wymaga skonfigurowania bardziej zaawansowanej logiki do interpretacji wyniku CAPTCHA. Wynik ten jest wartością od 0 do 1, gdzie im wyższy wynik, tym większe prawdopodobieństwo, że użytkownik nie jest botem.
  • Jeśli nie chcesz, aby CAPTCHA była zbyt inwazyjna, rozważ użycie v3, ale v2 jest prostsze do implementacji i daje lepsze bezpieczeństwo w podstawowych zastosowaniach.
Szukasz taniego i dobrego hostingu dla swojej strony www? - Sprawdź Seohost.pl