vue H5 接入短信验证码

2022-03-05 14:27:10 浏览数 (1)

1、前端我们写点击获取验证码按钮然后请求后端api

代码语言:javascript复制
async setSmsCode() {
			  if(this.mobile){
				  const json = await sendSms({
				    query: {
				      mobile: this.mobile, //手机号
				      type: 1,
				    },
				    method: "post",
				  });
				  if (json.code == "200") {
				    Toast("验证码发送成功");
				    this.getCode();
				  } else {
				    Toast(json.msg);
				  }
			  }else{
				  Toast("请输入手机号");
			  }
			},

2、后台生成四位随机验证码

代码语言:javascript复制
$code = $this->getRandomCode(4);
//获取随机数字字符串
	private function getRandomCode($length=4) {
	    $glbVerifySeed = "1234567890";
	    
	    $bgnIdx = 0;
	    $endIdx = strlen($glbVerifySeed)-1;
	    
	    $code = "";
	    for($i=0; $i<$length; $i  ) {
	        $curPos = rand($bgnIdx, $endIdx);
	        $code .= substr($glbVerifySeed, $curPos, 1);
	    }
	    
	    return $code;
	}

3、为了防止手机短信的恶意点击,我们将用户手机号和验证码关联并加上验证码过期时间一起存入数据库

然后我们将平台验证码需要的参数按照各个平台的要求拼接好发送

代码语言:javascript复制
$params = array ();
	    // *** 需用户填写部分 ***
	    // fixme 必填:是否启用https
	    $security = false;
	    // fixme 必填: 请参阅 https://ak-console.aliyun.com/ 取得您的AK信息
	    $accessKeyId = "LTAIF807mHqeyBrw";
	    $accessKeySecret = "7AleIKZBqzE6H1l0Oe1YSQrKCnTg7R";
	    // fixme 必填: 短信接收号码
	    $params["PhoneNumbers"] = $mobile;
	    // fixme 必填: 短信签名,应严格按"签名名称"填写,请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/sign
	    $params["SignName"] = "网栈大礼包";
	    // fixme 必填: 短信模板Code,应严格按"模板CODE"填写, 请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/template
	    $params["TemplateCode"] = "SMS_223198769";
	    // fixme 可选: 设置模板参数, 假如模板中存在变量需要替换则为必填项
	    $params['TemplateParam'] = Array (
	        "code" => $code,
	    );
	    // fixme 可选: 设置发送短信流水号
	    // $params['OutId'] = "12345";
	
	    // fixme 可选: 上行短信扩展码, 扩展码字段控制在7位或以下,无特殊需求用户请忽略此字段
	    // $params['SmsUpExtendCode'] = "1234567";
	    // *** 需用户填写部分结束, 以下代码若无必要无需更改 ***
	    if(!empty($params["TemplateParam"]) && is_array($params["TemplateParam"])) {
	        $params["TemplateParam"] = json_encode($params["TemplateParam"], JSON_UNESCAPED_UNICODE);
	    }
	    // 初始化SignatureHelper实例用于设置参数,签名以及发送请求
	    $helper = new SignatureHelper();
	    // 此处可能会抛出异常,注意catch
	    $content = $helper->request(
	        $accessKeyId,
	        $accessKeySecret,
	        "dysmsapi.aliyuncs.com",
	        array_merge($params, array(
	            "RegionId" => "cn-hangzhou",
	            "Action" => "SendSms",
	            "Version" => "2017-05-25",
	        )),
	        $security
	    );
		if($content['Code'] == 'OK'){
		    $this->res['msg'] = '发送成功!';
		    $this->response($this->res,'json');
		}else{
		    $this->res['code'] = -1;
		    $this->res['msg'] = '发送失败请重试!';
		    $this->response($this->res,'json');
		}

补充:这里我们需要再自己的后台代码中引入平台的文件和方法

代码语言:javascript复制
require_once dirname(__DIR__) . "/libs/SignatureHelper.php";
use AliyunDySDKLiteSignatureHelper;

这样的话最终平台会收到我们发送的请求,提取参数中的手机号和验证码然后发送到用户手机,用户输入验证码点击注册或者登录时候携带验证码发送请求,后端再根据用户手机号从刚才存入数据库的表中校验手机号和验证码、过期时间。若符合逻辑则直接验证成功否则验证失败

0 人点赞