短信验证码

最新推荐文章于 2024-10-13 22:25:31 发布

SHIZYYYDS

最新推荐文章于 2024-10-13 22:25:31 发布

阅读量656

点赞数

文章标签：开发语言 php html5

本文链接：https://blog.csdn.net/x_iao_s/article/details/121519733

版权

本文档详细介绍了如何通过PHP后端结合前端JavaScript实现短信验证码的发送和验证功能。首先，通过调用第三方短信接口发送验证码，并在前端进行倒计时展示。然后，将验证码存储在本地存储中，用于后续的注册验证。整个过程涉及HTML、jQuery、axios库以及第三方SDK的配置。同时，文章还展示了如何在前端进行注册表单的校验。

摘要由CSDN通过智能技术生成

需求：

发送短信的功能需要借助第三方的短信接口实现 SDK

实现流程:

实现：PHP+Html+jquery

一、点击获取验证码

getPhoneCode: function () {
      if (/^1[34578]\d{9}$/.test(this.phone) && this.phone != "") {
        setInterval(() => {
          if (this.codes == 0) {
            this.code = false;
            localStorage.removeItem("locals");
            this.disabled = false;
          } else {
            this.code = true;
            this.codes--;
          }
          this.disabled = true; //按钮是否能点
        }, 1000);

        //验证码发送
        this.axios
          .get("http://localhost/sms/Demo/SendTemplateSMS.php")
          .then((res) => {
            this.zcode = res.data;
            console.log(res);
            //判断验证码是否发送
            if (res.data == this.zcode) {
              this.$message({
                message: "验证码发送成功",
                type: "success",
              });
              localStorage.setItem("locals", JSON.stringify(this.zcode));
              console.log(this.zcode);
              this.locals = JSON.parse(localStorage.getItem("locals"));
            }
          });
      } else {
        this.$message({
          message: "请填写手机号",
          type: "warning",
        });
      }
    },

（1）senTemplateSMS.php

function sendTemplateSMS($to,$datas,$tempId)
{

    // 初始化REST SDK
    global $accountSid,$accountToken,$appId,$serverIP,$serverPort,$softVersion;
    $rest = new REST($serverIP,$serverPort,$softVersion);
    $rest->setAccount($accountSid,$accountToken);
    $rest->setAppId($appId);


    // 发送模板短信
//    echo "Sending TemplateSMS to $to
//    ";
    $result = $rest->sendTemplateSMS($to,$datas,$tempId);
    if($result == NULL ) {
        echo "result error!";
    }
    if($result->statusCode!=0) {
//            echo "模板短信发送失败!
//    ";

        echo $result->statusCode . "";
//        echo "error msg :" . $result->statusMsg . "
//    ";
        //下面可以自己添加错误处理逻辑
    }else{
        echo "模板短信发送成功!
    ";
        // 获取返回信息
        $smsmessage = $result->TemplateSMS;
        echo "dateCreated:".$smsmessage->dateCreated."
    ";
        echo "smsMessageSid:".$smsmessage->smsMessageSid."
    ";
        //下面可以自己添加成功处理逻辑
    }
}

//Demo调用,参数填入正确后，放开注释可以调用
sendTemplateSMS("**",array(str_pad(mt_rand(10, 999999), 6, "0", STR_PAD_BOTH),2),1);

//sendTemplateSMS("手机号码","内容数据","模板Id");
?>

指定发送手机号

二、生成验证码存放到会话缓存中

//判断验证码是否发送
            if (res.data == this.zcode) {
              this.$message({
                message: "验证码发送成功",
                type: "success",
              });
			  // 存放会话缓存
              localStorage.setItem("locals", JSON.stringify(this.zcode));
              console.log(this.zcode);
              this.locals = JSON.parse(localStorage.getItem("locals"));
            }

三、配置SDK （各种第三方云平台）容联云

//主帐号
$accountSid= '8aaf070879c5511c0179e532b46e0a4c';

//主帐号Token
$accountToken= '2722bf401b0449fc9dd9f2daf13faeee';

//应用Id
$appId='8a216da879cb5aa70179e931cc3708da';

四、回到页面页面中完成验证码判断（倒计时判断是否过期）

getPhoneCode: function () {
      if (/^1[34578]\d{9}$/.test(this.phone) && this.phone != "") {
        setInterval(() => {
          if (this.codes == 0) {
            this.code = false;
            localStorage.removeItem("locals");
            this.disabled = false;
          } else {
            this.code = true;
            this.codes--;
          }
          this.disabled = true; //按钮是否能点
        }, 1000);

        //验证码发送
        this.axios
          .get("http://localhost/sms/Demo/SendTemplateSMS.php")
          .then((res) => {
            this.zcode = res.data;
            console.log(res);
            //判断验证码是否发送
            if (res.data == this.zcode) {
              this.$message({
                message: "验证码发送成功",
                type: "success",
              });
			  // 存放会话缓存
              localStorage.setItem("locals", JSON.stringify(this.zcode));
              console.log(this.zcode);
              this.locals = JSON.parse(localStorage.getItem("locals"));
            }
          });
      } else {
        this.$message({
          message: "请填写手机号",
          type: "warning",
        });
      }
    },

（1）验证码过期失效

// 倒计时60秒后验证码失效
        setInterval(() => {
          if (this.codes == 0) {
            this.code = false;
            localStorage.removeItem("locals");
            this.disabled = false;
          } else {
            this.code = true;
            this.codes--;
          }
          this.disabled = true; //按钮是否能点
        }, 1000);

五、完成注册校验

if(dropmenu03.style.visibility=="hidden"){undefined
 dropmenu03.filters.revealTrans.apply();                                            // 应用效果
 dropmenu03.style.visibility="visible" ;                                               // 显示图层
 dropmenu03.filters.revealTrans.play();
 }else if(dropmenu03.style.visibility="visible"){undefined
 dropmenu03.filters.revealTrans.apply();                                            
 dropmenu03.style.visibility="hidden" ;                                              
 dropmenu03.filters.revealTrans.play();
 }
 var checkString=/^[0-9a-zA-Z_]+$/;
 if(checkString.test(document.myform.txtName.value)&&checkString.test(document.myform.txtPwd.value)){undefined
  document.myform.onsubmit;
  return;
 }
}

over~