564

Product support

Get help in the plugin support forum.

Categories

Captcha is a security authentication technique which is used to differentiate humans and bots. There are many ways to implement a captcha in a page. But some bots can even break them if it is just a text based authentication. With google's recaptcha api it is difficult for a bot to solve a challenge which the google server provides only during the run time. This plugin provides a better experience on octobercms to include more than one google recaptcha widget to your page with 2 step implementation.

reCAPTCHA is a tool to protect the website from bots and spammers

Features

  • Multiple reCaptchas in a page ie., a page can have more than one form and each form can have a reCaptcha.
  • October cms has flexible ajax framework for form submission, with the support of ajax framework, this plugin is developed in such a way that on each submission the reCaptcha component is reset to a new challenge.
  • Authentication error message is displayed below the reCaptcha component for forms submitted through ajax framework and flash message is shown for general form submission.

2 Step Implementation

  1. Declare the plugin's reCaptcha component in the configuration section of a page or a layout [reCaptcha]
  2. Add the reCaptcha component to a form element of a page and pass a unique id {% component 'reCaptcha' id='userdefined_id' %}
From version 1.3.2
  1. Add the reCaptcha component to a page from backend -> cms and place the {% component 'reCaptcha' %} code inside the required forms.
  2. Click the handlers option in the reCaptcha component and enter the form action handlers of the page that has to be protected by reCaptcha

Error Message Translations

  • Since upgraded to 1.1 (language translation), RainLab Translate plugin can be used to translate validation error messages.
  • If you want to show error messages in more than one language, then install RainLab Translate plugin and set the necessary language in Settings-> Translate->Manage Languages.
  • Once new language has been set, then language options will be appended in validation error message fields in MultiCaptcha->Error Setting tab
Share your reviews and rate the plugin. Hope you like it.

Multi Captcha plugin implementation

  • Get the Multi Captcha plugin from october cms backend settings->updates->install plugins.
  • Once successfully installed, the multi captcha plugin will be available on the navigation bar.

Get the recaptcha keys

  • To get the recaptcha api all you need is a google account and register your domain in the google's recaptcha admin page https://www.google.com/recaptcha/intro/index.html
  • Enter the label name and the domain address of your site. Say for example demotodo.com. Now register your site.
  • Now you will be allocated with keys(Site key and Secret key).
  • Paste the site key and secret key in the appropriate fields at backend menu-> Multi Captcha plugin.
  • The optional label name and domain address fields are used for reference purpose. These fields can have the label name and domain address which are registered for google recaptcha api.

Steps to add reCAPTCHA

  • Multi Captcha plugin provides a component called reCaptcha which is used to render more than one reCaptchas in your page.

  • If your project includes several forms in different pages and if all those forms require captcha authentication then it is better to define the reCaptcha component within the layout's configuration section itself. Because during the page execution life cycle the layout component modules will be executed before the page component modules, hence it will be easier for the components to get render.

  • Click and add the reCaptcha component to a page from backend -> cms -> pages.

  • reCaptcha component is bound to a page and protects only the action handlers of the page. So from version 1.3.0 declaring the component in layout is not valid.

  • Place the {% component 'reCaptcha' %} code inside the form element.

  • For example, AJAX based form submission

    <form data-request="onSubmit">
        <div>
             <input type = "text" name="user" />
        </div>
        <div>
            {% component 'reCaptcha'  %}
        </div>
        <div>
             <input type="submit" value="Submit" />
        </div>
    </form>
  • General form submission

    {{ form_open({ request: 'onUpdate' }) }}
        <div>
            <input type = "text" name="user" />
        </div>
        <div>
            {% component 'reCaptcha'  %}
        </div>
        <div>
            <input type="submit" value="Submit" />
        </div>
    {{ form_close() }}
  • Similarly you can have another form in the same page and add the {% component 'reCaptcha' %} code inside it.

  • Now, click the reCaptcha component and click the Handlers option, add the form request handlers of the page, one by one in the popup dialog.

  • Save the page.

Note:

Whenever you remove a {% component 'reCaptcha' %} code from a form, please do remember to remove the form's handler from the reCaptcha component Handlers list.

Nested Component

To use the reCaptcha component inside another component, do the following

  • Open the htm file of the component within which you want place the reCaptcha using a text editor.
  • Inside, find the form tag and place the {% component 'reCaptcha' %} code.
  • Open the page (backend -> cms -> page) where the intended component is already placed.
  • Now click and add the reCaptcha component to this page.
  • Click the Handlers option and enter the form action handler of the intended component
  • Component action handler should be entered in the specific format componentName::onHandlerName Component Name - Document Reference
  • Found the plugin useful on 7 Jan, 2020

    Really good plugin! As far as I know, this is the only which is really secure (others captcha plugins have major drawback and can be bypassed). Plugin author has been really reactive to implement changes and fix issues.

  • Found the plugin useful on 19 Jun, 2017

    Very useful plugin, the only problem is Multi Captcha shouldn't be on the menu. It should be in settings. Using 1 table for just 1 row of data is not good.

1.3.6

Translates reCAPTCHA widget to page's current locale

Dec 21, 2019

1.3.5

Supports Rainlab translate plugin's - locale based urls and locale prefixed urls

Dec 21, 2019

1.3.4

Create multicaptcha page handlers table

Dec 21, 2019

1.3.3

Remove multicaptcha page url table and page url handler table

Dec 21, 2019

1.3.2

Google reCAPTCHA token verification with HTTP Post

Dec 10, 2019

1.3.1

Create multicaptcha page url table and page url handler table

Dec 10, 2019

1.3.0

Fixed major security issue - bypass(remove) reCaptcha element

Dec 10, 2019

1.2.4

Auto generate unique id for reCaptcha components

Dec 10, 2019

1.2.3

Fixed Uncaught Exception - undefined property in jQuery script

Dec 10, 2019

1.2.2

RainLab translate plugin is not mandatory to install multicaptcha plugin

Jan 10, 2017

1.2.1

Flash error responses for general html form submission

Dec 30, 2016

1.1.1

Error messages can be added for different languages

Dec 30, 2016

1.1.0

RainLab translate plugin is integrated

Dec 30, 2016

1.0.6

Users have option in backend to add error messages and css classes

Dec 30, 2016

1.0.5

Removed language file, used for adding error messages and css classes

Dec 30, 2016

1.0.4

Improvements to jQuery script

Dec 30, 2016

1.0.3

Replaced deprecated jQuery Ajax methods

Dec 30, 2016

1.0.2

Create captcha details table and Seed a record

Aug 06, 2016

1.0.1

First version of MultiCaptcha

Aug 06, 2016

Upgrading to 1.1

Integrated RainLab Translate plugin to enhance multi language validation error message based on the locale triggered in front end.

Upgrading to 1.2

Flash pop up error response for general html form submission