Fałszywe rejestracje nowych użytkowników w Prestashop.

Pod koniec kwietnia pojawiły się ataki na sklepy Prestashop rejestrujące nowe fikcyjne konta użytkowników.
Konta te są zakładane przez boty w celu rozsyłania spamu. Po założeniu konta ze sklepu jest wysyłany powitalny mail do klienta z potwierdzeniem założenia konta.
Boty zamiast nazwiska podają link do strony i w ten sposób „przemycają” link wysyłając go w powitalnej wiadomości do końcowych użytkowników.

screen fałszywych userwów w prestashop
Fałszywi użytkownicy w panelu administracyjnym Prestashop

Jednym ze sposóbów na zabezpieczenie przed rejestracją fałszywych kont w Prestashop jest wdrożenie reCaptcha google, który trzeba zaznaczyć przed założeniem konta.

Screen z formularza rejestracji prestashop z zainstalowaną captcha
Screen formularza rejestracji nowego użytkownika z zainstalowanym google reCaptcha

W celu wdrożenia tego rozwiązania niezbędę jest zarejestrowanie strony na której będzie reCaptcha. Można to zrobić pod adresem https://www.google.com/recaptcha/intro/v3.html

Po zarejestrowaniu konta otrzymujemy klucz do witryny którym będziemy się posługiwali przy wdrożeniu reCaptcha.

Do wdrożenia będziemy potrzebowali zmodyfikować 2 pliki
header.tpl – który znajduje się w public_html/themes/default-bootstrap

  • public_html to bierzący katalog sklepu prestashop.
  • themes jest katalogiem szablonu prestashop (domyślnie themes).

W tym pliku musimy zainicjować skrypt js google wystarczy wkleić:

między początkiem nagłówka strony a końcem w html oznaczone jako <head> (początek) </head> (koniec)

Kod html nagłówka header.tpl – z zaznaczonym wstawionym skryptem recaptcha

W kolejnym kroku musimy do fomularza rejestracji dodać div, który będzie odpowiedzialny za wyświetlanie reCaptcha.
Formularz rejestracji znajduje się w pliku authentication.tpl
Dostępny w tym samym folderze co plik header.tpl
public_html/themes/default-bootstrap

  • public_html to bierzący katalog sklepu prestashop.
  • themes jest katalogiem szablonu prestashop (domyślnie themes)

Jeśli dysponujesz standadowym szablonem rejstracji w linii 64 po

<div class="submit"> 

wklej div wyświetlający reCaptha.

<div class="g-recaptcha" data-callback="recaptcha_callback" data-sitekey="T W Ó J     K L U C Z     S TR O N Y"></div>

(patrz rys pkt a)

W tym formularzu dostępne są 2 przyciski, które mogą wykonać formularz – nie wiem na którym bot działa dlatego zabezpieczymy oba.
W pierwszym button jest jasno określony przez id=”SubmitCreate”. Drugi ukryty <input type=”submit” już nie. Wystarczy nadać mu nazwę id np: id=”SubmitCreateInput” (na rys. pkt b).
Obydwa guziki musimy wyłączyć – będą włączane dopiero po zanaczeniu reCpatha.
W tym celu trzeba dodać do jednego i drugiego disabled=”disabled” (na rysunku pkt c).

Na końcu rozmularza wklejamy kod, który włączy nam guzik rejestracji użytkownika w Prestashop po prawidłowej weryfikacji reCaptha.

<script type="text/javascript">
function recaptcha_callback() {
$('#SubmitCreate').removeAttr('disabled');
$('#SubmitCreateInput').removeAttr('disabled');
};                                 
</script>

Całość powinna wyglądać jak na rysunku poniżej.

zastosowanie recaptha google prestashop

Efekt końcowy powinien być taki jak na filmie.

W przypadku problemów, prosimy o kontakt.

Zamów wycenę
Polityka prywatności | Regulamin
Pro-link 2005-2020