preface

The function to obtain an SMS verification code on an item verifies a graphic verification code before obtaining the verification code. Customers and our feedback graphics verification code often enter wrong, poor experience.

So, I came up with the idea of sliding graphic captcha. I looked it up on the Internet and found an open source one on Gitee, which felt good and was integrated into our project. The customer sent us a 👍🏻 emoji.

The interaction process

The front end

Front-end implementation example code, currently supported

  • android
  • flutter
  • HTML
  • The ios
  • Uni – app
  • vue

The background

  • The introduction ofjar 包
<dependency>
   <groupId>com.github.anji-plus</groupId>
   <artifactId>captcha</artifactId>
   <version>1.1.8</version>
</dependency>
Copy the code
  • Modify theapplication.properties, custom base map and watermark, start after the front end can request the interface
Slide # validation, reproduction path, no configuration will use the default picture # captcha. The captchaOriginalPath. Jigsaw = / app/product/dist/captchabg slide # validation, reproduction path, No configuration will use the default picture # captcha. The captchaOriginalPath. PIC - click = / app/product/dist/captchabg # using Unicode characters unity, assurance procedures by @ value is read into Chinese, Through this online conversion turn Unicode # https://tool.chinaz.com/tools/unicode.aspx Chinese watermark text and the bottom right hand corner (my watermark) captcha. Water. Mark = time running # watermark font (be) and the bottom right hand corner Captcha.water. font=宋体 # captcha.font. Type =宋体 # allowed error offset (default 5 pixels) captcha.slip.offset=5 #aes.key(16 bits, #captcha.aes.key=XwKsGlMcdPMEhR1BCopy the code

  • Very important. For distributed multi-instance deployment applications, the application must implement CaptchaCacheService itself, such as Redis or memcache

  • Back-end secondary verification interface

Take login as an example. When a user submits a form to the background, he or she will carry a parameter related to a verification code. The backend login interface login, first call CaptchaService. Do the second check verification.

@Autowired
@Lazy
private CaptchaService captchaService;

@PostMapping("/login")
public ResponseModel get(@RequestBody CaptchaVO captchaVO) {
    ResponseModel response = captchaService.verification(captchaVO);
    if(response.isSuccess() == false) {// The verification code fails, and a message is returned to inform the front-end
        //repCode 0000 has no exception, indicating success
        //repCode 9999 server has an internal exception
        // the repCode 0011 parameter cannot be null
        RepCode 6110 verification code is invalid. Please obtain it again
        RepCode 6111 failed to authenticate
        RepCode 6112 failed to obtain the verification code, please contact the administrator
    }
    return response;
}
Copy the code
  • Interface for obtaining the verification code: http://:/captcha/get

Request parameters:

{
	"captchaType": "blockPuzzle"  // Verification code type clickWord
}
Copy the code

Response parameters:

{
    "repCode": "0000"."repData": {
        "originalImageBase64": "Base64 reproduction"."point": {    // By default, this coordinate is not returned. The error range is allowed
            "x": 205."y": 5
        },
        "jigsawImageBase64": "Slider base64"."token": "71dd26999e314f9abb0c635336976635".// Unique identifier of a check
        "result": false."opAdmin": false
    },
    "success": true."error": false
}
Copy the code
  • Verification code Interface Interface: http://:/captcha/check

Request parameters:

{
	 "captchaType": "blockPuzzle"."pointJson": "QxIVdlJoWUi04iM+65hTow==".// AES encrypts coordinate information
	 "token": "71dd26999e314f9abb0c635336976635"  //get The token returned by the request
}
Copy the code

Response parameters:

{
    "repCode": "0000"."repData": {
        "captchaType": "blockPuzzle"."token": "71dd26999e314f9abb0c635336976635"."result": true."opAdmin": false
    },
    "success": true."error": false
}
Copy the code

The source address

Gitee.com/anji-plus/c…