转载自:https://blog.csdn.net/weixin_40560205/article/details/81161207
最详细教程,没有第二篇
为分享经验而来(菜鸟来围观,大神轻点喷)
简述一下思路:现在有一个简单的手机短信验证页面,代码如下
html代码
<!DOCTYPE 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>
控制器代码
<?php
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
,我们需要把之前在阿里云申请的信息填写到这里,具体步骤看截图吧,跟着截图先把这个小功能实现了,后面再把这个小功能修改成自己的东西。
看这里:完成以上步骤加上代码,相信看完的朋友已经心中有数了!!! 如果本文对你有一点点帮助,可以帮我点个赞吗 你们的认可是我前进的动力。
有一些朋友可能还有不懂的,可以及时联系我,我的邮箱[email protected],大家一起进步