vue怎么实现短信验证码

这篇文章主要讲解了"vue怎么实现短信验证码"，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习"vue怎么实现短信验证码"吧！

一、需求

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 -1if __name__ == "__main__":    ccp = CCP()    # 注意： 测试的短信模板编号为1    ccp.send_template_sms("15914397060", ["1234", 5], 1)

三、代码实现

1，后端代码

　　views.py，这是获取验证码请求的处理，也就是后端产生一个随机码，发送给手机用户，然后把随机码存储于redis中，然后给前端返回一个验证码发送成功的信号

from .models import Userfrom rest_framework import statusfrom lufei_drf.libs.yuntongxun.sms import CCPfrom django_redis import get_redis_connectionclass 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 = "d" % 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_tokenfrom .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 ModelBackendfrom django_redis import get_redis_connectiondef jwt_response_payload_handler(token, user=None, request=None):    """    自定义jwt认证成功返回数据    :token  返回的jwt    :user   当前登录的用户信息[对象]    :request 当前本次客户端提交过来的数据    """    return {        "token": token,        "id": user.id,        "username": user.username,    }#实现多功能登录import refrom .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 Falseclass 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组件

　　前端获取短信验证码：

//获取短信验证码      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怎么实现短信验证码这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是，小编将为大家推送更多相关知识点的文章，欢迎关注！