注册简单流程及短信验证码的发送

一、书写前端页面并前端验证

1、对于注册页面进行排版布局

<label class="control-label">手机号：</label><input type="text" id="phone" name="phone" placeholder="请输入你的手机号" class="input-xfat input-xlarge">
<span class="error"></span>
<label for="inputPassword" class="control-label">验证码：</label>
<input type="text" id="code" name="code" placeholder="验证码" class="input-xfat input-xlarge" style="width:120px">
<button type="button" class="btn-xlarge" id="dyMobileButton" onclick="add($(this))">发送验证码</button>
<label for="inputPassword" class="control-label">登录密码：</label>
<input type="password" id="password" name="password" placeholder="设置登录密码" class="input-xfat input-xlarge">
<label for="inputPassword" class="control-label">确认密码：</label>
<input type="password" id="repassword" name="repassword" placeholder="再次确认密码" class="input-xfat input-xlarge">
<a onclick="insert()" id="reg_btn" class="sui-btn btn-block btn-xlarge btn-danger reg-btn" href="javascript:;">完成注册</a>

2、前端页面的验证及短信倒计时

<script>
//短信验证码发送function add(onself) {//手机号var phone=$("#phone").val();if(phone=='' || phone.length!=11){$("#phone").next().text('手机号码参数错误');return false;}else {$("#phone").next().text('');}//ajax$.ajax({url:"code",dataType:"json",type:"post",data:{phone:phone},success:function (res) {console.log(res);}})//计时器var count =60;var countdown = setInterval(Countdown,1000);function Countdown() {onself.attr("disabled",true);onself.text(count+"s后重试!");if(count == 0){onself.text("发送验证码").removeAttr("disabled");clearInterval(countdown);}count--;}}//注册function insert() {
//找对象并验证//手机号码var phone=$("#phone").val();if(phone==''){$("#phone").next().text('手机号为空');return false;}else{$("#phone").next().text('');}//验证码var code=$("#code").val();if(code==''){$(".error").eq(1).text('验证码为空');return false;}else {$(".error").eq(1).text('');}//登录密码var password=$("#password").val();if(password==''){$("#password").next().text('登录密码为空');return false;}else{$("#password").next().text('');}//确认密码var repassword=$("#repassword").val();if(repassword==''){$("#repassword").next().text('确认密码为空');return false;} else if(repassword != password){$("#repassword").next().text('与登录密码不符');return false;}else{$("#repassword").next().text('');}//ajax提交$.ajax({url:"insert",dataType: "json",type: 'post',data:{phone:phone,code:code,password:password,repassword:repassword,},success:function (res) {if(res.code==200){alert('注册成功!');return true;}else {alert('注册失败!');return false;}}})}
</script>

二、短信验证码接口

1、封装短信验证码及curl 发送路径

1.1 短信验证码可以通过短信宝提供的实例接口说明_马上使用更好的短信服务-短信宝官网

/** 短信验证码* */
if(!function_exists("code")){function code($phone,$code){$statusStr = array("0" => "短信发送成功","-1" => "参数不全","-2" => "服务器空间不支持,请确认支持curl或者fsocket，联系您的空间商解决或者更换空间！","30" => "密码错误","40" => "账号不存在","41" => "余额不足","42" => "帐户已过期","43" => "IP地址限制","50" => "内容含有敏感词");$smsapi = "http://api.smsbao.com/";$user = "******"; //短信平台帐号$pass = '*********'; //短信平台密码$content="【未来科技】您的验证码为 {$code}，5分钟内有效。若非本人操作，请忽略此消息。";//要发送的短信内容$phone = $phone;//要发送短信的手机号码$sendurl = $smsapi."sms?u=".$user."&p=".$pass."&m=".$phone."&c=".urlencode($content);#使用curl 返回
//        $result =file_get_contents($sendurl) ;$resutl=curl($sendurl);return $statusStr[$resutl];}
}

2.2CURL发送路径

/** 封装curl* */
if(!function_exists('curl')){function curl($url,$post_data='',$method='get',$header='',$type='http'){#第一步 初始化一个句柄$ch = curl_init($url);#如果提交选项 postif(strtolower($method)=='post'){#curl_setopt 设置一个curl传输此项curl_setopt($ch,CURLOPT_POST,true);curl_setopt($ch,CURLOPT_POSTFIELDS,$post_data);}#第二步执行curl_setopt($ch,CURLOPT_RETURNTRANSFER,true);$result = curl_exec($ch);#关闭curl_close($ch);return $result;}
}

2、验证码需要手机号

    /** 验证码* */public function code(Request $request){try {//接值 手机号$phone=$request->param('phone');//业务逻辑层$data= \app\home\business\Login::code($phone);return success(200,'验证码发送成功',$data);}catch (Exception $exception){return fail(200,$exception->getMessage(),'');}}

3、通过手机号发送反正验证码

 //验证码public static function  code($phone){//随即生成验证码$code=rand(0000,9999);$code_key='code_key'.$phone;   #每个手机号都是独立的$time_key='key_key'.$phone;    #存储发送时间cache($code_key,$code,300);//一分钟只能发送一次#获取第一次发送时间$first_send_time=cache($time_key);#判断第二次发送请求是否在1分钟内#当前时间-第一次时间小于60sif($first_send_time && time()-$first_send_time<60){throw  new Exception('发送频繁,请稍后尝试');}#记录第一次时间cache($time_key,time(),60);return $code;//发送验证码code($phone,$code);}

三、注册接口

3.1 接收表单值并验证

   public function save(Request $request){try{//接值$data=$request->all();//验证参数//业务逻辑添加入库\app\home\business\Login::insert($data);return success(200,'注册成功','');}catch (ValidateException $exception){return fail(2001,$exception->getError(),'');}catch (Exception $exception){return fail(2001,$exception->getMessage(),'');}}

3.2 判断验证码是否输入正确、手机号是否注册、完成入库

//注册public static function insert($data){//验证验证码是否输入正确#获取表单验证码$code =$data['code'];#cache中验证码$cache_code=cache('code_key'.$data['phone']);#验证码验证if(empty($cache_code)){throw new Exception('验证码失效');}else if($code != $cache_code){throw new Exception('验证码错误');}//验证手机号是否注册#查库验证$is_phone=User::where('phone',$data['phone'])->find();if($is_phone){throw new Exception('手机号已经被注册');}//添加入库return User::create(['username'=>$data['phone'],'nickname'=>substr_replace($data['phone'],'****',4,4),'phone'=>$data['phone'],'password'=>$data['password'],]);}

注册简单流程及短信验证码的发送相关推荐

快速集成APP注册页面免费获取短信验证码功能
前言: 最近这段时间都忙着优化自己的个人项目,好久没来总结分享了,今天就抽空跟大家分享一下快速集成APP注册页面免费获取短信验证码功能吧. 一.使用第三方短信SDK前期准备: 在这里我是使用了第三方免 ...
某注册页面存在手机短信验证码绕过
某注册页面存在手机短信验证码绕过的情况关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭关闭 ...
快速简单对接【短信验证码】API接口
快速简单对接[短信验证码]接口很多同学课程中都需要练习API接口对接,这里告知一个免费获取实名认证API接口的途径,也提供简单对接的使用方法. 整体过程说明: 1.下载postman软件 2.获取阿 ...
短信验证码总是发送失败是什么原因？
有些用户在使用某产品时可能会出现短信验证码收不到的情况,同事之前也遇到过这样的情况,连续发送多次依然收不到短信.那么短信验证码为什么会发送失败.原因有哪些呢.#短信验证码安全现在短信验证码服务在各种 ...
用Laravel Sms实现 laravel短信验证码的发送
阿里云短信服务使用Laravel Sms这个扩展包实现短信验证码的发送,这里以阿里云的短信服务为例: 首先,要创建短信签名和短信模板,具体申请详情如下, 接下来,需要创建AccessKey,由于Ac ...
java中验证码发送_实现短信验证码的发送[JAVA]
如何实现短信验证码的发送一.基础知识补充 1.编码 2.URL 3.字节流与字符流二.短信验证码编程实现一.基础知识补充 1.编码常见的编码:UTF-8 GBK Unicode GB2312 ...
php 阿里云短信服务及阿里大鱼实现短信验证码的发送
阿里云短信服务一:使用阿里云的短信服务 ① 申请短信签名 ②申请短信模板 ③创建Access Key,获取AccessKeyId 与 AccessKeySecret.(为了安全起见,这里建议使用子用 ...
java短信验证码失效时间_Java实现短信验证码--设置发送间隔时间，以及有效时间（Java+Redis）...
Java实现短信验证码--设置发送间隔时间,以及有效时间(Java+Redis) 这篇文章,实现了Java发送手机短信验证码发送的间隔时间,以及手机验证码的有效时间和手机验证码格式的合法性验证,可以防 ...
springboot + mybatis-plus短信验证码每天发送次数
springboot + mybatis-plus设置短信验证码每天发送次数思路:(例如每天限制发送5次验证码) 1.首先我们要有相应的字段,个人建议:创建数据表(id,phone,amount,s ...

注册简单流程及短信验证码的发送

一、书写前端页面并前端验证

二、短信验证码接口

三、注册接口

注册简单流程及短信验证码的发送相关推荐

最新文章

热门文章