PHP做手机短信注册验证码
1、进入云之讯平台
云之讯官方网站；
2、注册并登陆。下载SDK及阅读开发文档
（这是我先注册好的，新用户可以免费体验）
解压后
其中lib文件夹是主要请求api的PHP源码，index.html是整个测试目录的页面。
severSid.php
<?php
//载入ucpass类
require_once('lib/Ucpaas.class.php');
//初始化必填
//填写在开发者控制台首页上的Account Sid
$options['accountsid']='Account Sid';
//填写在开发者控制台首页上的Auth Token
$options['token']='Auth Token';
//初始化 $options必填
$ucpass = new Ucpaas($options);
smsyzm.php
<?php
//载入ucpass类
require_once('lib/Ucpaas.class.php');
require_once('serverSid.php');
$appid = "应用的ID"; //应用的ID，可在开发者控制台内的短信产品下查看
$templateid = "短信模板的id"; //可在后台短信产品→选择接入的应用→短信模板-模板ID，查看该模板ID
$param = $_POST['yzm']; //多个参数使用英文逗号隔开（如：param=“a,b,c”），如为参数则留空
$mobile = $_POST['yzmtel'];//前台传过来的手机号码
$uid = "";//可以忽略
//70字内（含70字）计一条，超过70字，按67字/条计费，超过长度短信平台将会自动分割为多条发送。分割后的多条短信将按照具体占用条数计费。
echo $ucpass->SendSms($appid,$templateid,$param,$mobile,$uid);
3.获得主要的接口id
1、环境配置：PHP 5.3以上
2、配置smsyzm.php文件下的2个变量
$appId：应用的ID，可在开发者控制台内的“验证通知短信”产品下查看
$templateId：认证通过的短信模板的ID
3、配置serverSid.php内的
$options[‘accountsid’]：填写在开发者控制台首页上的Account Sid
$options[‘token’]：填写在开发者控制台首页上的Auth Token
4、使用浏览器访问index.html文件，输入需要下发验证码的手机号码及验证码。由于本DEMO是使用PHP编写，测试时需要贵司部署在PHP5.3以上环境下才可运行
4.开始在前台写入代码
替换之前的index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>验证注册</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--图标-->
<link rel="stylesheet" type="text/css" href="./css/font-awesome.min.css">
<!--布局框架-->
<link rel="stylesheet" type="text/css" href="./css/util.css">
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="./css/main.css">
<script type="text/javascript" src="./js/jquery.js"></script>
<script type="text/javascript" src="./js/check.js"></script>
</head>
<body>
<div class="login">
<div class="container-login100">
<div class="wrap-login100">
<div class="login100-pic js-tilt" data-tilt="">
<img src="./img-01.png" alt="IMG">
</div>
<form class="login100-form validate-form" action="check.php" method="post">
<span class="login100-form-title">
我要注册
</span>
<div class="wrap-input100 validate-input">
<input class="input100" type="text" id="phone" name="phone" placeholder="请输入你的手机号码">
<span class="focus-input100"></span>
<span class="symbol-input100">
手机
</span>
</div>
<div class="wrap-input100 validate-input">
<input class="input100 yzm-input" id="yzm" name="yzm" type="text" placeholder="请输入验证码">
<input type="button" class="yzm-btn" id="yzmfs" value="短信验证码" onclick="settime(this)" />
<span class="focus-input100"></span>
<!-- <input id="msg" hidden name="code" value=""> -->
</div>
<div class="container-login100-form-btn">
<!-- <button class="login100-form-btn">
注册
</button> -->
<input type="submit" class="login100-form-btn" id='register' name='register' value="注册">
</div>
</form>
</div>
</div>
</div>
</body></html>
check.js
var countdown=60;
function settime(obj){
//60秒倒计时
if (countdown == 0){
obj.removeAttribute("disabled");
obj.value="短信验证码";
countdown = 60;
return;
}else{
obj.setAttribute("disabled", true);
obj.value="重新发送(" + countdown + ")";
countdown--;
}
setTimeout(function() {
settime(obj) }
,1000)
}
$(document).ready(function() {
let code = "";
$("#yzmfs").click(function () {
//确保手机号不为空
var mobile=$("#phone").val();
if(mobile.length==0)
{
alert('请输入手机号码！');
$("#phone").focus();
return false;
}
if(mobile.length!=11)
{
alert('请输入11位手机号！');
$("#phone").focus();
return false;
}
var myreg = /^((1[3|4|5|8][0-9]{1})+\d{8})$/;
if(!myreg.test(mobile))
{
alert('请输入正确的手机号码！');
document.getElementById("phone").focus();
return false;
}
//点击发送短信验证码
$.ajax({
async : false,
type: "get",
url: "code.php", //
data: {},
success: function (data) {
$("#msg").val = data;
// alert(data);
//发送短信验证码
$.ajax({
async : false,
type: "post",
url: "smsyzm.php", //
data: {"yzm": data, 'yzmtel': $('#phone').val()},
dataType: "json",
success: function (data) {
}
});
code = data;
}
});
})
$("form").submit(function(e){
e.preventDefault();
console.log(code);
$.ajax({
// async : false,
type: "post",
url: "check.php", //
data: {"code": code,"yzm":$("#yzm").val(),"phone":$("#phone").val()},
dataType: "json",
success: function (data) {
if (data == 3) {
alert("注册成功");
}else{
alert("注册失败");
}
}
})
})
})
code.php
主要生成验证码，以api的形式传递给前台index.html
<?php
$code_len=5;
$code=array_merge(range(1,9));//需要用到的数字或字母
$keyCode=array_rand($code,$code_len);//真正的验证码对应的$code的键值
if($code_len==1){
$keyCode=array($keyCode);
}
shuffle($keyCode);//打乱数组
$verifyCode="";
foreach ($keyCode as $key){
$verifyCode.=$code[$key];//真正验证码
}
echo base64_encode($verifyCode);
check.php
验证用户输入的验证码是否与服务端发送至手机的一致
<?php
error_reporting(E_ALL ^ E_NOTICE);
header("Content-type:text/html;charset=utf-8");
//判断name和pwd不能为空
// require_once('code.php');
$phone=isset($_POST['phone'])?$_POST['phone']:'';
//真正验证码
$code = base64_decode($_POST['code']);
// echo "真正验证码".$code."<br>";
//用户输入的验证码
// $yzm=isset($_POST['yzm'])?strtolower($_POST['yzm']):'';
$yzm = $_POST['yzm'];
// echo $yzm;
if($phone==""){
$data = 1;
if($yzm==""){
$data = 2;
}
} else if($code==$yzm){
// echo "注册成功";
$data = 3;
}else{
$data = 4;
echo $data;
//当然你还可以在这个页面将用户信息存入你的数据库
目前代码到这里就已经完成，当然css样式以及jQuery我没有写出来。还需要自己写入；
5、总结
其实这样的项目并不难，只是在做转换和回调的时候稍微复杂。前台响应事件时先向code.php请求验证码，当然为了安全必须做解码base64_encode。验证码发送到手机后，用户输入并单击提交还有响应一次事件，会在服务器端将用户输入的验证码与正确验证码作比较进行判断。
本次项目会有一个致命bug。大家可以讨论一下。
版权声明：本文为qq_42468039原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。