ReCaptcha na stronie www

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 v2”, 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 </head> dodajemy poniższy kod:

<script src='https://www.google.com/recaptcha/api.js'></script>

Następnie w miejscu w którym ma się wyświetlić captcha (u nas tuż przed <input type=”submit” name=”submit” value=”Wyślij”>) wklejamy następujący kod:

<div class="g-recaptcha" data-sitekey="<SITE_KEY>"></div>

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

Po odświeżeniu strony zobaczymy na niej pole z ReCaptcha. Jednak nie jest ona jeszcze sprawdzana 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:

$response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=<SECRET_KEY>&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']), true);

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

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');
  $input = $_POST;
}else{
  // dalej kod odpowiedzialny za wysyłkę wiadomości

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

 

5. Włączanie przycisku po zatwierdzeniu Captcha.

Przydatnym rozwiązaniem może być blokowanie przycisku „Wyślij” do momentu zatwierdzenia captchy przez użytkownika. W tym celu modyfikujemy nieznacznie nasz kod. Do przycisku dodajemy atrybut disabled oraz id, wygląda on teraz tak:

<input type="submit" name="submit" value="Wyślij" disabled id="submit">

Modyfikujemy kod dodający ReCaptchę aby po zatwierdzeniu wykonywał daną funkcję:

<script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptcha'></script>

Następnie przed nim dodajemy dodatkowy kod JavaScript:

<script>
var onloadCaptcha = function() {
  grecaptcha.render('g-recaptcha', {
    'sitekey' : '<SITE_KEY>',
    'callback' : function() {
      document.getElementById('submit').disabled = false;
    }
  });
};
</script>

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

W tym momencie musimy także zmienić nasz element który wyświetla captchę na następujący:

<div id="g-recaptcha"></div>

Od tego momentu przycisk „Wyślij” będzie aktywny dopiero po kliknięcie na Captchę.

 

6. Podsumowanie

Mam nadzieje że ten przykład pomoże Wam w tworzeniu stron z wykorzystaniem ReCaptcha.

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'])){

  $response=json_decode(file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret=6Lc8nEQUAAAAAJLks_znu0sONR2OAvX3aULuS8e1&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']), true);

  if($response['success'] == false){
    die('Kod captcha jest nieprawidłowy');
    $input = $_POST;
  }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">
  <script>
    var onloadCaptcha = function() {
      grecaptcha.render('g-recaptcha', {
        'sitekey' : '6Lc8nEQUAAAAACYF3NnSRzdtIGK63pBCfLMwFiUU',
        'callback' : function() {
          document.getElementById('submit').disabled = false;
        }
      });
    };
  </script>
  <script src='https://www.google.com/recaptcha/api.js?onload=onloadCaptcha'></script>
</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>

  <div id="g-recaptcha"></div>

  <input type="submit" name="submit" value="Wyślij" disabled id="submit">
</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;
}

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close