最详细教程,没有第二篇
为分享经验而来(菜鸟来围观,大神轻点喷)
简述一下思路:现在有一个简单的手机短信验证页面,代码如下
html代码
-
-
<html lang=“en”>
-
<head>
-
<meta charset=“UTF-8”>
-
<title>ThinkPHP5.0短信验证</title>
-
<script src=“__STATIC__/jquery.js”></script>
-
</head>
-
<body>
-
<form>
-
<div>
-
<div>
-
<input id=“tel” type=“text” placeholder=“手机号”><br>
-
<input id=“yzm” type=“text” placeholder=“验证码”><input type=“button” id=“sendmsg” value=“获取验证码”>
-
</div>
-
<div>
-
<a href=“#” id=“submit”>验证</a>
-
</div>
-
</div>
-
</form>
-
</body>
-
</html>
-
<script >
-
/*——————————————-*/
-
var InterValObj; //timer变量,控制时间
-
var count = 60; //间隔函数,1秒执行
-
var curCount;//当前剩余秒数
-
var code = “”; //验证码
-
var codeLength = 6;//验证码长度
-
$(function () {
-
$(‘#sendmsg’).click(function () {
-
var tel = $(‘#tel’).val();
-
$.ajax({
-
type: “POST”,
-
url: “{:url(‘index/send_dx’)}”,
-
data: {tel:tel},
-
success: function (result) {
-
if(result == 1){
-
curCount = count;
-
//设置button效果,开始计时
-
$(“#sendmsg”).css(“background-color”, “”);
-
$(“#sendmsg”).attr(“disabled”, “true”);
-
$(“#sendmsg”).val(“获取” + curCount + “秒”);
-
InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
-
// alert(“验证码发送成功,请查收!”);
-
}else{
-
alert(result);
-
}
-
},
-
dataType: ‘json’
-
});
-
});
-
$(‘#submit’).click(function(){
-
var yzm = $(‘#yzm’).val();
-
$.ajax({
-
url:“{:url(‘index/check_dx’)}”,
-
data:{yzm:yzm},
-
type:“post”,
-
dataType:“json”,
-
success:function(data){
-
if(data == 1)
-
{
-
alert(“验证成功”);
-
}else{
-
alert(data);
-
}
-
}
-
});
-
});
-
});
-
function SetRemainTime() {
-
if (curCount == 0) {
-
window.clearInterval(InterValObj);//停止计时器
-
$(“#sendmsg”).removeAttr(“disabled”);//启用按钮
-
$(“#sendmsg”).css(“background-color”, “”);
-
$(“#sendmsg”).val(“重发验证码”);
-
code = “”; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
-
}
-
else {
-
curCount–;
-
$(“#sendmsg”).val(“获取” + curCount + “秒”);
-
}
-
}
-
</script>
控制器代码
-
-
namespace app\index\controller;
-
-
use think\Controller;
-
use think\Loader;
-
class Index extends Controller
-
{
-
public function index()
-
{
-
return $this->fetch();
-
}
-
public function send_dx()
-
{
-
// 加载extend文件夹里面的文件
-
Loader::import(‘dx.api_demo.SmsDemo’,EXTEND_PATH);
-
$tel = input(‘post.tel’);
-
$code = rand(100000,999999);
-
// 调用示例:
-
set_time_limit(0);
-
header(‘Content-Type: text/plain; charset=utf-8’);
-
$response = (new \SmsDemo)::sendSms($tel,$code);
-
$response = (new \SmsDemo)::sendBatchSms();
-
$response = (new \SmsDemo)::querySendDetails($tel);
-
// 保存验证码
-
session(‘code’,$code);
-
return 1;
-
}
-
public function check_dx()
-
{
-
$yzm = input(‘post.yzm’);
-
if($yzm == session(‘code’))
-
{
-
session(‘code’,null);
-
return 1;
-
}
-
return “验证码错误”;
-
}
-
}
当我们点击获取验证码
时,我们填的手机会收到一条短信,并且我输入手机发来的验证码正确输入到验证码输入框后点击验证
,就跳转到了我们想要的页面。
思路理清了就开始我们的教学步骤吧
1、登录到www.aliyun.com首页,右上角导航找到控制台
点击进入。
2、在控制台首页左上角导航找到产品与服务
二级导航再找到云通信
栏目下的短信服务
点击进入。
3、在短信服务控制台页面左侧找到应用开发
完成应用开发栏目下的接口调用,签名管理,模板管理
三步操作,我们的任务就完成了一半了。
(1)接口调用:获取AK,点击AccessKey
按钮,如果没有创建过访问密钥(AK),点击创建AccessKey
,验证后就可以了。
(2)添加签名:我们还需要添加一个签名作为发出短信的标题,一般个人用户使用自己的真实姓名、网站名通过率较高,申请说明:可以使用固定句子手机验证码或短信验证
,当然可以使用其他申请理由,申请后等待小小会儿,在等待过程可以先完成模板管理
。
(3)模板管理:模板类型看个人需求,我们这里选验证码
;模板名称可以随便起,它的作用只是方便用户管理自己的模板;模板内容可以点击常用模板库
选择自己想要的模板,也可以自己定义;申请理由同上一步,使用固定句子就可以了。
4、 回到短信服务控制台页面在右边头像下面?申请短信模板
选择SDK及DEMO下载
,进入下载页面后找到并点击下载
标题下的【PHP
】蓝色字样,将下载的压缩包解压这里我们取名为“dx”,后面才是重头戏。
5、 把解压好的文件夹(dx)放在ThinkPHP项目根目录下的extend
目录下,开始操作dx文件夹里面的文件。
6、 用sublime打开dx,修改dx/api_demo/SmsDemo.php
,我们需要把之前在阿里云申请的信息填写到这里,具体步骤看截图吧,跟着截图先把这个小功能实现了,后面再把这个小功能修改成自己的东西。
看这里:完成以上步骤加上代码,相信看完的朋友已经心中有数了!!! 如果本文对你有一点点帮助,可以帮我点个赞吗 你们的认可是我前进的动力。
有一些朋友可能还有不懂的,可以及时联系我,我的邮箱1279728601@qq.com,大家一起进步