|
一、 获取验证码：
1. 输入手机号码
2. 通过ajax发送请求
3. 后端： 获取手机号码
使用requests向第三方的服务端（网易云信）发送请求
官方文档 https://dev.yunxin.163.com/docs/product/%E7%9F%AD%E4%BF%A1/%E7%9F%AD%E4%BF%A1%E6%8E%A5%E5%85%A5%E7%A4%BA%E4%BE%8B
4.获取响应对象：
res.text 文本内容
res.content 二进制
5. 转成json对象
r = json.loads(res.text)
r.obj ---> 验证码
保存到缓存中: cache.set(phone,r.obj)
6. 返回json结果给ajax
二、登录验证：
获取手机号码和验证码进行验证
phone = request.form.get('phone')
validate = request.form.get('valiadate')
code = cache.get(phone)
if code == validate:
user = User.query.filter(User.phone == phone).first()
cache.set('uname', user.username)
session['uname'] = user.username
return redirect(url_for('blog.index'))
else:
flash('手机验证码错误')
return render_template('login_phonecode.html')
调用即可实现网易云信api
# 获取手机号码，并向网易云信发送请求
@blog_bp.route('/send', endpoint='send')
def send_request():
# 获取phone
phone = request.args.get('phone')
url = 'https://api.netease.im/sms/sendcode.action' # 网易云信接口
headers = {}
headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'
AppSecret = '111111111111111'
Nonce = '111111222222333333333'
CurTime = str(time.time())
headers['AppKey'] = '972115c8e25fe6ff97ffdcbf0c894bbb111'
headers['Nonce'] = Nonce
headers['CurTime'] = CurTime
s = AppSecret + Nonce + CurTime
headers['CheckSum'] = hashlib.sha1(s.encode('utf-8')).hexdigest().lower()
res = requests.post(url, data={'mobile': phone}, headers=headers)
print(res.text, type(res.text))
json_obj = json.loads(res.text) # 字典
cache.set(phone, json_obj.obj)
# print(res.content)
if json_obj.code == 200:
return {'msg': 'ok'}
else:
return {'msg': 'fail'}
前端.html
{% extends 'base.html' %}
{% block title %} 用户登录 {% endblock %}
{% block content %}
<div class="container">
<p>
{% with messages = get_flashed_messages() %}
{% if messages %}
<ul class="flash">
{% for message in messages %}
<div class="alert alert-success" style="text-align: center">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
<strong>{{ message }}</strong></div>
{% endfor %}
</ul>
{% endif %}
{% endwith %}
</p>
<form action="{{ url_for('blog.login') }}" method="post">
<input type="hidden" name="csrf_token" value="{{csrf_token()}}">
<div class="form-group">
<label class="col-sm-2 control-label">手机号码</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" placeholder="phone"
name="phone">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">验证码</label>
<div class="col-sm-8">
<input type="text" class="form-control" id="valiadate" placeholder="valiadate" name="valiadate">
</div>
<div class="col-sm-2">
<input type="button" value="获取验证码" class="btn btn-warning" id="getCode">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="btn btn-info">用户登录</button>
</div>
</div>
</form>
</div>
{% endblock %}
{% block myjs %}
<script>
$('#getCode').click(function(){
// 获取手机号码文本框的值
var phone = $('#phone').val();
flag=(phone!=''&&phone.length==11);
console.log(phone+"---"+flag);
if(flag){
// 向服务器发送请求
$.getJSON("{{url_for('blog.send')}}",{phone:phone},function(data){
});
}else{
alert('手机号码不能为空，长度必须11位')
}
})
</script>
{% endblock %}
| 
转播
