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

接着上一篇博客继续往下写 :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. Swift学习笔记(12)--数组和字典的复制

    Swift中,数组Array和字典Dictionary是用结构来实现的,但是数组与字典和其它结构在进行赋值或者作为参数传递给函数的时候有一些不同. 并且数组和字典的这些操作,又与Foundation中 ...

  2. Swift学习笔记(6)--字典

    1.定义 //1.基本定义 [key 1: value 1, key 2: value 2, key 3: value 3] var dict = ["name":"Xi ...

  3. 树莓派开机运行Python脚本 控制LED灯闪烁

    一.新建一个开机运行文件 在 /home/pi/.config 下创建一个文件夹,名称为 autostart,并在该文件夹下创建一个led.desktop文件(文件名以.desktop结尾) 编辑le ...

  4. 【Henu ACM Round#18 B】Modulo Sum

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] m比较小 <=1000 a[i]直接看成a[i]%m就可以了. 有n个0..999之间的整数.. 如果有一个0那么就直接输出Y ...

  5. 洛谷 P3887 [GDOI2014]世界杯

    P3887 [GDOI2014]世界杯 题目描述 3014年世界杯足球赛就要开始了!作为卫冕冠军中国足球队的教练,手下每位球员都是猛将,如何摆出最强的11人阵容也是一件幸福的烦恼事啊. 众所周知,足球 ...

  6. window cmd 命令大全 (order)

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

  7. javafx ComboBox Event and change cell color

    public class EffectTest extends Application { public static void main(String[] args) { launch(args); ...

  8. 跟我一起造轮子 手写springmvc

    原创地址:https://www.cnblogs.com/xrog/p/9820168.html 作为java程序员,项目中使用到的主流框架多多少少和spring有关联,在面试的过程难免会问一些spr ...

  9. 【Django】序列化

    Django中序列化主要应用于将数据库中检索的数据返回给客户端用户,特别是Ajax请求一般返回为Json格式. * 1.from django.core import serializers** fr ...

  10. 【Django】认证系统

    目录 #. auth模块 1. 认证 authenticate() 2. 登陆 login(HttpRequest, user) 3. 注销 logout(request) 4. 认证判断 is_au ...