#267

Product support

Get help in the plugin support forum.

Categories

  • Developer Tools
  • Security

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 impossible 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.

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' %}

Error Message Translations

  • Since upgraded to 1.1 (language translation), RainLab Translate plugin can be used to translate validation error messages in MultiCaptcha plugin.
  • 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.
The Multi Captcha plugin provides a component called reCaptcha which is used to render more than one recaptchas in your page.
  • reCaptcha component can be included in your page by defining it in the configuration section.

      [reCaptcha]
      ==
  • 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.

  • Once defined in the configuration section then the next step is to add the component to a form.

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

Similarly you can have another form in the same page and you may add the reCaptcha component with a unique id . Unique id is a user defined value. {% component 'reCaptcha' id="comments_form_captcha" %}. Only the component's unique id identifies, which reCaptcha component to refer and perform operations like rendering, reset or error response.

Nested Component

Once if the reCaptcha component has been declared in the configuration section of the layout, then it can be used as a nested component. Say for example inside the view file of some other component you may define within a form {% component 'reCaptcha' id='unique_id' %}.

  • 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.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