Flask-BBS论坛项目实战6-图片验证码、短信验证码生成技术

图片验证码生成

安装pillow
1
pip install pillow

在utils下新建python package命名为captcha,把需要需要用到的字体放在captcha下.

编辑captcha.init.py, 生成验证码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import random
import string
# Image:一个画布
# ImageDraw:一个画笔
# ImageFont:画笔的字体

# pip install pillow
from PIL import Image, ImageDraw, ImageFont


class Captcha(object):
# 生成几位数的验证码
number = 4
# 验证码图片的高度和宽度
size = (100, 30)
# 验证码字体大小
fontsize = 25
#加入干扰线条数
line_number = 2

#构建一个验证码源文本
SOURCE = list(string.ascii_letters)
for index in range(0, 10):
SOURCE.append(str(index))

#用来绘制干扰线
@classmethod
def __gene_line(cls, draw, width, height):
begin = (random.randint(0, width), random.randint(0, height))
end = (random.randint(0, width), random.randint(0, height))
draw.line([begin, end], fill=cls.__gene_random_color(), width=2)

# 用来绘制干扰点
@classmethod
def __gene_points(cls, draw, point_chance, width, height):
chance = min(100, max(0, int(point_chance))) #大小限制在[0, 100]
for w in range(width):
for h in range(height):
tmp = random.randint(0, 100)
if tmp > 100 - chance:
draw.point((w, h), fill=cls.__gene_random_color())

# 生成随机的颜色
@classmethod
def __gene_random_color(cls, start=0, end=255):
random.seed()
return (random.randint(start, end),random.randint(start, end), random.randint(start, end))

# 随机选择一个字体
@classmethod
def __gene_random_font(cls):
fonts = [
'verdana.ttf'
]
font = random.choice(fonts)
return 'utils/captcha/' + font

# 用来随机生成一个字符串
@classmethod
def gene_text(cls, number):
#num是生成验证码的位数
return ''.join(random.sample(cls.SOURCE, number))

# 生成验证码
@classmethod
def gene_graph_captcha(cls):
#验证码图片的高和宽
width, height = cls.size
#创建图片
image = Image.new('RGBA', (width,height),cls.__gene_random_color(0, 100))
#验证码的字体
font = ImageFont.truetype(cls.__gene_random_font(), cls.fontsize)
#创建画笔
draw = ImageDraw.Draw(image)
#生成字符串
text = cls.gene_text(cls.number)
#获取字体尺寸
font_width, font_height = font.getsize(text)
#填充字符串
draw.text(((width - font_width) / 2, (height - font_height) / 2), text, font=font,
fill=cls.__gene_random_color(150, 255))
#绘制干扰线
for x in range(0, cls.line_number):
cls.__gene_line(draw, width, height)
#绘制噪点
cls.__gene_points(draw, 10, width, height)
return (text, image)

测试的时候我发现有些字体会导致程序崩溃,所以,我只设置了一个字体 fonts = [‘verdana.ttf’]
编辑视图。我们把它放到 公共的common里面去,编辑common.views.py

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
from flask import Blueprint, make_response
from utils.captcha import Captcha
from io import BytesIO

bp = Blueprint('common', __name__, url_prefix='/c') #common太长,改为c

@bp.route('/')
def index():
return 'common index'


@bp.route('/graph_captcha/')
def graph_captcha():
text, image = Captcha.gene_graph_captcha()
out = BytesIO()
image.save(out, 'png')
out.seek(0)
resp = make_response(out.read())
resp.content_type = 'image/png'
return resp

访问http://127.0.0.1:5000/c/graph_captcha/

图片验证放到注册页面。点击一次更换一张

图片验证码放在注册页面比较简单,只需要把编辑front_signup.html,把里面的“图片验证码”字换成img标签,src设置成图片验证码的url

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="input-group">
<input type="text" class="form-control" name="graph_captcha" placeholder="图形验证码">
<span class="input-group-addon captcha-addon"> <!--加了一个类captcha-addon-->
<img id="captcha-img" src="{{ url_for('common.graph_captcha') }}"><!--加了id aptcha-img-->
</span>
</div>


<!--样式-->
.captcha-addon{
padding: 0; //这是内边距为0,因为input-group-addon有设置内边距
overflow: hidden; //当里面的元素超出则隐藏
}

#captcha-img{
height: 32px; //设置图片的高度为32px
cursor: pointer; //当鼠标移到图片上变成手的图标
}


还有个需求就是,我们点击一个图片验证码,则需要更换成另外一个。
图片验证码更换,只需要替换它的url就可以,但是它的url就是一个http://127.0.0.1:5000/common/captcha/
所以只需要请求的时候加个参数http://127.0.0.1:5000/front/captcha/?xxx=<随机数>即可
我还需要对?xxx=<随机数>做处理,不然当用户点击多次,?xxx=<随机数>&xxx=<随机数>…变得很长,而我们只需要一个就可以了,这里封装了一个js, 存放在static/common/js/bbsparam.js中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
/**
* Created by Administrator on 2017/3/24.
*/

var bbsparam = {
setParam: function (href,key,value) {
// 重新加载整个页面
var isReplaced = false;
var urlArray = href.split('?');
if(urlArray.length > 1){
var queryArray = urlArray[1].split('&');
for(var i=0; i < queryArray.length; i++){
var paramsArray = queryArray[i].split('=');
if(paramsArray[0] == key){
paramsArray[1] = value;
queryArray[i] = paramsArray.join('=');
isReplaced = true;
break;
}
}

if(!isReplaced){
var params = {};
params[key] = value;
if(urlArray.length > 1){
href = href + '&' + $.param(params);
}else{
href = href + '?' + $.param(params);
}
}else{
var params = queryArray.join('&');
urlArray[1] = params;
href = urlArray.join('?');
}
}else{
var param = {};
param[key] = value;
if(urlArray.length > 1){
href = href + '&' + $.param(param);
}else{
href = href + '?' + $.param(param);
}
}
return href;
}
};

然后在static/front/js/下新建front_signup.js,当点击图片时更换src

1
2
3
4
5
6
7
8
$(function(){
$('#captcha-img').click(function (event) {
var self = $(this);
var src = self.attr('src');
var newsrc = bbsparam.setParam(src,'xx',Math.random());
self.attr('src',newsrc);
});
});

在signup.html中引入上面两个js

1
2
<script src="{{ url_for('static', filename='common/js/bbsparam.js') }}"></script>
<script src="{{ url_for('static', filename='front/js/front_signup.js') }}"></script>

此时点击http://127.0.0.1:5000/signup/ 上的验证码就可以变换了。

短信验证码

本项目使用的短信运营商是阿里云。这里就不做赘述了,大家可以去阿里云申请,申请的方式也很简单,现在已经对个人开放使用了。
我们直接进入正题。
在阿里云下载发送短信Python SDK
下载的压缩包为:dysms_python.zip
加压后,进入项目虚拟环境,进入到dysms_python目录,进行安装

1
python setup.py install

安装完后,在项目工具包utrils新建个python package命名为aliyunsms
把dysms_python目录中的以下文件或目录拷贝到aliyunsms

把demo_sms_send.py修改名字为sms_send.py,里面的代码修改后为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import sys
from aliyunsdkdysmsapi.request.v20170525 import SendSmsRequest
from aliyunsdkdysmsapi.request.v20170525 import QuerySendDetailsRequest
from aliyunsdkcore.client import AcsClient
import uuid
from aliyunsdkcore.profile import region_provider
import json
from aliyunsdkcore.http import method_type as MT
from aliyunsdkcore.http import format_type as FT


# 注意:不要更改
REGION = "cn-hangzhou"
PRODUCT_NAME = "Dysmsapi"
DOMAIN = "dysmsapi.aliyuncs.com"


#阿里大鱼相关配置
ACCESS_KEY_ID = '填你自己的'
ACCESS_KEY_SECRET = '填你自己的'
SING_NAME = "填你自己的"
TEMPLATE_CODE = "填你自己的"

acs_client = AcsClient(ACCESS_KEY_ID, ACCESS_KEY_SECRET, REGION)
region_provider.add_endpoint(PRODUCT_NAME, REGION, DOMAIN)


def send_sms(phone_numbers, template_param=None):
smsRequest = SendSmsRequest.SendSmsRequest()
# 申请的短信模板编码,必填
smsRequest.set_TemplateCode(TEMPLATE_CODE)

# 短信模板变量参数
if template_param is not None:
smsRequest.set_TemplateParam(template_param)

# 设置业务请求流水号,必填。
business_id = uuid.uuid1()
smsRequest.set_OutId(business_id)

# 短信签名
smsRequest.set_SignName(SING_NAME)

# 数据提交方式
# smsRequest.set_method(MT.POST)

# 数据提交格式
# smsRequest.set_accept_format(FT.JSON)

# 短信发送的号码列表,必填。
smsRequest.set_PhoneNumbers(phone_numbers)

# 调用短信发送接口,返回json
smsResponse = acs_client.do_action_with_exception(smsRequest)

# TODO 业务处理

return smsResponse


if __name__ == '__main__':

# print(__business_id)
params = {
'code': 1234
}
# params = u'{"name":"wqb","code":"12345678","address":"bz","phone":"13000000000"}'
print(send_sms("13xxxxxxxxx", json.dumps(params)))

把发送短信也放到common里面去,编辑common.views.py中写个视图

1
2
3
4
5
6
7
8
9
10
11
12
...
from utils.aliyunsms.send_sms import send_sms
import json

@bp.route('/sms_captcha/')
def sms_captcha():
params = {'code':'abcd'} #abcd就是发发送的验证码,code就是模板中定义的变量
result = send_sms('你接收短信的手机号码', json.dumps(params))
if result:
return '发送成功'
else:
return '发送失败'

浏览器访问http://127.0.0.1:5000/c/sms_captcha/

注册页面对接短信接口及接口加密

我们来看下之前写的 sms_captcha函数

1
2
3
4
5
6
7
8
@bp.route('/sms_captcha/')
def sms_captcha():
params = {'code':'abcd'}
result = send_sms('手机号码', json.dumps(params))
if result:
return '发送成功'
else:
return '发送失败'

因此我们的短信接口是http://127.0.0.1:5000/c/sms_captcha, 当我完善代码后,手机号码从前端传过来的参数如下:

1
2
3
4
5
6
7
8
9
@bp.route('/sms_captcha/')
def sms_captcha():
telephhone = request.args.get('telephone')
params = {'code':'abcd'}
result = send_sms(telephhone, json.dumps(params))
if result:
return '发送成功'
else:
return '发送失败'

这样,当前端只需要访问这个接口,传递个手机号码过来,就可以发送短信了。当恶意者通过爬虫技术访问这个接口,就可以实现恶意发送短信,对公司造成损失,因此设计这个接口时,我们就对它加密。加密规则如下:

现在需要重构sms_captcha视图函数,既然需要接受前端传过来的参数,我们就要对它们进行form验证。

编辑common.forms.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
from apps.forms import BaseForm
from wtforms import StringField
from wtforms.validators import Regexp, InputRequired
import hashlib



class SmsCaptchaForm(BaseForm):
salt = 'fgeWdLwg436t@$%$^'
telephone = StringField(validators=[Regexp(r'1[345789]\d{9}')])
# 这里的时间错是毫秒,验证13位就行了,14位已经是几百年后了
timestamp = StringField(validators=[Regexp(r'\d{13}')])
#签名必须输入就行
sign = StringField(validators=[InputRequired()])

def validate(self):
#首先必须通过上面的验证,否则不在继续往下执行了
result = super(SmsCaptchaForm, self).validate()
if not result:
return False

telephone = self.telephone.data
timestamp = self.timestamp.data
sign = self.sign.data

# md5(timestamp+telphone+salt)
# md5函数必须要传一个bytes类型的字符串进去
sign2 = hashlib.md5((timestamp + telephone + self.salt).encode('utf-8')).hexdigest()
if sign == sign2:
return True
else:
return False

重构sms_captcha视图函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
from flask import Blueprint, make_response, request
from io import BytesIO
from utils.aliyunsms.send_sms import send_sms
import json
from .forms import SmsCaptchaForm
from utils import xjson
from utils.captcha import Captcha

...

@bp.route('/sms_captcha/', methods=['POST'])
def sms_captcha():
sms_captcha_form = SmsCaptchaForm(request.form)
if sms_captcha_form.validate():
telephone = sms_captcha_form.telephone.data
#生成随机的验证,之前图片那里有方法实现了,我们直接调用就行,生成6位的验证码
radom_code = Captcha.gene_text(6)
params = {'code': radom_code}
if send_sms(telephone, json.dumps(params)):
return xjson.json_success('短信发送成功')
else:
return xjson.json_server_error('短信发送失败')
else:
return xjson.json_param_error('参数错误')

后端写好了,写前端了,前端点击”发送验证码”,当前的页面是不跳转了,所以这里我们使用ajax请求,编辑front_signup.js
这段js代码后面我们需要混淆加密,现在暂时实现功能,后面再加密

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
//发送手机验证码
$(function () {
$("#sms-captcha-btn").click(function (event) {
event.preventDefault();
var self = $(this);
var telephone = $("input[name='telephone']").val();
if(!(/^1[345879]\d{9}$/.test(telephone))){
xtalert.alertInfoToast('请输入正确的手机号码!');
return;
}
var timestamp = (new Date).getTime();
var sign = hex_md5(timestamp+telephone+"fgeWdLwg436t@$%$^"); //这里用到的hex_md5需要导入另外一个js
bbsajax.post({
'url': '/c/sms_captcha/',
'data':{
'telephone': telephone,
'timestamp': timestamp,
'sign': sign
},
'success': function (data) {
if(data['code'] == 200){
xtalert.alertSuccessToast(data['message']);
self.attr("disabled",'disabled');
var timeCount = 60;
var timer = setInterval(function () {
timeCount--;
self.text(timeCount);
if(timeCount <= 0){
self.removeAttr('disabled');
clearInterval(timer);
self.text('发送验证码');
}
},1000);
}else{
xtalert.alertInfoToast(data['message']);
}
}
});
});
});

把md5.js放入到static/common/js下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
/*
* A JavaScript implementation of the RSA Data Security, Inc. MD5 Message
* Digest Algorithm, as defined in RFC 1321.
* Version 2.1 Copyright (C) Paul Johnston 1999 - 2002.
* Other contributors: Greg Holt, Andrew Kepert, Ydnar, Lostinet
* Distributed under the BSD License
* See http://pajhome.org.uk/crypt/md5 for more info.
*/

/*
* Configurable variables. You may need to tweak these to be compatible with
* the server-side, but the defaults work in most cases.
*/
var hexcase = 0; /* hex output format. 0 - lowercase; 1 - uppercase */
var b64pad = ""; /* base-64 pad character. "=" for strict RFC compliance */
var chrsz = 8; /* bits per input character. 8 - ASCII; 16 - Unicode */

/*
* These are the functions you'll usually want to call
* They take string arguments and return either hex or base-64 encoded strings
*/
function hex_md5(s){ return binl2hex(core_md5(str2binl(s), s.length * chrsz));}
function b64_md5(s){ return binl2b64(core_md5(str2binl(s), s.length * chrsz));}
function str_md5(s){ return binl2str(core_md5(str2binl(s), s.length * chrsz));}
function hex_hmac_md5(key, data) { return binl2hex(core_hmac_md5(key, data)); }
function b64_hmac_md5(key, data) { return binl2b64(core_hmac_md5(key, data)); }
function str_hmac_md5(key, data) { return binl2str(core_hmac_md5(key, data)); }

/*
* Perform a simple self-test to see if the VM is working
*/
function md5_vm_test()
{
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72";
}

/*
* Calculate the MD5 of an array of little-endian words, and a bit length
*/
function core_md5(x, len)
{
/* append padding */
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;

var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;

for(var i = 0; i < x.length; i += 16)
{
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;

a = md5_ff(a, b, c, d, x[i+ 0], 7 , -680876936);
d = md5_ff(d, a, b, c, x[i+ 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i+ 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i+ 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i+ 4], 7 , -176418897);
d = md5_ff(d, a, b, c, x[i+ 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i+ 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i+ 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i+ 8], 7 , 1770035416);
d = md5_ff(d, a, b, c, x[i+ 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i+10], 17, -42063);
b = md5_ff(b, c, d, a, x[i+11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i+12], 7 , 1804603682);
d = md5_ff(d, a, b, c, x[i+13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i+14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i+15], 22, 1236535329);

a = md5_gg(a, b, c, d, x[i+ 1], 5 , -165796510);
d = md5_gg(d, a, b, c, x[i+ 6], 9 , -1069501632);
c = md5_gg(c, d, a, b, x[i+11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i+ 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i+ 5], 5 , -701558691);
d = md5_gg(d, a, b, c, x[i+10], 9 , 38016083);
c = md5_gg(c, d, a, b, x[i+15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i+ 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i+ 9], 5 , 568446438);
d = md5_gg(d, a, b, c, x[i+14], 9 , -1019803690);
c = md5_gg(c, d, a, b, x[i+ 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i+ 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i+13], 5 , -1444681467);
d = md5_gg(d, a, b, c, x[i+ 2], 9 , -51403784);
c = md5_gg(c, d, a, b, x[i+ 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i+12], 20, -1926607734);

a = md5_hh(a, b, c, d, x[i+ 5], 4 , -378558);
d = md5_hh(d, a, b, c, x[i+ 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i+11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i+14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i+ 1], 4 , -1530992060);
d = md5_hh(d, a, b, c, x[i+ 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i+ 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i+10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i+13], 4 , 681279174);
d = md5_hh(d, a, b, c, x[i+ 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i+ 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i+ 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i+ 9], 4 , -640364487);
d = md5_hh(d, a, b, c, x[i+12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i+15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i+ 2], 23, -995338651);

a = md5_ii(a, b, c, d, x[i+ 0], 6 , -198630844);
d = md5_ii(d, a, b, c, x[i+ 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i+14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i+ 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i+12], 6 , 1700485571);
d = md5_ii(d, a, b, c, x[i+ 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i+10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i+ 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i+ 8], 6 , 1873313359);
d = md5_ii(d, a, b, c, x[i+15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i+ 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i+13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i+ 4], 6 , -145523070);
d = md5_ii(d, a, b, c, x[i+11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i+ 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i+ 9], 21, -343485551);

a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd);
}
return Array(a, b, c, d);

}

/*
* These functions implement the four basic operations the algorithm uses.
*/
function md5_cmn(q, a, b, x, s, t)
{
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s),b);
}
function md5_ff(a, b, c, d, x, s, t)
{
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t);
}
function md5_gg(a, b, c, d, x, s, t)
{
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t);
}
function md5_hh(a, b, c, d, x, s, t)
{
return md5_cmn(b ^ c ^ d, a, b, x, s, t);
}
function md5_ii(a, b, c, d, x, s, t)
{
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t);
}

/*
* Calculate the HMAC-MD5, of a key and some data
*/
function core_hmac_md5(key, data)
{
var bkey = str2binl(key);
if(bkey.length > 16) bkey = core_md5(bkey, key.length * chrsz);

var ipad = Array(16), opad = Array(16);
for(var i = 0; i < 16; i++)
{
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C;
}

var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128);
}

/*
* Add integers, wrapping at 2^32. This uses 16-bit operations internally
* to work around bugs in some JS interpreters.
*/
function safe_add(x, y)
{
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF);
}

/*
* Bitwise rotate a 32-bit number to the left.
*/
function bit_rol(num, cnt)
{
return (num << cnt) | (num >>> (32 - cnt));
}

/*
* Convert a string to an array of little-endian words
* If chrsz is ASCII, characters >255 have their hi-byte silently ignored.
*/
function str2binl(str)
{
var bin = Array();
var mask = (1 << chrsz) - 1;
for(var i = 0; i < str.length * chrsz; i += chrsz)
bin[i>>5] |= (str.charCodeAt(i / chrsz) & mask) << (i%32);
return bin;
}

/*
* Convert an array of little-endian words to a string
*/
function binl2str(bin)
{
var str = "";
var mask = (1 << chrsz) - 1;
for(var i = 0; i < bin.length * 32; i += chrsz)
str += String.fromCharCode((bin[i>>5] >>> (i % 32)) & mask);
return str;
}

/*
* Convert an array of little-endian words to a hex string.
*/
function binl2hex(binarray)
{
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
var str = "";
for(var i = 0; i < binarray.length * 4; i++)
{
str += hex_tab.charAt((binarray[i>>2] >> ((i%4)*8+4)) & 0xF) +
hex_tab.charAt((binarray[i>>2] >> ((i%4)*8 )) & 0xF);
}
return str;
}

/*
* Convert an array of little-endian words to a base-64 string
*/
function binl2b64(binarray)
{
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
for(var i = 0; i < binarray.length * 4; i += 3)
{
var triplet = (((binarray[i >> 2] >> 8 * ( i %4)) & 0xFF) << 16)
| (((binarray[i+1 >> 2] >> 8 * ((i+1)%4)) & 0xFF) << 8 )
| ((binarray[i+2 >> 2] >> 8 * ((i+2)%4)) & 0xFF);
for(var j = 0; j < 4; j++)
{
if(i * 8 + j * 6 > binarray.length * 32) str += b64pad;
else str += tab.charAt((triplet >> 6*(3-j)) & 0x3F);
}
}
return str;
}

在front_signup.html中引入以下js

1
2
3
4
5
<script src="{{ url_for('static', filename='common/js/bbsajax.js') }}"></script>
<script src="{{ url_for('static', filename='common/js/md5.js') }}"></script>
<link href="{{ url_for('static', filename='common/sweetalert/sweetalert.css') }}" rel="stylesheet">
<script src="{{ url_for('static', filename='common/sweetalert/sweetalert.min.js') }}"></script>
<script src="{{ url_for('static', filename='common/sweetalert/xtalert.js') }}"></script>

并在头部加上一个meta,

1
<meta name="csrf-token" content="{{ csrf_token() }}">

完成之后我们把上面发送短信验证码的js在网上加密。
加密完成之后把原来的替换掉。
现在在注册页面输入手机账号就可以收到短信验证码了

把图片验证码和短信验证码保存到memcached中

前面我们已经获取到图片验证码和短信验证码,但是我们还没有把它们保存起来。同样的,我们和之前的邮箱验证码一样,保存到memcached中

编辑commom.vews.py
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
from utils import xcache

@bp.route('/graph_captcha/')
def graph_captcha():
text, image = Captcha.gene_graph_captcha()
out = BytesIO()
image.save(out, 'png')
out.seek(0)
resp = make_response(out.read())
resp.content_type = 'image/png'
xcache.set(text.lower(), text.lower()) #图片验证码这里,不好设置一个唯一key,索性直接也用验证码的值作为key
#都存入小写,到时候都通过小写对比,这样用户就不用区分大小写了
return resp


@bp.route('/sms_captcha/', methods=['POST'])
def sms_captcha():
sms_captcha_form = SmsCaptchaForm(request.form)
if sms_captcha_form.validate():
telephone = sms_captcha_form.telephone.data
#生成随机的验证,之前图片那里有方法实现了,我们直接调用就行,生成6位的验证码
radom_code = Captcha.gene_text(6)
params = {'code': radom_code}
if send_sms(telephone, json.dumps(params)):
xcache.set(telephone, radom_code) #把手机号码作为key
return xjson.json_success('短信发送成功')
else:
return xjson.json_server_error('短信发送失败')
else:
return xjson.json_param_error('参数错误')
-------------本文结束感谢您的阅读-------------