vue怎么实现短信验证码
这篇文章主要讲解了“vue怎么实现短信验证码”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue怎么实现短信验证码”吧!
专注于为中小企业提供做网站、成都做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业沽源免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了1000+企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
一、需求
1,需求
我们在做网站开发时,登录页面很多情况下是可以用手机号接收短信验证码,然后实现登录的,那我们今天就来做一做这一功能。
伪代码:
进入登录页面,点击短信登录
输入手机号码,点击获取验证码,后端在redis里保存验证码
用户把手机收到的验证码输入,点击登录,会把手机号和验证码发往后端,然后进行验证
要想发送短信,让用户收到短信,我们的借助一个容联云的接口,注册一个账号。
使用时需要的一些参数:
下载sdk
1.。。。。。。。
2.。。。。。。
3.。。。。。。。
下载完成后,解压。放入我们drf项目的apps里的libs里
二、sdk参数配置
1,目录结构
2,配置sms.py文件
# -*- coding:utf-8 -*- from .CCPRestSDK import REST # 说明:主账号,登陆云通讯网站后,可在"控制台-应用"中看到开发者主账号ACCOUNT SID _accountSid = "xxxxxxxxxxxxx" # 8a216da863f8e6c20164139687e80c1b # 说明:主账号Token,登陆云通讯网站后,可在控制台-应用中看到开发者主账号AUTH TOKEN _accountToken = "xxxxxxxxxxxxx" # 6dd01b2b60104b3dbc88b2b74158bac6 # 请使用管理控制台首页的APPID或自己创建应用的APPID _appId = "8aaf0708697b6beb01699f3c645f1766" # 8a216da863f8e6c20164139688400c21 # 说明:请求地址,生产环境配置成app.cloopen.com _serverIP = "sandboxapp.cloopen.com" # 说明:请求端口 ,生产环境为8883 _serverPort = "8883" # 说明:REST API版本号保持不变 _softVersion = "2013-12-26" #下面的内容不用修改 class CCP(object): """发送短信的辅助类""" def __new__(cls, *args, **kwargs): # 判断是否存在类属性_instance,_instance是类CCP的唯一对象,即单例 if not hasattr(CCP, "_instance"): cls._instance = super(CCP, cls).__new__(cls, *args, **kwargs) cls._instance.rest = REST(_serverIP, _serverPort, _softVersion) cls._instance.rest.setAccount(_accountSid, _accountToken) cls._instance.rest.setAppId(_appId) return cls._instance def send_template_sms(self, to, datas, temp_id): """发送模板短信""" # @param to 手机号码 # @param datas 内容数据 格式为数组 例如:{"12","34"},如不需替换请填 "" # @param temp_id 模板Id result = self.rest.sendTemplateSMS(to, datas, temp_id) # 如果云通讯发送短信成功,返回的字典数据result中statuCode字段的值为"000000" if result.get("statusCode") == "000000": # 返回0 表示发送短信成功 return 0 else: # 返回-1 表示发送失败 return -1 if __name__ == "__main__": ccp = CCP() # 注意: 测试的短信模板编号为1 ccp.send_template_sms("15914397060", ["1234", 5], 1)
三、代码实现
1,后端代码
views.py,这是获取验证码请求的处理,也就是后端产生一个随机码,发送给手机用户,然后把随机码存储于redis中,然后给前端返回一个验证码发送成功的信号
from .models import User from rest_framework import status from lufei_drf.libs.yuntongxun.sms import CCP from django_redis import get_redis_connection class SMSCodeAPIView(APIView): def get(self,request): # 1. 通过查询字符串获取手机号码 phone = request.query_params.get("phone") ty=request.query_params.get("type") # 2. 发送短信之前验证码验证一下手机号码 if ty=="register": try: User.objects.get(phone=phone) return Response({"message": "当前手机号已经被注册过"}, status=status.HTTP_400_BAD_REQUEST) except: pass redis = get_redis_connection("sms_code") if redis.get("times_%s" % phone): return Response({"message": "当前手机号已经在一分钟内发送过短信"}, status=status.HTTP_400_BAD_REQUEST) # 3. 使用手机号码发送短信验证码 # 生成一个短信验证码 sms_code = "%04d" % random.randint(0, 9999) ccp = CCP() result = ccp.send_template_sms(phone,[sms_code,"5分钟"],1) if result == 0: # 发送短信成功,保存短信验证码到redis数据库中 # 开启管道操作 pl = redis.pipeline() pl.multi() # 接下来会在管道中执行多条命令 # setex(变量名,有效期[秒],值 ) SMS_EXPIRE_TIME = 5 * 60 # 短信验证码的有效期 SMS_TIMES = 60 # 短信发送的间隔时间 # 把原来立即执行的命令放置到管道 pl.setex("sms_%s" % phone, SMS_EXPIRE_TIME, sms_code) pl.setex("times_%s" % phone, SMS_TIMES, 1) # 统一执行管道中的命令 pl.execute() # 4. 响应数据给客户端 return Response({"message":result},status=status.HTTP_200_OK)
urls.py
from django.urls import path # jwt内部实现的登陆视图 from rest_framework_jwt.views import obtain_jwt_token from .views import SMSCodeAPIView, urlpatterns=[ path(r"login/", obtain_jwt_token ), path("sms/",SMSCodeAPIView.as_view()), ]
utils.py,这是对用户提交手机验证码后,对手机号和验证码的校对。判断都正确后,返回一个对象,包括token,user信息等,
from django.contrib.auth.backends import ModelBackend from django_redis import get_redis_connection def jwt_response_payload_handler(token, user=None, request=None): """ 自定义jwt认证成功返回数据 :token 返回的jwt :user 当前登录的用户信息[对象] :request 当前本次客户端提交过来的数据 """ return { "token": token, "id": user.id, "username": user.username, } #实现多功能登录 import re from .models import User#查找用户名或手机号是否已经是我们的用户 def get_user_by_account(account): """ 根据帐号获取user对象 :param account: 账号,可以是用户名,也可以是手机号 :return: User对象 或者 None """ try: if re.match("^1[3-9]d{9}$", account): # 帐号为手机号 user = User.objects.get(phone=account) else: # 帐号为用户名 user = User.objects.get(username=account) except User.DoesNotExist: return None else: return user #验证用户提交的短信和我们保存在redis里的信息是否一致 def sms_code_verify(phone,sms_code): redis = get_redis_connection("sms_code") value=redis.get("sms_%s"%phone).decode() if value==sms_code: return True return False class UsernameMobileAuthBackend(ModelBackend): """ 自定义用户名或手机号认证 """ def authenticate(self, request, username=None, password=None, **kwargs): user = get_user_by_account(username) #当密码长度为4时,我判断其为手机号和短信验证码登录 if len(password)==4 and user is not None and sms_code_verify(username,password): return user elif user is not None and user.check_password(password): return user else: return None
2,前端代码
login组件
帮助有志向的年轻人通过努力学习获得体面的工作和生活!
密码登录 短信登录记住密码忘记密码没有账号立即注册 密码登录 短信登录{{content}}没有账号立即注册
前端获取短信验证码:
//获取短信验证码 get_sms_code:function(){ let reg = /1[3-9]{2}d{8}/; //当手机号为为真实手机号,才可以触发获取验证码 if( reg.test(this.phone) ){ //当页面上显示为‘获取验证码"时,才可以触发获取验证码请求;当进入倒计时,点击不能触发获取验证码请求 if(this.content == "获取验证码"){ //成功发送获取验证码请求之后开始倒计时60秒 this.content=60; let _this=this; let tt=setInterval(function () { if (_this.content>=1){ _this.content-- } else { _this.content="获取验证码"; clearInterval(tt) } },1000); this.$axios.get("http://127.0.0.1:8000/user/sms?type=login&phone="+this.phone) .then(function (res) { if(res.data.message==0){ alert("验证码发送成功") } }).catch(function (error) { console.log(error.response) }) } }else { alert("手机号码有误") } },
前端用手机号和短信验证码登录:
//获取短信验证码 get_sms_code:function(){ let reg = /1[3-9]{2}d{8}/; //当手机号为为真实手机号,才可以触发获取验证码 if( reg.test(this.phone) ){ //当页面上显示为‘获取验证码"时,才可以触发获取验证码请求;当进入倒计时,点击不能触发获取验证码请求 if(this.content == "获取验证码"){ //成功发送获取验证码请求之后开始倒计时60秒 this.content=60; let _this=this; let tt=setInterval(function () { if (_this.content>=1){ _this.content-- } else { _this.content="获取验证码"; clearInterval(tt) } },1000); this.$axios.get("http://127.0.0.1:8000/user/sms?type=login&phone="+this.phone) .then(function (res) { if(res.data.message==0){ alert("验证码发送成功") } }).catch(function (error) { console.log(error.response) }) } }else { alert("手机号码有误") } },
感谢各位的阅读,以上就是“vue怎么实现短信验证码”的内容了,经过本文的学习后,相信大家对vue怎么实现短信验证码这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!
本文题目:vue怎么实现短信验证码
本文路径:http://scyanting.com/article/gseoge.html