遗留的问题

• 1、整合验证码的接口
• 2、渲染验证码
• 3、实现验证码校验的功能
• 4、验证码校验通过之后，再校验登录功能

验证码框架怎么使用

安装：

pip install zdppy_captcha

使用示例：

import zdppy_api as api
import zdppy_captcha
import zdppy_cache

cache = zdppy_cache.Cache("tmp/.captcha_cache")
app = api.Api(
    routes=[
        *zdppy_captcha.zdppy_api.captcha(api, cache),
    ]
)

if __name__ == '__main__':
    import zdppy_uvicorn

    zdppy_uvicorn.run(app, host="0.0.0.0", port=8888)

最核心的代码：

app = api.Api(
    routes=[
        *zdppy_captcha.zdppy_api.captcha(api, cache),
    ]
)

当前项目依赖

zdppy-amauth
zdppy-amcrud
zdppy-cache
zdppy-captcha==0.1.4
zdppy-env
zdppy-jwt
zdppy-log
zdppy-mauth
zdppy-mcrud
zdppy-mysql
zdppy-password
zdppy-rand
zdppy-req
zdppy-uvicorn
zdppy_api
zdppy_snowflake

将接口整合到项目中

routes/captcha.py

import zdppy_captcha
import zdppy_api as api
from zdppy_cache import Cache

cache = Cache("./tmp/.captcha")


def get_captcha_routes():
    """获取验证码相关的路由"""
    return zdppy_captcha.zdppy_api.captcha(api, cache)

routes/init.py

import zdppy_amauth as amauth

from .file import get_file_routes
from .doc import get_doc_routes
from .captcha import get_captcha_routes


def get_routes(db):
    """初始化路由"""
    routes = []
    routes.extend(get_file_routes(db))  # 文件相关的路由
    routes.extend(get_doc_routes())  # 文档相关的路由
    routes.extend(amauth.routers.get_all_routers(db))  # 权限相关的路由
    routes.extend(get_captcha_routes())  # 验证码相关的路由
    return routes

渲染验证码

当前的登录界面

获取验证码信息

login/api.js

import axios from "axios";

export default {
    getCaptcha: () => {
        axios({
            method: "get",
            url: `http://127.0.0.1:18888/zdppy_captcha`,
        }).then(resp => {
            console.log("获取验证码成功", resp.data)
        })
    }
}

index.vue

onMounted(() => {
  api.getCaptcha()
})

优化获取验证码图片的方法

api.js

import axios from "axios";

export default {
    // 获取验证码图片信息
    getCaptcha: async () => {
        let key = ""
        let img = ""
        await axios({
            method: "get",
            url: `http://127.0.0.1:18888/zdppy_captcha`,
        }).then(resp => {
            if (resp.data && resp.data.data && resp.data.status && resp.data.code === 10000) {
                key = resp.data.data.key
                img = resp.data.data.img
            }
        })
        return {key, img}
    }
}

index.vue

const captchaKey = ref() // 验证码的key
const captchaImg = ref() // 验证码图片

const formState = reactive({
  username: '',
  password: '',
  captcha: '',
});

// 点击登录
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)
  })

};

onMounted(async () => {
  const captcha = await api.getCaptcha()
  console.log("验证码信息：", captcha)
})

渲染验证码图片

获取地址：

onMounted(async () => {
  const captcha = await api.getCaptcha()
  console.log("验证码信息：", captcha)
  captchaKey.value = captcha.key
  captchaImg.value = captcha.img
})

渲染图片：

<img :src=" 'data:image/png;base64,' + captchaImg"
                 style="width: 100%; height: 50px; margin-top: 10px">

成功渲染验证码。

要实现的

• 1、点击切换验证码
• 2、1分钟后自动切换验证码