Project Url: anji-plus/captcha
Introduction: 行为验证码(滑动拼图、点选文字),前后端(java)交互,包含 h5/Android/IOS/flutter/uni-app 的源码和实现
More: Author   ReportBugs   OfficialWebsite   

LicenseTotal Lines

AjPlus Captcha

Stargazers over time Stargazers over time

EN docCN doc

1. Online Demo

  1.1 Have a try

  1.2 Document

  1.3 Wechat/H5 demo(depends on uni-app)

   see also gitee

Wechat  h5     Wechat Demo            

2. Design Details

  2.1 UI Component

   support Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php。

blockPuzzle clickWord
blockPuzzle clickWord
1-1 1-2
concept desc
Captcha Type blockPuzzle, clickWord
Check user action: drag block or click workds,then check if it was human did
Verify bind user action with backend service. call captchaService.verification in backend service to prevent invalid access ,for example,directly call it

  2.3 Main Features

CAPTCHA stands for Completely Automated Public Turing test to tell Computers and Humans Apart. CAPTCHA determines whether the user is real or a spam robot. CAPTCHAs stretch or manipulate letters and numbers, and rely on human ability to determine which symbols they are.

Ajplus Captcha , an open source toolset for users,its main Features are as follows:

  • Easy to integrate ui Component in your apps,support varies frontend UI,
  • Support Integrate with Android、iOS、Futter、Uni-App、ReactNative、Vue、Angular、Html、Php
  • No dependencies lib in core source,Easy to include in your backend service
  • Core api is simple and Open to Extend,all instance initialized by JAVA SPI,Easy to add your custom Implement to form a new Captcha type。
  • Support security feature

3. How to Integrate

①用户访问应用页面,请求显示行为验证码 ②用户按照提示要求完成验证码拼图/点击 ③用户提交表单,前端将第二步的输出一同提交到后台 ④验证数据随表单提交到后台后,后台需要调用 captchaService.verification 做二次校验。 ⑤第 4 步返回校验通过/失败到产品应用后端,再返回到前端。如下图所示。 Sequence Diagram

4. SourceCode Structure


5. Dev & Run

  • start backend service import source code into Eclipse or Intellij, start StartApplication class in package service/springboot。online images
  • start frontend ui open source files in view/vue with your IDE like Visual Code,

      npm install
      npm run dev
      DONE  Compiled successfully in 29587ms                       12:06:38
      I  Your application is running here: http://localhost:8081

6. Work Plan


7. Connect Us

[Wechat group] (

Have a try & enjoy it !!! ☺

About Me
GitHub: Trinea
Facebook: Dev Tools