captcha.py

import os import io import string import random from PIL import Image from PIL import ImageDraw from PIL import ImageFont from django.conf import settings class Captcha: CAPTCHA_THRESHOLD = 3 # Threshold for entering the verification code CAPTCHA_EXPIRED = 60 x 5 # Expiration time, Second CAPTCHA_SIZE = 4 # length CAPTCHA_ALLOWED_CHARS = string.ascii_lowercase # Available characters def __init__(self): def gen_captcha_code(self): Return '.join([random.choice(self.captcha_allowed_chars) for _ in range(self.captcha_size)]) def gen_captcha(self): """ Generate graph verification code """ font_size = 30 space = 10 line_density = 10 # interference line density point_density = 1000 # Noise density width = (font_size + space) * self.CAPTCHA_SIZE + space height = font_size + space * 2 code = self.gen_captcha_code() random_color = lambda: random.randint(0, 200), random.randint(0, 200), random.randint(0, 200) random_light_color = lambda: random.randint(200, 255), random.randint(200, 255), random.randint(200, 255) random_point = lambda: Random.randint (0, width), random.randint(0, height) # create canvas img = image.new ('RGB', (width, height), Random_light_color ()) draw = ImageDraw.Draw(img) # noise for _ in range(point_density): Draw. Point (random_point(), fill=random_color()) # Draw.line ([random_point(), random_point()], fill=random_color()) # 'administrator/static/administrator/fonts/Vera.ttf') font = ImageFont.truetype(font_path, font_size) for i in range(settings.CAPTCHA_SIZE): draw.text(((font_size + space) * i + space, space / 2), code[i], font=font, Img = img.filter(imagefilter.blur) buf = io.bytesio () img.save(buf, 'gif') return ''.join(code), buf.getvalue()Copy the code

Login method

def login(): # logic ignores captCHA, Img = gen_captcha() # transfer binary data to the front end data={'captcha': base64encode (img).decode(' utF-8 ')} return jsonResponse(data)Copy the code

The front-end vue

<div class="layui-form-item" id="captcha_box" v-if="showCaptcha" v-cloak> <div class="layui-row"> <div class="layui-col-xs7"> <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" For =" lay-user-login-vercode "></label> <input type="text" name="vercode" placeholder=" placeholder "class=" layu-input" v-model="captcha" @keyup.enter="login" /> </div> <div class="layui-col-xs5"> <div style="margin-left: 10px"> <img :src="captcha_src" class="layadmin-user-login-codeimg" @click="login('code')" /> </div> </div> </div> </div>  login: function (str) { $.ajax({ url: login_url, type: 'POST', dataType: 'json', data: { adminname: this.username, password: this.password, captcha: this.captcha, keep_logined: this.remember }, success: function (res) { if (! res.code) { localStorage.setItem('login-id', res.data.admin_id); localStorage.setItem('login-user', res.data.nickname); localStorage.setItem('login-safety', parseInt(res.data.safety)); localStorage.setItem('login-method', login_method); window.location.href = 'index.html'; } else { if (res.data.captcha) { vue.captcha_src = 'data:image/gif; base64,' + res.data.captcha; vue.showCaptcha = true; if (str ! = = 'code') layer. MSG (' error: '+ res. MSG, {2} icon:); } else {layer. MSG (' error: '+ res. MSG, {icon: 2}); }}}}); },Copy the code