一、 獲取驗證碼:
? ?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():# 獲取phonephone = 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'] = Nonceheaders['CurTime'] = CurTimes = AppSecret + Nonce + CurTimeheaders['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 %}
?