zdppy+vue3+onlyoffice开发文档管理系统实战 20240813登录功能中Python生成验证码校验的研究

news2024/11/26 0:48:17

遗留的问题

1、登录功能

5、设计登录的接口
6、前后端联调，实现登录功能
7、要记录登录的Token和用户名，跳转到首页
2、注册功能
3、用户管理
4、角色管理
5、权限管理
6、分享功能

tb_user拆成基本信息和详细信息两张表。

6、前后端联调，实现登录功能

修改登录的方法：

// 点击登录
const onFinish = data => {
  console.log('Success:', data);
  axios({
    method: "post",
    url: `/api/auth/user/login`,
    data: {
      username: data.username,
      password: data.password,
    }
  }).then(resp => {
    console.log("登录成功", resp.data)
  })

};

填入正确的账号和密码进行测试：
在这里插入图片描述

实现验证码的功能

如果正常情况下，这里的登录功能已经很完善了。

但是，因为我们要加验证码这个功能，而验证码这个功能之前是没有的，所以我们需要重新设计。

想法1

后端返回验证码的具体值，前端通过JS生成验证码图片。

不安全，浏览器已经知道真实的验证码了，就已经不安全了。

7、要记录登录的Token和用户名，跳转到首页
2、注册功能
3、用户管理

4、角色管理
5、权限管理
6、分享功能

zdppy_captcha

python用于生成图片，声音等验证码的底层框架

安装

pip install zdppy-captcha

使用教程

显示图片验证码

# 生成图片验证码
import random
from zdppy_captcha.image import ImageCaptcha

# 生成随机字符串
code = random.sample('abcdefghijklmnopqrstuvwxyz1234567890', 4)  # 随机选取4个不重复字符串，返回一个列表

# 生成图片验证码对象
image = ImageCaptcha()

# 第一种使用方式：生成图片验证码
im = image.generate_image(code)
im.show()  # 可以直接展示图片

保存验证码图片

# 生成图片验证码
import random
from zdppy_captcha.image import ImageCaptcha

# 生成随机字符串
code = random.sample('abcdefghijklmnopqrstuvwxyz1234567890', 4)  # 随机选取4个不重复字符串，返回一个列表

# 生成图片验证码对象
image = ImageCaptcha()

# 第二种使用方式：生成图片验证码并保存
image.write(code, 'zdppy_captcha.jpg')

将验证码转换为bytesio

# 生成图片验证码
import random
from zdppy_captcha.image import ImageCaptcha

# 生成随机字符串
code = random.sample('abcdefghijklmnopqrstuvwxyz1234567890', 4)  # 随机选取4个不重复字符串，返回一个列表

# 生成图片验证码对象
image = ImageCaptcha()

# 第三种使用方式：生成图片验证码BytesIO
data = image.generate(code)
print(data, type(data))