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

接着上一篇博客继续往下写 :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. Linux常用下载软件

    1.TransmissionTransmission是一个BitTorrent客户端软件,Ubunut默认自带的下载软件,它支持速度限制.制作种子.远程控制.磁力链接.数据加密.损坏修复.数据来源交换 ...

  2. scrollWidth到底是什么???

    贴上MDN对scrollwidth的定义: The Element.scrollWidth read-only property is a measurement of the width of an ...

  3. CodeForcesGym 100502D Dice Game

    Dice Game Time Limit: 1000ms Memory Limit: 524288KB This problem will be judged on CodeForcesGym. Or ...

  4. 编译QCAD

    编译QCAD eryar@163.com 目前开源的二维CAD有QCAD.LibreCAD等,且LibreCAD可以说是QCAD的分支版本.对比这款开源软件,发现QCAD的功能与操作习惯和AutoCA ...

  5. 小白算法之路-非确定性多项式(non-deterministic polynomial,缩写NP)

    前端小白的算法之路   时隔多日终于解决了埋在心头的一道难题,霎时云开雾散,今天把一路而来碰到的疑惑和心得都记录下来,也算是开启了自己探索算法的大门. 问题背景 曾经有一个年少轻狂的职场小白,在前端圈 ...

  6. window cmd 命令大全 (order)

    Windows CMD命令大全 命令简介 cmd是command的缩写.即命令行 . 运行操作 CMD命令:开始->运行->键入cmd或command(在命令行里可以看到系统版本.文件系统 ...

  7. POJ 3051 DFS

    题意:判断连通块大小 水题 //By SiriusRen #include <cstdio> #include <cstring> #include <algorithm ...

  8. spring源码分析之@Conditional

    根源在AnnotationConfigApplicationContext和AnnotationConfigWebApplicationContext,以AnnotationConfigApplica ...

  9. 在gridview里查找模板里的button控件

    这个问题,真是搞了我1天,这次记住他 第一种方法: protected void GridView1_RowCommand(object sender, GridViewCommandEventArg ...

  10. 用Vue+axios写一个实时搜索

    刚刚在学vue,试着写了一个实时搜索文件. 思路:1.input 通过v-model绑定.2.通过watch检测输入结果变化.3根据结果变化从api调用不同的数据. 代码如下: <!DOCTYP ...