登录页面的图片验证码和发送短信验证码
登录页面html和css
这里主要分享后端内容,所以简单写写html和css内容,完成后前端网页界面如下:
需要启动前端和后端服务器,前端live-server具体配置看:https://blog.csdn.net/paul0926/article/details/90750408
后端生成的图片验证码以及判断验证对错内容、发送短信验证码:
在django项目新建一个模块image_code,里面的views.py内容:
from django.http import HttpResponse
from rest_framework.response import Response
from rest_framework.views import APIView
from rest_framework.generics import *
from shanghuishop.libs.captcha.captcha import captcha
from redis import StrictRedis
import random
import logging
# 容联云
from shanghuishop.libs.CCPRestSDK.sms import CCP
# 自己的包
from . import constants
from .serializers import *
# Create your views here.
# 日志操作
log = logging.getLogger('code')
class ImageCode(APIView):
def get(self, request, image_id):
# 1.生成验证码图片
text, image = captcha.generate_captcha()
# 创建redis对象,设置数据库
sr = StrictRedis(host='localhost', port=6379, db=12)
# 2.要保存验证码上的文字部分,key为uuid,值为text
sr.set(image_id, text, constants.IMAGE_UUID_REDIS_EXPIRES)
# 3.返回图片
return HttpResponse(image, content_type='image/png')
class CodeTrueOrFalse(GenericAPIView):
serializer_class = ImageTextSer
def get(self, request, uuid, text, phone):
# 1.校验图片验证码,用序列化器
data = {
'uuid': uuid, 'text': text, 'phone': phone}
ser = self.get_serializer(data=data)
print('##########################')
if ser.is_valid(raise_exception=True):
print('解析成功')
else:
print('失败')
# print(request.query_params) # 这个是个字典,值为get后拼接内容
print(ser.validated_data)
# 2.在3分钟内不再重复发送短信验证码
# 3.生成短信验证码
msg = '%04d' % random.randint(0, 9999)
# 4.保存短信验证码到redis
conn = StrictRedis(host='localhost', port=6379, db=12)
# pipe管道,最后一起执行
pipe = conn.pipeline()
pipe.setex('%s_code' % phone, constants.PHONE_CODE_REDIS_EXPIRES, msg)
pipe.setex('%s_flag' % phone, constants.PHONE_FLAG_REDIS_EXPIRES, 1)
pipe.execute()
# 5.发送短信 用的容联云,详情看容联云官网
ccp = CCP()
# 因为是测试,可以写死手机号码
# 三个参数具体看官方api介绍
res = ccp.send_template_sms(phone, [msg, constants.PHONE_CODE_REDIS_EXPIRES//60], 1)
print('短信发送结果', res)
# 6.返回响应数据
return Response('ok')
urls.py跳转逻辑,注意项目下的urls.py也需要对应的配置
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^(?P<image_id>[\w-]+)/$', views.ImageCode.as_view()),
url(r'^(?P<uid>[\w-]+)/(?P<text>[\w]+)/(?P<phone>[\d]+)$', views.CodeTrueOrFalse.as_view()),
]
新建一个serializers.py写检验逻辑
from rest_framework import serializers
from django_redis import get_redis_connection
import logging
from users.models import Users
# 日志操作对象
log = logging.getLogger('code')
class ImageTextSer(serializers.Serializer):
# 校验图片验证码
uuid = serializers.UUIDField(required=True)
text = serializers.CharField(required=True, max_length=4, min_length=4)
phone = serializers.CharField(max_length=11, min_length=11)
def validate(self, attrs)