Flask图片验证码注册功能

客官°小女子只卖身不卖艺 2022-01-21 05:17 305阅读 0赞

注册又包含一些小功能：手机号，验证码

图片验证码流程：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70][]

让浏览器在发送一个验证码请求的时候，带上一个随机验证名称，然后将这个随机名称和验证码关联起来，将验证码文字保存到redis中（可以设置过期时间），然后当用户输入验证码后，就使用输入的内容和保存的进行比较，最后验证是否正确

如果验证整个却，就开始手机号发送验证码流程。

图片验证码生成流程：

UUID 是通用唯一识别码：让图片验证码名字为这个

然后从前端代码中找到img标签，然后设置点击事件，点一次，换一次图片验证码。![20190608115624164.png][]

点击的时候，获取图片的src属性，然后设置一个onclick事件（是一个函数，在main.js中），然后设置一个请求url=“imag——code？imagecodeid=”+UUid（使用generateUUID函数自动生成,inageuuid = generateUUID()），然后获取到img标签（$(".get\_pic\_code").attr("src", url)) (attr和prop一样)。最后清除缓存，重新加载，

![20190608115624149.png][]

最后在后端设置相应的视图函数：（接收请求，生成图片验证码）

怎么生成图片验证码：（使用生成验证码函数）

生成一个工具包：utils，放在info中，暴力存放

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70]: /images/20220121/ab75e76d4c25426b8fbeabf74b238bf2.png
[20190608115624164.png]: /images/20220121/38fd4b229d9445edafeab00bb418c698.png
[20190608115624149.png]: /images/20220121/9039ddbddf3f4702abdb23649cf2842a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc4NjUzMA_size_16_color_FFFFFF_t_70 1]: /images/20220121/1b56030fada9412aad4bce40b82e98f0.png