说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家!

接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/85706012

目录

一丶图片验证码前端编写

二丶短信验证码后端编写

三丶测试向后端接口发送短信验证码


一丶图片验证码前端编写

1.当用户进入到注册页后,页面进行刷新,所以在static前端静态资源register.js中定义一个generateImageCode函数,当页面加载完后,形成图片验证码的后端地址, 设置到页面中,让浏览请求验证码图片,同理在register.html中onclick点击验证码图片时,也要触发generateImageCode函数

register.html

<div class="input-group-addon image-code" onclick="generateImageCode();"><img src=""></div>

register.js 

$(document).ready(function() {
    generateImageCode();}

 2.生成图片验证码编号两种方式:第一种是时间轴;第二种是UUID全局唯一标识符,这里我们使用UUID

  • step1 在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;
}
  • step2 在generateImageCode函数中调用generateUUID,将生成的UUID赋值给imageCodeId变量,记得先使用var在函数外声明该变量
function generateImageCode() {
    // 生成图片验证码编号
    imageCodeId = generateUUID();
}

3.拼接二维码图片的url地址,设置register.html中图片二维码div标签class=image_code下的img标签的src地址为拼接后的url,也就是二维码图片的链接地址

 var url = "/api/v1.0/image_codes/" + imageCodeId;
    $(".image-code img").attr("src", url);

4.运行程序,清除浏览器缓存,输入http://127.0.0.1:5000/register.html后,查看注册页面二维码生成是否成功

5.在后端redis数据库中成功生成image_code_uuid的key了

 

6.效果图,鼠标连续点击图片验证码,请注意验证码

二丶短信验证码后端编写

1.发送短信服务介绍,这里使用的是容联云,云通讯

  • step1 需要在官网https://www.yuntongxun.com/进行注册,注册时会通过打电话形式告诉你验证码,注册成功后会赠送8元测试费用,如下图

  • step2 然后选择测试平台,添加测试手机号,最多三个,验证成功才能添加上

  • step3 进入开发文档---Rest API----短信----短信发送接口,具体文档说明请到官网自寻查看

  • step4 我们直接去下载官方给开发人员封装好的工具SDK,找到Demo示例,然后在文章上方点击Demo下载,找到python语言对应的SDK进行下载即可

  • step5 解压后的目录文件如下,请查看README.txt等说明文件,DEMO问案列,这里我们只需要将SDK文件拷贝到项目中的libs目录下,并命名为yuntongxun,然后再将DEMO文件夹中的SendTemplateSMS.py文件拷贝到yuntongxun目录下

2.封装发送短信辅助工具

  • step1 在libs以及云通讯目录下创建init文件,使其变成python的包

  • step2 在SendTemplateSMS.py文件中创建一个CCP的类,用于封装发送短信的辅助类,目的是在我们调用sendTemplateSMS方法的时候,只初始化一次REST SDK,使用python单例达到不管创建多少个对象,都只初始化一次

  • step3 将云通讯开发者主账号中的ACCOUNT SID和AUTH TOKEN以及AppID,复制到代码中

  • step4 编写测试脚本,内容分为验证码9527,有效期5分钟,使用测试模板1

  • step5 运行sendTemplateSMS程序,最下面的statusCode为000000,代表短信发送成功,在官网短信接口有详细说明

  • step6 此时手机便收到了短信

  • step7 修改代码,不需要使用官方的代码将result字典数据进行遍历打印,而是只获取状态statusCode进行判断,如果为000000代表发送成功返回0,否则发送失败返回-1

查看运行结果,验证逻辑没有问题

  • step8 将sendTemplateSMS重命名为sendSMS,为了后面使用方便

3.定义获取短信接口

  • step1 在接口文件verify_code中定义一个get_sms_code的视图函数
def get_sms_code()
  • step2 构建路由规则,同理与构建图片验证码一样,使用restful风格,并且需要有一个短信验证码的编码,以手机进行编号,之前在分析图片验证码时,已经说过发送短信验证码时需携带图片验证码的文本内容以及图片验证码的编号,所以路由如下
# GET /api/v1.0/sms_codes/<mobile>?image_code=xxxx&image_code_id=xxxx
  • step3 获取image_code以及image_code_id
image_code = request.args.get("image_code")
image_code_id = request.args.get("image_code_id")
  • step4 校验参数
# 校验参数
if not all([image_code, image_code_id]):
    # 参数不完整返回对应错误
    return jsonify(errno=RET.PARAMERR, errmsg="参数不完整")
  • step5 业务逻辑处理,从redis数据库取出验证码与用户输入的验证码进行校验,期间需要对验证码是否存在进行判断

  • step6 接下来判断手机号是否存在

  • step7 随机生成6位数验证码(使用字符串格式化的方式来生成,从0到999999,当不足6位时,以0做填充)
sms_code = "%06d" % random.randint(0, 999999)
  • step8 在redis数据库中保存真实的短信验证码

  • step9 发送短信

  • step10 异常说明
  • 放在try与except中的代码越少越好,会影响程序执行效率

三丶测试向后端接口发送短信验证码

  • step1 打开Postman测试工具,发送接口路由127.0.0.1:5000/api/v1.0/sms_codes/180xxxxxx96?image_code&image_code_id

  • step2 运行项目

  • step4 回到Postman工具,取消参数,什么都不传的情况下,出现如下错误信息,就是我们在程序中定义的错误信息

获取redis数据库中图片验证码的文本值与注册页图片二维码的值一样

  • step6 当过了180s后也就是我们在constants.py中设置的图片验证码有效期,在Postman工具中发送地址,提示 我们定义的错误图片验证码失效,在程序中的逻辑为无法在redis数据库中获取image_code_id键的值,或者说不存在此键,返回结果为None

  • step7 刷新注册页面,获取新的验证码,在Postman工具中向错误号码发送验证码,或者说是未在云通讯测试平台关联的号码发送验证码,则出现以下错误提示,这个提示就是我们在接口文件中写的res不等于0的时候,返回错误的json格式的错误信息

  • step8 刷新http://127.0.0.1:5000/register.html,将最新的验证码存储到redis数据库,在Postman工具中向正确地址发送正确号码,返回的响应数据为发送成功,如下图所示

注册页界面

redis数据库中的图片验证码值

Postman响应数据

Flask项目之手机端租房网站的实战开发(五)的更多相关文章

  1. Flask项目之手机端租房网站的实战开发(三)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  2. Flask项目之手机端租房网站的实战开发(一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 一丶项目介绍 产品:关于手机移动端的租房网站 角色:在这个产品中用户包括房东与房客 功能:房东可以在这个平台发布自己的房屋,房客可 ...

  3. Flask项目之手机端租房网站的实战开发(二)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  4. Flask项目之手机端租房网站的实战开发(十四)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  5. Flask项目之手机端租房网站的实战开发(六)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  6. Flask项目之手机端租房网站的实战开发(十一)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  7. Flask项目之手机端租房网站的实战开发(十)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  8. Flask项目之手机端租房网站的实战开发(九)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  9. Flask项目之手机端租房网站的实战开发(八)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

  10. Flask项目之手机端租房网站的实战开发(四)

    说明:该篇博客是博主一字一码编写的,实属不易,请尊重原创,谢谢大家! 接着上一篇博客继续往下写 :https://blog.csdn.net/qq_41782425/article/details/8 ...

随机推荐

  1. AIX 系统补丁升级步骤

    AIX 系统补丁升级步骤   1.升级之前建议备份 rootvg (推荐) # smit mksysb   2.检查系统版本号 # oslevel -r   3.找到补丁光盘或者下载补丁,上传到服务器 ...

  2. CentOS 源设置

    安装完CentOS后,系统默认的源可能有限满,这时我们需要添加国内比较好的源. 一.国内比较好的源https://opsx.alibaba.com/mirror                  #阿 ...

  3. 学习推荐《Python神经网络编程》中文版PDF+英文版PDF+源代码

    推荐非常适合入门神经网络编程的一本书<Python神经网络编程>,主要是三部分: 介绍神经网络的基本原理和知识:用Python写一个神经网络训练识别手写数字:对识别手写数字的程序的一些优化 ...

  4. crawlspider抽屉爬取实例+分布

    创建项目 scrapy startproject choutiPro 创建爬虫文件  scrapy genspider -t crawl chouti www.xxx.com 进入pycharm 培训 ...

  5. [ES2017] Iterate over properties of an object with ES2017 Object.entries()

    The Object.entries() function is an addition to the ECMAscript scpec in Es2017. This allows us to it ...

  6. Android 4.4 Fence在SurfaceFlinger中的应用

    网上关于android.fence的资料好少啊.差点儿没有,可是这个机制又在GUI系统中起着关键的数据,于是自己通读源代码和凝视.与大家分享下Fence究竟是怎么回事? Fence即栅栏.栅栏的角色与 ...

  7. 通过Debug-->Attach to Process的方式来调试网站

    找到网站所对应的应用程序池

  8. 56.如何清除已经设置的npm config配置

    npm config delete registry npm config delete disturl 或者 npm config edit 找到淘宝那两行,删除

  9. DG archive gap

    什么是archive gap Archive Gap就是standby端日志应用的过程中丢失的一段范围的redo.典型的发生在standby端不能接收primary的redo信息或者接收后不能应用这些 ...

  10. php开启openssl扩展

    windows下开启方法: 1: 首先检查php.ini中:extension=php_openssl.dll是否存在, 如果存在的话去掉前面的注释符‘:’, 如果不存在这行,那么添加extensio ...