📜 ⬆️ ⬇️

Nakapcha Mail.Ru - captcha, which is not shown

Hi, Habr! Today I want to tell you about our relatively recently created captcha service. This service differs from similar ones in that our captcha never more often needs to be solved at all. As you know, captcha negatively affects the conversion - not everyone can quickly solve it, especially if it is unreasonably complex, and some users leave the resource. And I do not know such people who love to break their eyes and enjoy the process of solving. Therefore, if you save the user from having to enter another additional field, this will make him a little more loyal.


Hardly anyone will be able to unravel this captcha :)

In a nutshell, Nekapcha is an intellectual captcha service that does not require a person to undergo an inspection. Naturally, without additional information, the service cannot say anything about the user. Where do you get it from? The fact is that Mail.Ru has more than 100 million users, and most of them are authorized. And this means that with a request for our domains, session cookies are transmitted, by which we identify the user, and then we retrieve his profile, statistics, spam rating, etc. All this information is fed to the input of the classifier algorithm, and at the output we get an assumption about whether the user is a human or a spam bot.

We submitted an application for PCT invention in December 2013, the service itself was launched in the spring of 2014 (by the way, long before the launch of the updated reCAPTCHA - proof and, for example, proof ). To be sure that the service is working properly, we had to keep it in beta status for a long time and run a small advertisement. But now the time has come to introduce Nekapchu to the general public. The service was created to protect the forms on any sites, it is available for free to all users and has been successfully used by some of our projects for almost a year.
')

What it looks like for the user


The service was conceived with the intention that a person had to introduce captcha as seldom as possible, ideally never. For the user, Nekapcha is presented in the form of a widget, which can be located anywhere in the form. A widget can be in one of two states: verified and unverified.


Unverified state, you need to enter captcha.

The widget will be in an unverified state if the algorithm deems that the user is an automated script. In this case, you must correctly enter the captcha. If the picture is not readable, then it can be updated. In the captcha drawing, we tried to achieve a balance of readability and complexity.


The verified state, captcha checking is not needed.

If the Nekapchi algorithm most likely determined that the user is a human, the widget will be in a verified state.

What it looks like for webmasters


Embedding Nekapchu usually not a big deal. First you need to register your domain on the Necapci site ( IDNs are supported). The domain is assigned two keys: public and secret. The public key is needed for captcha generation, and the secret key is for verification.

The service API is very simple and consists of two calls:

A link to the script is added to the page:

 <script type="text/javascript" src="https://api-nocaptcha.mail.ru/captcha?public_key=KEY"></script> 

And inside the div form with the nocaptcha identifier, in which the widget will be drawn:

 <div id="nocaptcha"></div> 

The widget adds two new fields to the form:

 <input type="text" name="captcha_value" value=""> <input type="hidden" name="captcha_id" value="CAPTCHA_ID"> 

These fields are passed among the form parameters to the handler. If captcha was not displayed, then the captcha_value field will remain empty. On the server side in the handler, you need to pull out the values ​​of these fields and pass them to the request to check the captcha. This is how a form handler can look like before embedding Nekapchi:

 <?php function expand_template($file, $vars = null) { if ($vars !== null) extract($vars, EXTR_OVERWRITE); include $file; } $vars = array(); if ($_SERVER['REQUEST_METHOD'] == 'POST') { //     $vars['result'] = 'ok'; } else { //    $vars['form'] = true; } expand_template('template.html', $vars); 

Depending on the request method, either the form is drawn or the submitted form is processed. After embedding, the handler changes slightly:

 <?php //    ,   https://nocaptcha.mail.ru define('PUBLIC_KEY', 'ed64110f3e3ef4c2aad78446fdfe63a5'); define('PRIVATE_KEY', 'da9d56871519a43eba63a9a394f8fd53'); //  PHP-  require_once('../../Package/nocaptcha/captcha.php'); function expand_template($file, $vars = null) { if ($vars !== null) extract($vars, EXTR_OVERWRITE); include $file; } $vars = array(); if ($_SERVER['REQUEST_METHOD'] == 'POST') { $result = check_captcha(PRIVATE_KEY, $_POST['captcha_id'], $_POST['captcha_value']); if ($result === true) { //     $result = 'ok'; } else { //     , //      } $vars['result'] = $result; } else { //    $vars['form'] = true; $vars['nocaptcha_script'] = display_captcha(PUBLIC_KEY); } expand_template('template.html', $vars); 

Added key constants that are used to display the form and check the captcha. Before displaying the form, a tag is generated with reference to the Non-Captcha script to which the public key is transmitted. Before processing the form fields, a request is made to check the captcha. Depending on the response of the service, the handler can either continue the work, or inform the user about the failed anti-bot check and ask to repeat the input. This example uses helper functions from a PHP module, which will be described in more detail below.

The service responds to the request for captcha checking in JSON format. If captcha is entered correctly, then true is returned, otherwise false. For the handler, the procedure for checking the hidden and shown captcha is the same and transparent. On a request to check a hidden captcha, it always returns true regardless of the captcha_value value.

{"status": "ok", "is_correct": true/false}

This is how a diagram of messages looks like schematically when a user visits a page with a form that uses Nekapchu:



And this is what the message diagram looks like when the user has submitted the completed form:



Widget customization


The widget has a number of display options. They are set using the javascript nocaptchaSettings object, which must be created on the page with the form.

Widget supports localization. Using the lang parameter, one of the two available languages ​​is set: Russian or English. The default language is Russian.

If there are several forms on the page, and each of them needs to be protected by Nekapchey, then you can set unique identifiers of containers in which widgets will be drawn. For this there is a parameter containers, which takes an array of strings. Naturally, it is necessary to add the corresponding div to each form. By default, a container with the nocaptcha identifier is searched.

You can also set tabindex fields for captcha input to ensure continuous data entry and correct TAB switching between form fields. To do this, use the tabindex parameter.

Documentation and auxiliary modules


We tried to compile good and complete documentation on how to embed Nekapchu, how it works and how to use its API. It is available at .

In addition, small auxiliary modules for two languages ​​were implemented - PHP and Python . They are located on github, available for download, study and use in any projects. There are several examples in these modules that will help you understand how to use their functions. Also, based on the source code of the modules, you can easily write your own libraries for other frameworks.

I hope our new service will suit your taste, and your users will appreciate its benefits. :)

We are waiting on our site https://nocaptcha.mail.ru .

Source: https://habr.com/ru/post/255633/


All Articles