Google Recaptcha

Overview

According to the search from Economictimes, today’s Artificial Intelligence (AI) technology can solve almost variant of distorted text at 99.8% accuracy. Distorted text, therefore, is no longer a dependable tool to test. To prevent human effort from accessing your online store, Magento 2 Google Recaptcha extension has been released by Mageplaza experts.

Google Recaptcha extension is the best solution to protect your e-commerce store from spams and frauds. Also, it is also a useful tool that helps online stores avoid the requirements of the bots. Thanks to this module, interestingly, valid users can be accepted easily.

How to Configure

configuration

Configuration

General Configuration

general configuration

  • Enable: Choose Yes to enable this module
  • Language Code: Choose the language displaying the reCAPTCHA on the frontend and in the backend
  • Invisible

Note: Apply for the frontend

  • Google API Key: Enter the Key Invisible reCAPTCHA
  • Google API Secret Key: Enter the Secret Key
  • How to create reCAPTCHA: Can be found here
  • Visible

Note: Apply for the backend

  • Google API Key: Enter the Key Visible reCAPTCHA
  • Google API Secret Key: Enter the Secret Key
  • How to create reCAPTCHA: Can be found here

Backend Configuration

backend configuration

  • Enable: Choose Yes to enable reCAPTCHA when accessing the admin panel
  • Forms: Choose a place displaying the reCAPTCHA. Store owners can allow reCAPTCHA to display in 2 forms:
    • Forms = Admin Login: reCAPTCHA will display in the Admin Login Form when store owners log into the admin page
    • Forms = Admin Forgot Password: reCAPTCHA will display in the Admin Forgot Password Form when store owners access on the Admin Forgot Password page
  • Size: Choose the size to show the reCAPTCHA

size recaptcha

  • Size = Compact: reCAPTCHA will display as the following image:

compact size

  • Size = Normal: reCAPTCHA will display as the following:

normal size

  • Theme

theme

  • Theme = Light: reCAPTCHA will display the light color
  • Theme = Dark: reCAPTCHA will display the dark color

Frontend Configuration

frontend configuration

  • Enable: Select Yes to display reCAPTCHA on the frontend
  • Forms: Choose a place displaying reCAPTCHA on the frontend. Store owners can allow reCAPTCHA to display in all forms.
    • Forms = Login: reCAPTCHA will show in the Login Form when visitors login to the website
    • Forms = Create User: reCAPTCHA will show in the Create User Forms when visitors create an account
    • Forms = Forgot Password: reCAPTCHA will show in the Forgot Password Form when customers access the website to get their password
    • Forms = Contact Us: reCAPTCHA will display in the Contact Us Form
    • Forms = Change Password: reCAPTCHA will show in the Change Password Form
    • Forms = Product ReView: reCAPTCHA will display when visitors access the product page to review
  • Badge Position

badge position

  • Badge Position = Inline: Recaptcha will display in the selected form on the frontend
  • Badge Position = Bottom Right: Recaptcha will display at the bottom right of the page
  • Badge Position = Bottom Left: Recaptcha will display at the bottom left of the page
  • Theme

theme

  • Theme = Light: reCAPTCHA will display the light color
  • Theme = Dark: reCAPTCHA will display the dark color
  • Custom Form Position: Use this feature to add reCAPTCHA into any form on your store

custom form  position

  • Form Post Paths

    • Enter the path (url) where will process your form information

    For example: newsletter/subscriber/new/, display reCAPTCHA in the email address field on the website.

Below are some detailed steps:

  • Step 1: Login to your website
  • Step 2: Choose Form that you want to display reCAPTCHA and open the Test window
  • Step 3: After that, choose Element tab, then choose the form that contains the field you want to add reCAPTCHA

example

  • Step 4: In the Subscriber Form in the Action field, copy the URL path. (In this example, the URL is “newsletter/subscriber/new/”)

  • Step 5: Paste the URL into the Form Post Paths field

    • The paths are separated by down stream.
    • If you this field is empty and you fill in the information in the CSS Selectors field, reCAPTCHA still displays on the form that you fill in the information CSS Selectors, but it doesn’t still work on that form.

    css selectors

  • CSS Selectors

    • You need to take CSS Selector of the form. At our example, we will take ID of the form.

    For example: #newsletter-validate-detail, display reCAPTCHA in the Subscriber

    css selectors

    • The IDs are separated by down stream.
    • If you leave this field blank while filling in the information in Form Post Paths field, reCAPTCHA won’t display on the form you want.

Note:

  • In the Custom Form Position field, if you want to show reCAPTCHA on the form you want, you have to fill in all information of 2 fields: Form Post Paths and CSS Selectors.
  • Using the invisible CAPTCHA system outside the frontend, most users won’t see CAPTCHAs at all, not even the “I’m not a robot” checkbox. If you are flagged as “suspicious” by the system, then it will display the usual challenges. Hence, If you want to check it you can try to click the Create an Account button many times.
  • Need to download the library of Google Recaptcha so that when you run this extension, there's no error occur
  • When you cannot access to the admin panel while reCAPTCHA enables, you can use the following command to disable the module via composer as well as can access the admin page as usual.

php bin/magento module:disable Mageplaza_Recaptcha

Or you also disable the configuration by the command below:

php bin/magento mageplaza:core:disable Mageplaza_Recaptcha

Refer the guide to download the library

  • Create the folder: lib/internal/Mageplaza
  • Go to the path to download the library of Google Recaptcha here
  • Extract magento-2-google-recaptcha-library.zip into lib/internal/Mageplaza, then change the name of the file that you have just extracted, Recaptcha

recaptcha

  • Run the following command to install: php bin/magento setup:upgrade

The display of reCAPTCHA on the frontend

display recaptcha

display recaptcha on the frontend

The display of reCAPTCHA in the backend

Recaptcha in the backend

Must-have extensions for your Magento stores