tp5 + ajax 引入阿里云短信发送验证码

工作中经常会遇到做发送短信验证码的,以下是tp5引入阿里云短信发送验证码一个案例,仅供参考阿里云官方下载地址:https://help.aliyun.com/document_detail/55359.html?spm=a2c4g.11186623.6.667.63183bb2YMptJ2百

工作中经常会遇到做发送短信验证码的,以下是tp5引入阿里云短信发送验证码一个案例,仅供参考

阿里云官方下载地址:https://help.aliyun.com/document_detail/55359.html?spm=a2c4g.11186623.6.667.63183bb2YMptJ2
百度云下载地址:https://pan.baidu.com/s/1C3HUvij6hH08zEwRSlqnPw 提取码:aar2

效果视图:

附件:

模板代码:

<div class="row">
	<div class="col-lg-12 col-sm-12 col-xs-12">
	    <div class="widget">
	        <div class="widget-header bordered-bottom bordered-themeprimary">
	            <span class="widget-caption">短信添加</span>
	        </div>
            <div class="widget-body">
                    <form class="form-horizontal form-bordered" role="form" method="post" action="" enctype="multipart/form-data" >
                        <div class="form-group">
                            <label for="inputusername" class="col-sm-1 control-label no-padding-right">手机号码</label>
                            <div class="col-sm-6">
                                <input type="text" class="form-control mobile"  name="mobile" placeholder="手机号码">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="inputusername" class="col-sm-1 control-label no-padding-right">验证码</label>
                            <div class="col-sm-6">
                                <div class="col-sm-8">
                                    <input type="text" class="form-control code"  name="code" placeholder="验证码">
                                </div>
                                <div class="col-sm-4">
                                    <!-- <button type="button" class="dchu btn btn-danger btn-xs gencode">获取验证码</button> -->
                                    <a href="javascript:void(0);" class="btn btn-danger btn-xs" id="gSMS" onclick="get_sms_captcha('2')">获取短信验证码</a> 
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-offset-1 col-sm-10">
                                <button type="button" class="btn btn-primary" onclick="subfm()">发送</button>
                            </div>
                        </div>
                    </form>
            </div>
	    </div>
	</div>
</div>

JavaScript+ajax代码:

    function subfm(){
        var code=$('.code').val();
        var mobile=$(".mobile").val();
        // if(code !=""){
            $.ajax({
                    url:"{:url('index/Alisdsms/smdss_sub')}",
                    type:'post',
                    data:{"code":code,"mobile":mobile,},
                    datatype:'json',
                    success:function(msg){
                      // console.log(msg)
                      alert(msg.message);
                      // location.reload(true);
                    }
                  });
        // }
    }
    var countDownT = 60;
        function get_sms_captcha(type){
            if(!$(".mobile").val().match(/^(13\d|14\d|15\d|17\d|18[0-9]|19\d)\d{8}$/)){
                alert("请输入正确的手机号码");
                return false;
            }else{
                $(".dchu").removeClass("btn-danger");
                 $.ajax({
                    url:"{:url('index/Alisdsms/smisds')}",
                    type:'post',
                    data:{"mobile":$(".mobile").val()},
                    datatype:'json',
                    success:function(msg){
                      console.log(msg)
                      // alert(msg.message);
                      // location.reload(true);
                    }
                  });

            }
            countDownT = 60;
            setTime();
            //下方写业务

        }

        function  setTime(){
            if (countDownT == 0){
                $("#gSMS").attr("onclick","get_sms_captcha('2')");
                $("#gSMS").text("获取短信验证码");
            } else{
                $("#gSMS").attr("onclick","#");
                $("#gSMS").text("重新发送("+countDownT+")");
                countDownT--;
                setTimeout(function () {
                    setTime();
                },1000)
            }
        }

PHP代码:

<?php
namespace app\index\controller;
use think\Controller;
use think\DB;
// 基本设置
class Alisdsms extends Base
{
   public function sms_add(){
   		return $this->fetch();
   }
   public function smisds(){
   		$posman=input();
   		$phone=input('mobile');
   		if($posman!=''){
   			$mobile=$phone;
   			// halt($mobile);
	   		$code=mt_rand(10000,99999);
	   		$result=sendMsg($mobile,$code);
	   		// halt($result);
	   		if($result['Code'] == 'OK'){
	   			cache('tel'.$mobile,$code,39);
	   			$data=[
	   				'tel'=>$mobile,
	   				'code'=>$code,
	   				'addtime'=>time(),
	   			];
	   			// halt($data);
	   			$res=\think\Db::name('bsms')->insert($data);
	   			return json(['success'=>'ok','message'=>'发送成功']);
	   		}
   		}
   }
   public function smdss_sub(){
   	$tel=input('mobile');
   	$code=input('code');
   	if($code==""){
   		return json(['error'=>'0','message'=>'请输入短信验证码']);
   	}
   	$res=db('bsms')->where(array('tel'=>$tel))->find();
   	if($res['code']=$code){
   		return json(['success'=>'1','message'=>'加入成功']);
   	}
   }
}

common.php公共配置文件添加如下代码:

<?php

// 阿里短信

use Aliyun\Core\Config;
use Aliyun\Core\Profile\DefaultProfile;
use Aliyun\Core\DefaultAcsClient;
use Aliyun\Api\Sms\Request\V20170525\SendSmsRequest;
 
//阿里短信函数,$mobile为手机号码,$code为自定义随机数
function sendMsg($mobile,$code){
 
    //这里的路径EXTEND_PATH就是指tp5根目录下的extend目录,系统自带常量。alisms为我们复制api_sdk过来后更改的目录名称
    require_once EXTEND_PATH.'alisms/vendor/autoload.php';
    Config::load();             //加载区域结点配置
 
    $accessKeyId = 'LTAJEexAPgUEV';  //阿里云短信获取的accessKeyId
 
    $accessKeySecret = 'CAP9VUEtoxoT6Cw0svbRnNX2BrcDn';    //阿里云短信获取的accessKeySecret
 
    //这个个是审核过的模板内容中的变量赋值,记住数组中字符串code要和模板内容中的保持一致
    //比如我们模板中的内容为:你的验证码为:${code},该验证码5分钟内有效,请勿泄漏!
    $templateParam = array("code"=>$code);           //模板变量替换
 
    $signName = '织梦云blogs'; //这个是短信签名,要审核通过
 
    $templateCode = 'SMS_925270876';   //短信模板ID,记得要审核通过的
 
 
    //短信API产品名(短信产品名固定,无需修改)
    $product = "Dysmsapi";
    //短信API产品域名(接口地址固定,无需修改)
    $domain = "dysmsapi.aliyuncs.com";
    //暂时不支持多Region(目前仅支持cn-hangzhou请勿修改)
    $region = "cn-hangzhou";
 
    // 初始化用户Profile实例
    $profile = DefaultProfile::getProfile($region, $accessKeyId, $accessKeySecret);
    // 增加服务结点
    DefaultProfile::addEndpoint("cn-hangzhou", "cn-hangzhou", $product, $domain);
    // 初始化AcsClient用于发起请求
    $acsClient= new DefaultAcsClient($profile);
 
    // 初始化SendSmsRequest实例用于设置发送短信的参数
    $request = new SendSmsRequest();
    // 必填,设置雉短信接收号码
    $request->setPhoneNumbers($mobile);
 
    // 必填,设置签名名称
    $request->setSignName($signName);
 
    // 必填,设置模板CODE
    $request->setTemplateCode($templateCode);
 
    // 可选,设置模板参数
    if($templateParam) {
        $request->setTemplateParam(json_encode($templateParam));
    }
 
    //发起访问请求
    $acsResponse = $acsClient->getAcsResponse($request);
 
    //返回请求结果
    $result = json_decode(json_encode($acsResponse),true);
    return $result;

}
// 阿里短信

阿里云通信分会场:https://promotion.aliyun.com/ntms/act/product-section-2019/communication.html?utm_content=se_1001433792

本文标题为:tp5 + ajax 引入阿里云短信发送验证码

基础教程推荐