python web flask 图片验证码.短信验证码

最新推荐文章于 2024-04-21 13:10:30 发布
最新推荐文章于 2024-04-21 13:10:30 发布
阅读量767 收藏 6
点赞数
文章标签： python flask redis
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48082548/article/details/120737528
版权

文章目录

登录.注册模块

注册

不同的功能会创建不同的蓝图模块,注册这块我们创建的是passport模块,当然都是在module目录里创建如图:
在这里插入图片描述
蓝图创建好了记得在app中注册
在这里插入图片描述

目录分析

在这里插入图片描述

第三方平台(云通讯)的使用

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

第三方随机生成验证码

在这里插入图片描述

图片验证码

注册好后我们先分析后台发送图片验证码的步骤

在这里插入图片描述

后端

import re
import random
import datetime
from info import sr, db
from . import passport_blue
from info import constants
from info.models import User
from info.response_code import RET
from flask import request, abort, jsonify, current_app, make_response,session
from info.utils.captcha.captcha import captcha
from info.libs.yuntongxun.sms import CCP


@passport_blue.route("/imageCodeId", methods=["get"])
def passpost():
    """
    发送图片验证码
    1.接收参数(imageCodeId)
    2.校验参数是否为空
    3.使用第三方辅助文件 生成图片验证码
    4.将验证码保存到redis
    5.返回图片验证码
    :return: 
    """
    # 1.
    # 接收参数(imageCodeId)
    imageCodeId = request.args.get("imageCodeId")

    # 2.
    # 校验参数是否为空
    if not imageCodeId:
        abort(403)
    # 3.
    # 生成图片验证码
    img_name, img_captcha, img = captcha.generate_captcha()

    # 4.
    # 将验证码保存到redis,并设置有效时长
    sr.set("ImgCode:" + imageCodeId, img_captcha)
    print(img_captcha)
    # 5.
    # 返回图片验证码
    res_img = make_response(img)
    res_img.headers["Content-Type"] = "img/jpg"
    return res_img

前端js

生成uuid:
function generateUUID() {
    var d = new Date().getTime();
    if(window.performance && typeof window.performance.now === "function"){
        d += performance.now(); //use high-precision timer if available
    }
    var uuid = 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = (d + Math.random()*16)%16 | 0;
        d = Math.floor(d/16);
        return (c=='x' ? r : (r&0x3|0x8)).toString(16);
    });
    return uuid;
}

在这里插入图片描述
代码:

var imageCodeId = ""

// TODO 生成一个图片验证码的编号，并设置页面中图片验证码img标签的src属性
function generateImageCode() {
    imageCodeId=generateUUID()
    var url= "/passport/imageCodeId?imageCodeId="+imageCodeId 
    $(".get_pic_code").attr("src",url)
}

注意

在这里插入图片描述

短信验证码

发送短信验证码js

在这里插入图片描述
js源码:

function sendSMSCode() {
    // 校验参数，保证输入框有数据填写
    $(".get_code").removeAttr("onclick");
    var mobile = $("#register_mobile").val();
    if (!mobile) {
        $("#register-mobile-err").html("请填写正确的手机号！");
        $("#register-mobile-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }
    var imageCode = $("#imagecode").val();
    if (!imageCode) {
        $("#image-code-err").html("请填写验证码！");
        $("#image-code-err").show();
        $(".get_code").attr("onclick", "sendSMSCode();");
        return;
    }

    var params = {
        'mobile':mobile,
        'image_code':imageCode,
        'image_code_id':imageCodeId
    };

    // TODO 发送短信验证码
    $.ajax({
        url:'/passport/sms_code',   // 请求地址
        type:'post',                // 请求方法
        data:JSON.stringify(params),// 请求参数
        contentType:'application/json',// 数据类型
        success:function (response) {  // 回调函数
            if (response.errno == '0') {
                // 发送短信验证码成功
                alert(response.errmsg);
            } else {
                alert(response.errmsg);
            }
        }
    });
}

接口

在这里插入图片描述

后端

步骤:

	1.获得参数(image_code', mobile, image_code_id, )图片验证码,手机号, 密钥
    2.校验参数
        2.1 所有参数不能为空
        2.2 手机号是否正确
        2.3 图片验证码是否正确
    3.使用 random 生成随机短信验证码
    4.将验证码保存到redis数据库
    5.使用第三方平台发送短信
    6.返回结果

@passport_blue.route("/sms_code", methods=["get", "POST"])
def sms_code():
    """
    1.获得参数(image_code', mobile, image_code_id, )图片验证码,手机号, 密钥
    
    2.校验参数
        2.1 所有参数不能为空
        2.2 手机号是否正确
        2.3 校验图片验证码是否正确
    3.使用 random 生成随机短信验证码
    4.将验证码保存到redis数据库
    5.使用第三方平台发送短信
    6.返回结果
    :return: 
    """
    # 1.
    # 获得参数(image_code', mobile, image_code_id, )图片验证码,手机号, 密钥
    imageCode = request.json.get("image_code")
    mobile = request.json.get("mobile")
    image_code_id = request.json.get("image_code_id")

    # 2.1
    # 校验参数不能为空
    if not all([imageCode, mobile, image_code_id]):
        return jsonify(errno=RET.NODATA, errmsg="参数缺少")

        # 2.2 校验手机号是否正确
    if not re.findall("^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])[0-9]{8}$", mobile):
        return jsonify(errno=RET.DATAERR, errmsg="参数错误")

    # 2.3
    # 校验图片验证码是否正确
    server_img_code = sr.get("ImgCode:" + image_code_id)

    if not server_img_code.strip().lower() == imageCode.strip().lower():
        return jsonify(errno=RET.DATAERR, errmsg="参数错误")


    # 3.
    # 使用 random 生成随机短信验证码
    random_sms = "%04d" % random.randint(0, 9999)
    print(random_sms)

    # 4.
    # 将验证码保存到redis数据库
    try:
        sr.set("SMS_Code:" + mobile, random_sms,ex=constants.IMAGE_CODE_REDIS_EXPIRES)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="数据库保存错误")

    # 5.
    # 发送短信\
 
    ccp = CCP().send_template_sms(mobile, [random_sms, constants.IMAGE_CODE_REDIS_EXPIRES / 60], 1)
    if ccp != 0:
        return jsonify(errno=RET.DATAERR, errmsg="参数错误")
    # 6.
    # 返回结果
    return jsonify(errno=RET.OK, errmsg="发送短信成功")

注册

注册按钮 js:

在这里插入图片描述
代码:

// TODO 注册按钮点击
    $(".register_form_con").submit(function (e) {
        // 阻止默认提交操作
        e.preventDefault()

		// 取到用户输入的内容
        var mobile = $("#register_mobile").val()
        var smscode = $("#smscode").val()
        var password = $("#register_password").val()

		if (!mobile) {
            $("#register-mobile-err").show();
            return;
        }
        if (!smscode) {
            $("#register-sms-code-err").show();
            return;
        }
        if (!password) {
            $("#register-password-err").html("请填写密码!");
            $("#register-password-err").show();
            return;
        }

		if (password.length < 6) {
            $("#register-password-err").html("密码长度不能少于6位");
            $("#register-password-err").show();
            return;
        }


        // 发起注册请求
        var params = {
            'mobile':mobile,
            'smscode':smscode,
            'password':password
        };

        $.ajax({
            url:'/passport/register', // 请求地址
            type:'post', // 请求方法
            data:JSON.stringify(params), // 请求参数
            contentType:'application/json',
            headers:{'X-CSRFToken':getCookie('csrf_token')}, // 在请求头中带上csrf_token
            success:function (response) {
                if (response.errno == '0') {
                    // 注册成功
                    location.reload();
                } else {
                    alert(response.errmsg);
                }
            }
        });

    })
})

接口

在这里插入图片描述

后端

步骤

	1 接收参数 ( mobile,smscode,password)
    2 校验参数
        2.1 参数是否为空
        2.2 手机号是否正确
        2.3 redis存储的短信验证码是为空
        2.4 短信验证码是否一样  
    3 写入用户表
    4 保持状态
    5.返回结果

@passport_blue.route("/register", methods=["POST"])
def register():
    """
    1 接收参数 ( mobile,smscode,password)
    2 校验参数
        2.1 参数是否为空
        2.2 手机号是否正确
        2.3 redis存储的短信验证码是为空
        2.4 短信验证码是否一样
        
    3 写入用户表
    4 保持状态
    5.返回结果
    :return: 
    """


    # 1
    # 接收参数(mobile, smscode, password)
    mobile = request.json.get("mobile")
    smscode = request.json.get("smscode")
    password = request.json.get("password")

    # 2
    # 校验参数
    # 2.1
    # 参数是否为空
    if not all([mobile, smscode, password]):
            return jsonify(errno=RET.PARAMERR, errmsg="参数缺少")

    # 2.2
    # 手机号是否正确
    if not re.findall("^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])[0-9]{8}$", mobile):
            return jsonify(errno=RET.DATAERR, errmsg="参数错误")
    # 2.3
    # redis存储的短信验证码是为空
    try:
        server_smscode=sr.get("SMS_Code:" + mobile)
    except Exception as e:
        current_app.logger.error(e)
        return jsonify(errno=RET.DBERR, errmsg="验证码已失效")
    # 2.4
    # 短信验证码是否一样
    if not server_smscode == smscode.strip():
        return jsonify(errno=RET.DATAERR,errmsg="短信验证码不一致")

    # 3
    # 写入用户表
    user=User()
    user.nick_name=mobile
    user.mobile=mobile
    user.last_login=datetime.datetime.now()
    user.password=password

    try:
           db.session.add(user)
           db.session.commit()
    except Exception as e:
        current_app.logger.error(e)
        db.session.rollback()
        return jsonify(errno=RET.DBERR, errmsg="注册失败")

    # 4
    # 保持状态
    session["user_id"]=user.id
    session["user_mobile"] = user.mobile
    session["user_nick_name"] = user.nick_name
    # 5.
    # 返回结果
    return jsonify(errno=RET.OK,errmsg="注册成功")

登录

注册后我们都有保持登录在session写值
在首页渲染的时候获得session判断是否有值,没值右上角出现登录/注册,有值展示个人信息
在这里插入图片描述
后端:
在index渲染之前做处理所以在index模块
步骤:

@index_blue.route("/")
def index():
    """
    首页
    1.右上登录处理
        1.1 获得session
        1.2 用session在数据库中查找
        1.3 返回结果
    :return: 
    """

    # 获得session
    user_id=session.get("user_id")


    # 用session在数据库中查找
    user=None
    try:
        user = User.query.filter_by(id=user_id).first()
    except Exception as e:
        current_app.logger.error(e)
        abort(404)


    content={
        "user":user
    }
    # 返回结果
    return render_template("news/index.html",content=content)

前端逻辑展示:
在这里插入图片描述

退出登录:

将session的值删掉在重新渲染首页

@passport_blue.route("/logout", methods=["get", "POST"])
def logout():
    """
    退出登录
    1.删除session
    2.返回结果
    :return: 
    """
    # 1.
    # 删除session
    session.pop("user_id",None)
    session.pop("user_mobile", None)
    session.pop("user_nick_name", None)

    # 2.
    # 返回结果
    return jsonify(errno=RET.OK,errmsg="退出成功")

在这里插入图片描述

退出js

function logout() {
    // $.ajax({
    //     url:'/passport/logout',
    //     type:'get'
    // });

    $.get('/passport/logout', function (response) {
        if (response.errno == '0') {
            // 退出登录成功
            location.reload();
        } else {
            alert(response.errmsg);
        }
    })
}
笑得好虚伪
关注
  • 0
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
165. Python语言 的 Flask框架项目 之 验证码(图形验证码) 第二章：图形验证码后端逻辑
sinat_38761218的博客
03-03 193
短信验证码本章主题关键词总结小便条 本章主题    关键词       总结小便条 本篇文章主要讲了以下几点内容：      本章回顾暂时就到这了，如果还有点晕，那就把文章里所有引用的案例代码再敲几遍吧。拜拜~ ...
flask实现登陆(验证码)的demo
04-11
使用flask-login实现用户的管理，并加入验证码验证
python web验证码_python web框架Flask——手机短信验证码
weixin_39756273的博客
12-22 239
下列代码都是以自己的项目实例讲述的，相关的文本内容很少，主要说明全在代码注释中。我是使用阿里云云通信的短信服务，第一次使用会摸不着头绪，这里我们需要做些准备工作：1、登陆自己的账号进入阿里云官网，没有账号的朋友们自行注册2、在导航栏上搜索“短信服务”，没有添加的话应该会有“免费开通”按钮，再进入管理控制台(我们需要添加这个短信服务板块，这样控制台会有短信服务这个模块)，管理控制台的页面：3、添加a...
使用 Flask 实现验证码验证
最新发布
ttocr456的博客
04-21 448
后端应用程序将验证用户输入的验证码是否与生成的验证码相匹配，并返回验证结果。在本文中，我们将使用 Python 的 Flask 框架来实现一个简单的验证码验证功能。我们将创建一个包含后端 Flask 应用程序和前端 HTML 页面的示例，演示如何生成验证码并验证用户输入的验证码是否正确。return jsonify({'success': False, 'message': '验证码验证失败，请重新输入！# 获取表单中提交的验证码值和用户输入的验证码值。# 验证用户输入的验证码是否与生成的验证码相匹配。
使用Python的Flask框架开发验证码登录功能
这家伙很懒，什么都没有留下
10-25 992
在本文中，我们介绍了如何使用Python的Flask框架开发一个简单的验证码登录功能。我们实现了生成验证码、处理用户输入、验证验证码以及安全的用户认证等方面的技术深度。通过引入JavaScript函数来更新验证码图片，我们提高了用户体验。这个简单的示例可以作为开发更复杂Web应用程序中验证码登录功能的基础。
基于Python+Flask实现一个简易网页验证码登录系统案例
子午的博客
09-21 978
通过上面的代码，我们创建了一个简单的网站验证码登录系统。用户需要输入与图片上显示的验证码匹配的文本来验证自己是人类。这不仅提高了安全性，而且能够有效地阻止恶意机器人。尽管此示例只是基础版本，但您可以在此基础上添加更多的安全性措施，例如使用更复杂的验证码、添加限制登录尝试次数的功能或使用其他验证方法。希望本文能帮助您了解如何使用Python和Flask来创建验证码登录系统。在实际开发中，为了提供更好的用户体验和安全性，建议进一步完善和增强此系统。
Python - Flask 图片验证码和邮箱验证码的后端实现
LinTa0的博客
10-04 1249
Python - Flask 图片验证码和邮箱验证码的后端实现
164. Python语言 的 Flask框架项目 之 验证码(图形验证码) 第一章：图形验证码逻辑分析
sinat_38761218的博客
03-01 87
图形验证码逻辑分析本章主题关键词图形验证码逻辑分析总结小便条 本章主题    关键词    图形验证码逻辑分析    总结小便条 本篇文章主要讲了以下几点内容：      本章回顾暂时就到这了，如果还有点晕，那就把文章里所有引用的案例代码再敲几遍吧。拜拜~ ...
python web框架Flask实现图形验证码及验证码的动态刷新实例
01-20
自制图形验证码 这里所说的图形验证码都是自制的图形，通过画布、画笔、画笔字体的颜色绘制而成的。将验证码封装成一个类比较好管理，代码里有绝对详细的注释，当然大家可以直接复制。 里面涉及的字体都是从系统电脑...
Python + Flask 实现简单的验证码系统
09-18
本文将介绍如何使用Python和Flask构建一个简单的验证码系统。验证码在现代互联网中扮演着重要的角色，用于防止自动化程序的恶意操作，如机器人注册或垃圾邮件发送。虽然有多种复杂的验证码形式，但本文将专注于字符...
Flask项目中实现短信验证码和邮箱验证码功能
01-20
Flask是一个用Python编写的Web应用程序框架，Flask是python的web框架，最大的特征是轻便，让开发者自由灵活的兼容要开发的feature。 它由 Armin Ronacher 开发，他领导一个名为Pocco的国际Python爱好者团队。 ...
基于Python的图形验证码.zip
02-04
9. **Flask或Django框架**：如果项目包含Web服务端，可能会使用Python的Flask或Django框架，它们提供了构建Web应用的简便途径。 10. **数据库交互**：在某些情况下，生成的验证码可能会存储在数据库中，以便验证时...
Flask使用PIL实现登陆注册验证码
yangxin30520的博客
09-11 731
一、后端 1.创建一个captcha.py文件，代码可以直接用下面的 import random import string # Image:一个画布 # ImageDraw:一个画笔 # ImageFont:画笔的字体 # pip install pillow from PIL import Image, ImageDraw, ImageFont class Captcha(obje...
flask学习之4：图片验证码
LCY133的博客
12-15 702
不多说，先盗图： 图形验证码，请求图形验证码，接收请求，提取参数，校验参数 生成图形验证码 因为图形验证码会更新很快，所以要存储图形验证码最好的选择是在redis数据库中存储 作为该图形验证码的唯一ID：UUID （UUID是一个很长的字符串） 或者是时间戳加随机数 Redis里有 几种数据类型： 哈希 ： 字符串 涉及图形验证码部分的内容的实现也是通过一个单独的蓝图进行实现的 蓝图文件名字：verify_code.py 在蓝图中定义相关的功能，之后要在蓝图包的init文件内导入该文件， 在前端关于验证码
运用flask框架发送短信验证码的流程及具体代码
m0_62461326的博客
06-06 1323
flask后端发送短信验证码的流程及具体代码
flask网站加入验证码功能的几个问题
qq_39666638的博客
08-22 2321
今天一上午的主要工作是了解了几种验证码实现的方法，由于网站后端我选择的是flask，所以选择了以路由为基础的验证码发送机制。在这其中遇到了许多问题，导致最终耗时一个白天才最终实现了该功能，做个记录，以便参考。 一 验证码机制的选择 验证码生成和发送机制的选择采用了该博主的方法。将验证码由一个特定路由（code）下的视图函数通过response返回给客户端。在模板中仅需要加入一个img标签并将s
Flask图片验证码注册功能
06-08 1291
注册又包含一些小功能：手机号，验证码 图片验证码流程： 让浏览器在发送一个验证码请求的时候，带上一个随机验证名称，然后将这个随机名称和验证码关联起来，将验证码文字保存到redis中（可以设置过期时间），然后当用户输入验证码后，就使用输入的内容和保存的进行比较，最后验证是否正确 如果验证整个却，就开始手机号发送验证码流程。 图片验证码生成流程： UUID是通用唯一...
在flask中使用验证码
人在江湖
03-06 9020
前景 在学习flask web 开发的过程中，终于到了登录注册的界面，之前用PIL制作了自己的验证码，现在终于用上了，在搜集各种资料的情况下。终于初步完成了flask的验证码环节 验证码代码 from PIL import Image, ImageFont, ImageDraw, ImageFilter import random def validate_picture(): ...
python实现滑动图片验证码
08-04
最后，我们还可以使用Flask库（一个Python web框架）来搭建一个简单的网页应用来展示滑动图片验证码，并实现滑动验证码的功能。 综上所述，通过使用Pillow库加载验证码图片，使用OpenCV库获取滑块位置，使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值