reCAPTCHA na stronie www - Kamil Wyremski

W tym wpisie przedstawię w jaki praktyczny sposób możemy wykorzystać reCAPTCHA od Google na naszej stronie www.

1. Podstawowy kod formularza kontaktowego

Do tego celu wykorzystamy formularz kontaktowy z wpisu http://blog.wyremski.pl/formularz-kontaktowy-w-php/ – konkretnie punkty od 1 do 3. Poniżej kod źródłowy obydwóch plików:

Plik contact.php:

<?php
header('Content-Type: text/html; charset=utf-8');

session_start();

if(!empty($_POST['name']) and !empty($_POST['email']) and !empty($_POST['message'])){

  $email_odbiorcy = 'example@example.com';

  $header = 'Reply-To: <'.$_POST['email']."> \r\n";
  $header .= "MIME-Version: 1.0 \r\n";
  $header .= "Content-Type: text/html; charset=UTF-8";

  $wiadomosc = "<p>Dostałeś wiadomość od:</p>";
  $wiadomosc .= "<p>Imie i nazwisko: " . $_POST['name'] . "</p>";
  $wiadomosc .= "<p>Email: " . $_POST['email'] . "</p>";
  $wiadomosc .= "<p>Wiadomość: " . $_POST['message'] . "</p>";

  $message = '<!doctype html><html lang="pl"><head><meta charset="utf-8">'.$wiadomosc.'</head><body>';

  $subject = 'Wiadomość ze strony...';
  $subject = '=?utf-8?B?'.base64_encode($subject).'?=';

  if(mail($email_odbiorcy, $subject, $message, $header)){
    die('Wiadomość została wysłana');
  }else{
    die('Wiadomość nie została wysłana');
  }
}
?>
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Formularz kontaktowy</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<form method="post">
  <label for="name">Imię i nazwisko</label>
  <input type="text" name="name" id="name" placeholder="Jan Kowalski" required>

  <label for="email">Email</label>
  <input type="email" name="email" id="email" placeholder="example@example.com" required>

  <label for="message">Wiadomość</label>
  <textarea name="message" id="message" placeholder="Wpisz swoją wiadomość" required></textarea>

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

</body>
</html>

Plik style.css:

body {
  font-family: Arial, Helvetica, sans-serif;
}
form{
  width:320px;
  margin:20px auto;
  border:2px solid #ccc;
  padding:20px;
}
form label {
  display:block;
  margin-bottom:5px;
  font-weight:bold;
  font-size:12px;
  color:#555555;
}
form textarea,form input {
  padding:5px;
  border:1px solid #ccc;
  margin-bottom:25px;
  width:100%;
  box-sizing: border-box;
}
form input[type=submit] {
  cursor:pointer;
  margin-bottom:0px;
}

2. Wygenerowanie kluczy reCAPTCHA

Przed modyfikacją kodu skryptu musimy wygenerować reCAPTCHA SiteKey i reCAPTCHA SecretKey.

W tym celu będąc zalogowani na naszym koncie Google przechodzimy pod adres https://www.google.com/recaptcha/admin#list

Pod „Register a new site” w polu „Label” wpisujemy nazwę naszej pary kluczy (nazwa może być dowolna), zaznaczamy pozycję „reCAPTCHA v3”, w polu „Domains” wpisujemy adres URL naszej strony (np blog.wyremski.pl), zaznaczamy pole „Accept the reCAPTCHA Terms of Service” i klikamy na „Register”.

Zostaniemy przekierowani na nową stronę na której będą wyświetlone pola”Site key” oraz „Secret key”. Są one niezbędne do dalszej integracji.

3. Dodanie skryptu na stronę www

Na naszej stronie www tuż przed zamykającym znacznikiem </body> ładujemy bibliotekę do obsługi reCAPTCHA:

<script src="https://www.google.com/recaptcha/api.js?render=<SITE_KEY>"></script>

Znacznik <SITE_KEY> zastępujemy naszą wartością Site Key z punktu numer 2.

A następnie dodajemy kod JavaScript który pobierze token i zapisze go w inpucie:

<script>
grecaptcha.ready(function () { 
    grecaptcha.execute('<SITE_KEY>', { action: 'contact' }).then(function (token) { 
        const elms = document.getElementsByClassName('recaptcha_response') 
        for (let i = 0; i < elms.length; i++) {
            elms[i].setAttribute("value", token); 
        } 
    }); 
});
</script>

Wszystkie inputy o klasie „recaptcha_response” dostaną wartości tokenu z reCAPTCHA (w ten sposób na stronie możemy korzystać z większej ilości formularzy z obsługą captchy). Tu ponownie znacznik <SITE_KEY> zastępujemy naszą wartością Site Key.

Następnie w samym formularzu wklejamy następujący tag inputa:

<input type="hidden" name="recaptcha_response" class="recaptcha_response">

Teraz musimy dodać sprawdzane tokenu po stronie serwera.

4. Integracja po stronie PHP

W pliku contact.php zaraz po sprawdzaniu czy jest przesyłany w zmiennej POST formularz kontaktowy dodajemy następujący kod:

$verify = curl_init();
curl_setopt($verify, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
curl_setopt($verify, CURLOPT_POST, true);
curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query([
    'secret' => '<SECRET_KEY>',
    'response' => $_POST['recaptcha_response']
]));
curl_setopt($verify, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($verify, CURLOPT_RETURNTRANSFER, true);
$response = json_decode(curl_exec($verify),true);

Znacznik <SECRET_KEY> zastępujemy naszą wartością Secret Key z punktu numer 2. Nasz serwer PHP musi posiadać obsługę CURL.

Od teraz w zmiennej $response mamy odpowiedź serwera Google czy ReCaptcha jest prawidłowa.

Sprawdzamy ją w następujący sposób:

if($response['success'] == false){
  die('Kod captcha jest nieprawidłowy');
}else{
  // kod odpowiedzialny za wysyłkę wiadomości
}

Gdy token jest nieprawidłowy, wiadomość nie zostanie wysłana.

5. Podsumowanie

Mam nadzieje że ten przykład pomoże Wam w tworzeniu stron z wykorzystaniem reCAPTCHA. Oczywiście w prawdziwym wykorzystaniu nie będziemy zatrzymywać strony funkcję die(); tylko po prostu będziemy na stronie wyświetlać komunikaty o prawidłowym lub nieprawidłowym wysłaniu wiadomości.

Kod przykładu znajduje się na GitHub: https://github.com/kamilwyremski/contact_form_recaptcha

Plik contact.php:

<?php

header('Content-Type: text/html; charset=utf-8');

session_start();

if(!empty($_POST['name']) and !empty($_POST['email']) and !empty($_POST['message'])){

  $verify = curl_init(); curl_setopt($verify, CURLOPT_URL, "https://www.google.com/recaptcha/api/siteverify");
  curl_setopt($verify, CURLOPT_POST, true); 
  curl_setopt($verify, CURLOPT_POSTFIELDS, http_build_query([
    'secret' => '<SECRET_KEY> ',
    'response' => $_POST['recaptcha_response'] 
  ])); 
  curl_setopt($verify, CURLOPT_SSL_VERIFYPEER, false); 
  curl_setopt($verify, CURLOPT_RETURNTRANSFER, true); 
  $response = json_decode(curl_exec($verify),true);

  if($response['success'] == false){
    die('Kod captcha jest nieprawidłowy');
  }else{
    $email_odbiorcy = 'example@example.com';

    $header = 'Reply-To: <'.$_POST['email']."> \r\n";
    $header .= "MIME-Version: 1.0 \r\n";
    $header .= "Content-Type: text/html; charset=UTF-8";

    $wiadomosc = "<p>Dostałeś wiadomość od:</p>";
    $wiadomosc .= "<p>Imie i nazwisko: " . $_POST['name'] . "</p>";
    $wiadomosc .= "<p>Email: " . $_POST['email'] . "</p>";
    $wiadomosc .= "<p>Wiadomość: " . $_POST['message'] . "</p>";

    $message = '<!doctype html><html lang="pl"><head><meta charset="utf-8">'.$wiadomosc.'</head><body>';

    $subject = 'Wiadomość ze strony...';
    $subject = '=?utf-8?B?'.base64_encode($subject).'?=';

    if(mail($email_odbiorcy, $subject, $message, $header)){
      die('Wiadomość została wysłana');
    }else{
      die('Wiadomość nie została wysłana');
    }
  }
}
?>
<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Formularz kontaktowy</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

<form method="post">
  <input type="hidden" name="recaptcha_response" class="recaptcha_response">
  <label for="name">Imię i nazwisko</label>
  <input type="text" name="name" id="name" placeholder="Jan Kowalski" required>

  <label for="email">Email</label>
  <input type="email" name="email" id="email" placeholder="example@example.com" required>

  <label for="message">Wiadomość</label>
  <textarea name="message" id="message" placeholder="Wpisz swoją wiadomość" required></textarea>

  <input type="submit" name="submit" value="Wyślij">
</form>
<script src="https://www.google.com/recaptcha/api.js?render=<SITE_KEY>"></script>
<script>
grecaptcha.ready(function () {
  grecaptcha.execute('<SITE_KEY>', { action: 'contact' }).then(function (token) {
    const elms = document.getElementsByClassName('recaptchaResponse')
    for (let i = 0; i < elms.length; i++) {
      elms[i].setAttribute("value", token);
    }
  });
});
</script>
</body>
</html>

Plik style.css:

body {
  font-family: Arial, Helvetica, sans-serif;
}
form{
  width:320px;
  margin:20px auto;
  border:2px solid #ccc;
  padding:20px;
}
form label {
  display:block;
  margin-bottom:5px;
  font-weight:bold;
  font-size:12px;
  color:#555555;
}
form textarea,form input {
  padding:5px;
  border:1px solid #ccc;
  margin-bottom:25px;
  width:100%;
  box-sizing: border-box;
}
form input[type=submit] {
  cursor:pointer;
  margin-bottom:0px;
}