This paper mainly involves the related functions of graphic verification code, including graphic verification code acquisition, verification code text storage, verification code generation and so on.

Graphic CAPTCHA interface design and definition

Captcha access interface design

UUID, as the path parameter, uniquely identifies the user to which the verification code belongs

The new application

We use a separate app to handle the logic of the verification codes, so we need to create a new app called Verifications. After the app is built, open the view file and write a view class of the verification codes

Class ImageCodeView(View): """ def get(self, request, uuid): """ "" :param request: object :param uuid: Unique identification of the user to which the graphic verification code belongs :return: image/ JPG """ pass

And then configure the route

Project routing configuration:

If (” “, include(‘ apps.verils.urls ‘)), just show your applications.verils.urls

path('image_codes/``uuid:uuid``/', views.ImageCodeView.as_view()),

Preparations for verification code processing

  • Prepare the CAPTCHA extension package

Please put the CAPTCHA extension package into the lib directory of Verifications, and then you need to install the image processing library of Python, Pip Install Pillow

  • Prepare the Redis database

Redis is used to store the numbers in the image CAPTCHA, which is then used for verification

"Verify_code ": {# verify_code" BACKEND":" django_redis.cache.rediscache ", "LOCATION": "redis:// ", "OPTIONS": { "CLIENT_CLASS": "django_redis.client.DefaultClient", } },
  • Graphical verification code back-end logic implementation
Def get(self, request, uuid): """ "" # generate image CAPTCHA.GENERATE_CAPTCHA () # save image CAPTCHA.GENERATE_CAPTCHA () # alias for the configured Redis database Redis_conn = get_redis_connection('verify_code') # use the object connected to redis to manipulate the data store to redis # redis_conn. Set ('key'), 'value') # Because there is no expiry date # Graphic CAPTCHA must have an expiry date: Redis_conn. Setex ('img_%s' % uuid, 300, text) # Redis_conn. Setex ('img_%s' % uuid, 300, text) image/jpg return http.HttpResponse(image, content_type='image/jpg')

Graphical CAPTCHA front-end logic

  • VUE to achieve graphic verification code display


Mounted (){// generate graphic verification code this.generate_image_code(); }, methods: {// Generate graphic verification code generate_image_code(){// Generate UUID. GenerateUUID () : encapsulated in common.js file, need to preintroduce this. uuID = generateUUID(); This.image_code_url = "/image_codes/" + this.uuid + "/"; },... }


<img type="text" name="image_code" id="pic_code" class="msg_input"> <img : SRC ="image_code_url" @click="generate_image_code" Alt ="pic_code" class="pic_code"> <span class="error_tip"> </span>  </li>

3. Graphical verification code display and storage effect

  • VUE implements graphic verification code verification


<input type="text" v-model="image_code" @blur="check_image_code" @blur="check_image_code" Id ="pic_code" class="msg_input"> <img: SRC ="image_code_url" @click="generate_image_code" Alt ="pic_code" class="pic_code"> <span class="error_tip" v-show="error_image_code">[[ error_image_code_message ]]</span> </li>


check_image_code(){ if(! This.image_code) {this.error_image_code_message = 'Please fill in the image verification code '; this.error_image_code = true; } else { this.error_image_code = false; }},

3. Check effect of graphic verification code

That’s all for the CAPTCHA part

The next section teases: User login module