Prestashop Google reCAPTCHA {User- Guide}

Prestashop Google reCAPTCHA : reCAPTCHA is a system designed to establish that the user is a human. 

Prestashop Google reCaptcha displays images to identify humans as part of their normal validation procedures.

It protects your website from spam and abuse and ensures higher security of your Prestashop store.

Note: PrestaShop Google reCAPTCHA module is compatible with PrestaShop multi-store feature.

• Display Google reCAPTCHA on login, registration, contact, back office Login, and personal information pages.
• Restrict user login and registration for specific email ids and IP addresses.
• Use Google reCAPTCHA in sandbox mode for testing.
• Two theme color options (light or dark) for Google reCAPTCHA to choose from.
• The module supports Google reCAPTCHA V2 and reCAPTCHA V3.
• Improves the security of your store.
• A simple solution to keep away spam bots and hackers.
• Module translation is available in following languages: French (fr), Arabic(ar), Spanish(es), German(de), Italian(It), Russian(ru), Japanese(ja), Dutch(nl), Bulgarian (bg), Portuguese (pt)

• Firstly, go to the module manager in the back office and click on ‘upload a module’.
• After that, drag and drop the module file or select the file from the system.
• In this way, the module installation will be successful.

The following custom hook needs to be added to the PrestaShop files to ensure the correct functioning of the”PrestaShop Google reCAPTCHA” module.

1.) Customer Login Form:

For Prestashop 1.7.x.x/8.x.x/9.x.x

Hook:

{hook h='displayWkCustomerLoginForm'}

File name: login-form.tpl
Path: /themes/_YOUR_THEME_NAME_/templates/customer/_partials/

Position: Add this hook before the end of the block element ‘login_form_fields’.

Refer to the screenshot for the Prestashop classic theme:

Refer to the screenshot for the hummingbird theme (Prestashop version 9.x.x):

2.) Customer Contact Form:

For Prestashop 1.7.x.x/8.x.x/9.x.x

Hook:

{hook h='displayWkCustomerContactForm'}

in Front-Office

A.) File name: contactform.tpl
Path: /modules/contactform/views/templates/hook

Position: Add this hook after ‘displayGDPRConsent’ hook before the section closing tag.

Refer to the screenshot for customer contact form [module]:

B.) File name: contactform.tpl
Path: /themes/_YOUR_THEME_NAME_/modules/contactform/views/templates/widget

Position: Add this hook after ‘displayGDPRConsent’ hook before the section closing tag.

Refer to the screenshot for customer contact form [theme]:

3.) Admin Login Form:

For PrestaShop 9.x.x

Hook:

{{ renderhook('displayWkAdminLoginForm') }}

File Name: form_theme.html.twig
Path: src/PrestaShopBundle/Resources/views/Admin/Login/form_theme.html.twig

Position: Add this hook inside the block {% block submit_row -%} before {{- form_widget(form) -}}

Refer to the screenshot for the admin login form, Prestashop 9.x.x:

Hook:

\Hook::exec('actionWkAdminLoginControllerSubmit');

File name: UserBadge.php
Path: vendor/symfony/security-http/Authenticator/Passport/Badge

Position: Add this hook inside the getUser() function after the user check condition.

Refer to the screenshot for UserBadge.php, Prestashop 9.x.x:

For Prestashop 1.7.x.x/8.x.x

Hook:

{hook h='displayWkAdminLoginForm'}

File name: content.tpl
Path: /admin/themes/default/template/controllers/login

Position: Add this hook inside the login form, after the password field <div class=”form-group”>……</div>

Refer to the screenshot for the admin login form Prestashop 1.7.x.x/8.x.x:

Hook:

Hook::exec('actionWkAdminLoginControllerSubmit');

File name: AdminLoginController.php
Path: /controllers/admin/

Position: Add this hook Inside processLogin() function, after ‘password’ validation check

Refer to the screenshot for AdminLoginController, Prestashop 1.7.x.x/8.x.x:

We override some prestashop core files:

1. Classes/form – CustomerForm.php
function name – validate()

2. Classes/form – CustomerLoginForm.php
function name – submit()

3. modules/contactform – contactform.php
function name – sendMessage()

ReCAPTCHA Environment

The admin can choose to use the module in sandbox box.

Admin can add IP addresses where reCAPTCHA will display.

General Settings

Under General Settings, the admin can:

• Select Google ReCAPTCHA version (ReCAPTCHA V2 or ReCAPTCHA V3)
• Can specify ReCAPTCHA site and secret key.
• Select ReCAPTCHA theme color.
• Configure positions where he wants to show ReCAPTCHA.

The module supports Google reCAPTCHA V2 and reCAPTCHA V3.

To get the Credentials of reCaptcha, Admin has to create/signup to their accounts from the link: https://www.google.com/recaptcha 

Admin needs to either create a new account or login to its existing account to move ahead.

Once logged in, admin needs to fill necessary information to get the reCAPTCHA credentials.

Once all the details are filled in, the credentials for reCAPTCHA will be generated.

You need to enter the above generated credentials in the module configuration.

Restricted emails

Under Restricted emails, the admin can specify email address of the users who will not be able to log in or register on store.

Once added, the admin can remove restriction from the email address.

Restricted IP Addresses

Under Restricted emails, the admin can specify IP addresses on which the users who will not be able to log in or register.

Google reCAPTCHA will display on the pages selected by the admin under General Settings.

Login Page

reCAPTCHA V3

reCAPTCHA V2

Registration Page

reCAPTCHA V3

reCAPTCHA V2

Contact Page

reCAPTCHA V3

reCAPTCHA V2

Back office Login Page

reCAPTCHA V3

reCAPTCHA V2

Personal Information Page

reCAPTCHA V3

reCAPTCHA V2

For any kind of technical assistance or query, please raise a ticket at http://webkul.uvdesk.com or send us a mail at [email protected]

Also, please explore our PrestaShop development services & vast range of featureful PrestaShop Addons.