有时我们在帮客户做网站的过程中，会遇到需要短信验证码的场景，比如用户的注册、用户的登录、用户找回密码、留言时的短信验证码验证等。这里我以阿里大鱼的短信验证码举例，来说一说具体的使用流程，已经用在客户的网站上了，这里是做一个复盘总结，希望有需要的朋友能够用得上。
整体效果如下，流程是这样的：点击“获取验证码”会验证填的手机号格式是否正确，如果正确则把数据通过ajax方式提交到网站服务器端，服务器端也做好验证工作，没有问题的话则向对应的手机号发送一个验证码，同时通过session保存生成的验证码，60秒内有效，超过60秒点击“重新获取”，并有一个倒计时提示效果。
验证码发送成功后，点击注册按钮的话，如果验证提交的数据没有问题，则把数据通过ajax提交到服务器端，服务器端同样做好数据验证即可，没有问题则把数据入库，并返回提示即可。
服务器端的验证码验证主要包括3个：传过来的手机号是否是客户在前端输入的那个手机号，传过来的验证码是否是客户输入的那个验证码，验证码的有效时间是否已经到期。
下面简单的附上部分代码，后面有做附件打包，感兴趣的朋友可以下载了解看看
1、前端部分：smsdemo.html
<!DOCTYPE html> <head> <title>阿里大鱼，php+ajax发送短信验证码和提交数据实例</title> </head> <body> <form method="post" action="" class="myfm"> <div> <input type="text" id="phone" name="phone" placeholder="请输入手机号"> </div> <div> <input type="text" id="verycode" name="verycode" placeholder="请输入验证码"> <a onclick="send_sms(this);" id="verify-btn" style="cursor: pointer;">获取验证码</a> </div> <div> <input type="password" name="password" placeholder="请输入密码 ( 最少八位 )"> </div> <div> <input type="password" name="pwdconfirm" placeholder="请再次输入密码"> </div> <input type="submit" name="dosubmit" value="注册"> </form> <script type="text/javascript" src="sms/jquery.min.js"></script> <script type="text/javascript" src="sms/sms_send.js"></script> <!--短信验证码发送--> <script type="text/javascript" src="sms/sms_do.js"></script><!--ajax数据提交--> </body> </html>
2、ajax提交电话到服务器端，并利用阿里大鱼发送短信：/sms/sms_send.js+/sms/ali/sms_send.php
//#phone 电话输入框的ID #verify-btn 获取验证码的ID
var countdown;
var flag = 0;
var sec = 60;
var int;
function send_sms(obj) {
var phone = $("#phone").val();
//console.log(phone);
var partten = /^1[3-9]\d{9}$/;
if(!partten.test(phone)){
alert("请输入正确的手机号码");
$('#phone').focus();
return false;
}
if(flag == 0){
$.post('/sms/ali/sms_send.php',{"tel":phone},function(data){
if(data.status != 1){
alert(data.msg);
}else{}
},'json')
flag = 1;
$(this).css("backgroundColor",'white');
$(this).css("borderColor",'grey');
int = setInterval(countfunc,1000);
}
else{
return false;
}
}
// 获取验证码点击后倒计时
function countfunc(){
if(sec > 0){
$("#verify-btn").text("重新获取(" + sec + ")");
sec--;
}else{
flag = 0;
sec = 60;
$("#verify-btn").css("backgroundColor",'white');
// $("#verify-btn").css("borderColor",'#d43f3a');
$("#verify-btn").text("获取验证码");
clearInterval(int);
}
}
<?php
session_start();
.......
/*
status -1 60秒内不能重复发送
status 1 发送成功
status 2
status 3 手机号不正确
*/
$phone=$_POST["tel"];
if(preg_match("/^1[34578]{1}\d{9}$/",$phone)){
// 加载区域结点配置
Config::load();
class Sms
{
.......
/**
* 发送短信
* @return stdClass
*/
public static function sendSms($phoneNumbers) {
// 初始化SendSmsRequest实例用于设置发送短信的参数
$request = new SendSmsRequest();
// 必填，设置短信接收号码
$request->setPhoneNumbers($phoneNumbers);
// 必填，设置签名名称，应严格按"签名名称"填写，请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/sign
$request->setSignName("企业核名");
// 必填，设置模板CODE，应严格按"模板CODE"填写, 请参考: https://dysms.console.aliyun.com/dysms.htm#/develop/template
$request->setTemplateCode("SMS_205885284");
// 可选，设置模板参数, 假如模板中存在变量需要替换则为必填项
if (isset($_SESSION["smscode_time"]) && (time() - $_SESSION["smscode_time"]) < 60) {
return array('status' => -1, 'msg' => '60秒内不能重复发送');
}
function getrandchar($length){
$str = null;
$strPol = "0123456789";
$max = strlen($strPol)-1;
for($i=0;$i<$length;$i++){
$str.=$strPol[rand(0,$max)];
}
return $str;
}
$code = getrandchar(6);
$_SESSION["smscode"]=$code; //保存短信验证码
$_SESSION["phone"]=$phoneNumbers; //保存手机号
$_SESSION["smscode_time"]=time(); //保存短信生成时间
$request->setTemplateParam(json_encode(array( // 短信模板中字段的值
"code"=>$code,
), JSON_UNESCAPED_UNICODE));
// 可选，设置流水号
$request->setOutId("45656");
// 选填，上行短信扩展码（扩展码字段控制在7位或以下，无特殊需求用户请忽略此字段）
$request->setSmsUpExtendCode("1234567");
// 发起访问请求
$acsResponse = static::getAcsClient()->getAcsResponse($request);
if($acsResponse->Code == "OK")
return array('status' => 1, 'msg' => '发送成功！');
else
return array('status' => -1, 'msg' => $acsResponse->Message);
}
}
// 调用示例：
set_time_limit(0);
header('Content-Type: text/plain; charset=utf-8');
$response = Sms::sendSms($phone);
echo json_encode($response);
}else{
$data=array(status=>3,msg=>"手机号不正确");
echo json_encode($data);
}
3、ajax提交数据，服务器端做好对应的验证：/sms/sms_do.js和/sms/ali/sms_do.php
$(document).ready(function(){
$('.myfm input[name=dosubmit]').click(function(e){
let obj={
'phone':$('.myfm input[name=phone]').val(), //电话
'verycode':$('.myfm input[name=verycode]').val(), //短信验证码
'password':$('.myfm input[name=password]').val(), //密码
'pwdconfirm':$('.myfm input[name=pwdconfirm]').val(), //确认密码
}
if(obj.phone==''){
alert("请输入手机号");
$('.myfm input[name=phone]').focus();
return false;
}
if(!checkPhone(obj.phone)){
alert("手机号码输入有误，请重新输入");
$('.myfm input[name=phone]').focus();
return false;
}
if(obj.verycode==''){
alert("请输入你收到的验证码");
$('.myfm input[name=verycode]').focus();
return false;
}
if(obj.password==''){
alert("请输入密码");
$('.myfm input[name=password]').focus();
return false;
}
if(obj.pwdconfirm==''){
alert("请输入确认密码");
$('.myfm input[name=pwdconfirm]').focus();
return false;
}
if(obj.password != obj.pwdconfirm){
alert("密码输入不一致！");
return false;
}
$.ajax({
type : "POST", //提交方式
url : "/sms/ali/sms_do.php",//路径
data : {
"dosubmit":"dosubmit",
"ajax":"1",
'info[phone]':obj.phone,
'info[password]':obj.password,
'info[pwdconfirm]':obj.pwdconfirm,
'verycode':obj.verycode,
},//数据，这里使用的是Json格式进行传输
//dataType: "json",
success : function(result) {//返回数据根据结果进行相应的处理
if(result == "ok"){
alert('您已提交成功，我们会马上安排人员和您联系！');
}else if(result == "codeerror"){
alert('验证码错误！');
}else if(result == "timeerror"){
alert("验证码已过期！");
}else if(result == "telerrorr"){
alert("电话号码错误！");
}else{alert(result);}
}
});
e.stopPropagation();//禁止响应父元素的相关事件
e.preventDefault();//防止跳转
})
})
function checkPhone(phone){
if(!(/^1[3456789]\d{9}$/.test(phone))){
return false;
}else{
return true;
}
}
<?php
session_start();
if(isset($_POST['verycode'])){//手机验证码验证
$code = isset($_SESSION['smscode']) ? $_SESSION['smscode'] : ''; //短信验证码增加
$phone_numbers = isset($_SESSION['phone']) ? $_SESSION['phone'] : ''; //短信验证码增加
$time = isset($_SESSION['smscode_time']) ? $_SESSION['smscode_time'] : 0; //短信验证码增加
if($_POST['smscode'] != $code){
echo "codeerror";exit;
}
if(time() - $time >= 60){ // 这个是过期时间，60秒内有效
echo "timeerror";exit;
exit;
}
if($_POST['info']['phone'] != $phone_numbers){
echo 'telerrorr';
exit;
}
$_SESSION['smscode'] = '';
//处理其他事务，比如数据入库等操作
}else{
}
?>
关注公众号：太友帮，回复“阿里大鱼短信”即可免费获取 《利用阿里大鱼发送短信验证代码实例.zip》
管道链接：阿里云短信官网
2021-04-22更新
如果第三方短信服务提供商提供的是api接口的写法，短信发送实现方式如下，结合网站访客留言，短信验证码实例如下：
$url = "https://sdk2.02d8lwk.com:9988/BatchsSend2.aspx?"; $ContentS = "您好，您的验证码是：".$code."，请妥善保管。"; $ContentS = rawurlencode(mb_convert_encoding($ContentS, "gb2312", "utf-8"));//短信内容做GB2312转码处理 $CorpID = "CdDJT0dd01054"; $Pwd = "B3dd56dEC"; $Mobile = $phoneNumbers; $SendTime = ""; $curpost = "CorpID=".$CorpID."&Pwd=".$Pwd."&Mobile=".$Mobile."&Content=".$ContentS."&SendTime=".$SendTime; //POST方式请求 $ch = curl_init(); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); // 跳过证书检查 -https curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, true); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_POST, 1); curl_setopt($ch, CURLOPT_POSTFIELDS, $curpost); $result = curl_exec($ch); curl_close($ch);
