preface

Behavior verification code through the user’s operations to complete the verification, the common behavior verification code is drag and touch.

Drag verification is to drag the specified graph to the specified position to complete the verification according to the picture display. And the touch type verification code is through the mouse click out of the example of the graph to complete the verification.

Behavior verification code application

Aj-captcha (project address **gitee.com/anji-plus/c… **), this project includes two types of captcha: sliding puzzle and text click. In addition to embedded interaction, it also provides a way of pop-up interaction without affecting the original UI layout.

The verification process of AJ-CAPTCHA is as follows:

  1. The user accesses the login page and sends a request to display the behavior verification code
  2. Users follow the prompts to complete the captcha puzzle/click
  3. The user submits the form, and the front end submits the output of the second step to the background along with it
  4. Validation data after the form is submitted to the background, the background needs to call captchaService. Do the second check verification.
  5. Step 4 Return the verification pass/fail to the product application back end, and then back to the front end. See the figure below.

It’s easy to use if you’re a Maven developer, and the project maintainer has pushed dependencies to a central repository. Just introducing the dependency does 90% of the work. The next step is to authenticate twice in the login interface.

The AJ_Captcha can be easily integrated into the project with the integration of various front-end languages including HTML, VUE, Flutter, Uni-app, Android Kotlin, IOS, PHP, etc.

Next, let’s take Spring Boot+ HTML as an example to see how to quickly integrate AJ_Captcha to complete the interactive flow of behavior captcha.

The first step is to introduce AJ_Captcha dependencies in Spring Boot

<dependency> <groupId>com.anji-plus</groupId> <artifactId>spring-boot-starter-captcha</artifactId> The < version > 1.2.9 < / version > < / dependency >Copy the code

By default, AJ_Captcha provides a verification code generation interface and a verification interface. The default address of the verification code generation interface is /captcha/ GET, and the default address of the verification interface is /captcha/check. In other words, after the above steps are completed, the front-end can be provided with the interface for obtaining and verifying the verification code. If you also want to personalize your captcha generation, you can configure the following properties:

Select * from 'classpath' where 'classpath' : / / select * from 'resource' where 'classpath' : / / select * from 'resource' where 'classpath' : / / select * from 'resource' where 'classpath' : / / select * from 'resource' where 'classpath' : Classpath :images/jigsaw AJ.captcha. Jigsaw =classpath:images/jigsaw If you do not configure the default image, you will use the default image. Classpath :images/pic-click aj.captcha. Pic-click =classpath:images/pic-click # For distributed applications, we recommend that applications implement their own CaptchaCacheService, Such as use Redis or memcache, # reference CaptchaCacheServiceRedisImpl. Java # if the application is a single point, nor use Redis, it defaults to using memory. # Memory cache is only suitable for single-node deployment applications. Otherwise, verification code production and verification will not be synchronized between nodes, resulting in failure. #!!!!!! Note, if the application is using the spring - the boot - starter - data - redis, # please open CaptchaCacheServiceRedisImpl. Java annotations. # redis -----> SPI: Create a meta-INF. Services folder in the resources directory and refer to the current service resources. # cache local/redis... Aj.captcha. cache-type=local # local cache threshold # AJ.captcha. cache-number=1000 # local Clears expired caches periodically (in seconds). If set to 0, it will not be executed # AJ.captcha. timing =180 # # spring. Redis. Host = 10.108.11.46 spring. Redis. Port = 6379 # spring. Redis. Password = # spring. Redis. Database = 2 #spring.redis.timeout=6000 # Captcha type default Instantiate both. Aj.captcha. type=default # Chinese characters use Unicode, ensure that the program reads Chinese through @value, can use this online conversion; Yml format does not need to convert Unicode # # https://tool.chinaz.com/tools/unicode.aspx Chinese turn the lower right corner watermark text watermarking (I) Aj.captcha. water-mark=\ 工 程 11\ 工 程 84\ U6C34 \ U5370 # Directly configure the existing font name in the OS layer, such as: Song Times times # To customize a specific font, place the font in the fonts folder under project Resources. TTF \ TTC \otf # aj.captcha. Water-font = wenquanzhenghei. TTF # TTF \ TTC \otf # aj.captcha Aj. Captcha. The font - type = WenQuanZhengHei. The vera.ttf # check sliding puzzle allowed error offset (default 5 pixels) aj. Captcha. Slip - offset = 5 # aes encryption coordinates opened or disable (true | false) Aj.captcha. aes-status= True # Sliding Interference (0/1/2) AJ.captcha. interference-options=2 AJ.captcha. history-data-clear-enable=false # Whether the interface request times a minute open true | false aj. Captcha. The req - frequency - limit - the enable = false # 5 validation fails, Aj.captcha. req-get-lock-limit=5 Aj.captcha. req-get-lock-seconds=360 # get Maximum number of requests in one minute on an interface AJ.captcha. req-get-minut-LIMIT =30 # check Maximum number of requests in one minute on an interface Aj.captcha. req-check-minut-limit =60 # Verify Specifies the maximum number of requests made by an interface in one minuteCopy the code

Second, the front-end pseudo code calls the interface

  1. Introduce verification code style and verification files
  2. Verification code acquisition and verification
<script> $('#content').slideverify ({baseUrl:'http://localhost:8080/', // server request address; ImgSize: {width: '310px',height: {width: '310px',height: {width: '310px',height: }, barSize:{width: '310px',height: '200px',}, barSize:{width: '310px',height: '50px'}, barSize:{width: '310px',height: '200px',}, barSize:{width: '310px',height: '50px'} '400px', height: '40px',}, beforeCheck:function(){// Check parameter validity function mode ="pop" valid let flag = true; Return flag}, ready: function() {}, // return a Boolean value; Function (params) {$.extend({}, params)}, error: Function () {} // failed callback}); </script>Copy the code

Verification code After successful verification, a string code is returned for secondary verification.

The third step, the user login, the second authentication

When a client logs in, it carries the string code returned after successful authentication. The second authentication is performed on the login interface. The verification process is complete.

@Autowired private CaptchaService captchaService; /** * Obtain token * @param user * @return */ @PostMapping("getWebToken") public ResultBean getWebToken(@RequestBody LoginUser user,String captchaVerification){ ResultBean resultBean = new ResultBean(); CaptchaVO captchaVO = new CaptchaVO(); captchaVO.setCaptchaVerification(captchaVerification); ResponseModel responseModel = captchaService.verification(captchaVO); if(! responseModel.isSuccess()){ resultBean.fillCode(0,responseModel.getRepMsg()); return resultBean; } // After verification, continue the login process}Copy the code

That’s it for today. Take this opportunity to replace the graphic captcha in your project with this high-appearance behavior captcha.

\