ThinkPHP5.0手把手实现手机阿里云短信验证

最详细教程,没有第二篇

为分享经验而来(菜鸟来围观,大神轻点喷)
简述一下思路:现在有一个简单的手机短信验证页面,代码如下

html代码

  1. <!DOCTYPE html>
  2. <html lang=“en”>
  3. <head>
  4. <meta charset=“UTF-8”>
  5. <title>ThinkPHP5.0短信验证</title>
  6. <script src=“__STATIC__/jquery.js”></script>
  7. </head>
  8. <body>
  9. <form>
  10. <div>
  11. <div>
  12. <input id=“tel” type=“text” placeholder=“手机号”><br>
  13. <input id=“yzm” type=“text” placeholder=“验证码”><input type=“button” id=“sendmsg” value=“获取验证码”>
  14. </div>
  15. <div>
  16. <a href=“#” id=“submit”>验证</a>
  17. </div>
  18. </div>
  19. </form>
  20. </body>
  21. </html>
  22. <script >
  23. /*——————————————-*/
  24. var InterValObj; //timer变量,控制时间
  25. var count = 60; //间隔函数,1秒执行
  26. var curCount;//当前剩余秒数
  27. var code = “”; //验证码
  28. var codeLength = 6;//验证码长度
  29. $(function () {
  30. $(‘#sendmsg’).click(function () {
  31. var tel = $(‘#tel’).val();
  32. $.ajax({
  33. type: “POST”,
  34. url: “{:url(‘index/send_dx’)}”,
  35. data: {tel:tel},
  36. success: function (result) {
  37. if(result == 1){
  38. curCount = count;
  39. //设置button效果,开始计时
  40. $(“#sendmsg”).css(“background-color”, “”);
  41. $(“#sendmsg”).attr(“disabled”, “true”);
  42. $(“#sendmsg”).val(“获取” + curCount + “秒”);
  43. InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器,1秒执行一次
  44. // alert(“验证码发送成功,请查收!”);
  45. }else{
  46. alert(result);
  47. }
  48. },
  49. dataType: ‘json’
  50. });
  51. });
  52. $(‘#submit’).click(function(){
  53. var yzm = $(‘#yzm’).val();
  54. $.ajax({
  55. url:“{:url(‘index/check_dx’)}”,
  56. data:{yzm:yzm},
  57. type:“post”,
  58. dataType:“json”,
  59. success:function(data){
  60. if(data == 1)
  61. {
  62. alert(“验证成功”);
  63. }else{
  64. alert(data);
  65. }
  66. }
  67. });
  68. });
  69. });
  70. function SetRemainTime() {
  71. if (curCount == 0) {
  72. window.clearInterval(InterValObj);//停止计时器
  73. $(“#sendmsg”).removeAttr(“disabled”);//启用按钮
  74. $(“#sendmsg”).css(“background-color”, “”);
  75. $(“#sendmsg”).val(“重发验证码”);
  76. code = “”; //清除验证码。如果不清除,过时间后,输入收到的验证码依然有效
  77. }
  78. else {
  79. curCount–;
  80. $(“#sendmsg”).val(“获取” + curCount + “秒”);
  81. }
  82. }
  83. </script>

控制器代码

  1. <?php
  2. namespace app\index\controller;
  3. use think\Controller;
  4. use think\Loader;
  5. class Index extends Controller
  6. {
  7. public function index()
  8. {
  9. return $this->fetch();
  10. }
  11. public function send_dx()
  12. {
  13. // 加载extend文件夹里面的文件
  14. Loader::import(‘dx.api_demo.SmsDemo’,EXTEND_PATH);
  15. $tel = input(‘post.tel’);
  16. $code = rand(100000,999999);
  17. // 调用示例:
  18. set_time_limit(0);
  19. header(‘Content-Type: text/plain; charset=utf-8’);
  20. $response = (new \SmsDemo)::sendSms($tel,$code);
  21. $response = (new \SmsDemo)::sendBatchSms();
  22. $response = (new \SmsDemo)::querySendDetails($tel);
  23. // 保存验证码
  24. session(‘code’,$code);
  25. return 1;
  26. }
  27. public function check_dx()
  28. {
  29. $yzm = input(‘post.yzm’);
  30. if($yzm == session(‘code’))
  31. {
  32. session(‘code’,null);
  33. return 1;
  34. }
  35. return “验证码错误”;
  36. }
  37. }

当我们点击获取验证码时,我们填的手机会收到一条短信,并且我输入手机发来的验证码正确输入到验证码输入框后点击验证,就跳转到了我们想要的页面。


思路理清了就开始我们的教学步骤吧

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,我们需要把之前在阿里云申请的信息填写到这里,具体步骤看截图吧,跟着截图先把这个小功能实现了,后面再把这个小功能修改成自己的东西。

设置API接口
设置发送短信
设置接受号码
代码搬家


看这里:完成以上步骤加上代码,相信看完的朋友已经心中有数了!!! 如果本文对你有一点点帮助,可以帮我点个赞吗 你们的认可是我前进的动力

有一些朋友可能还有不懂的,可以及时联系我,我的邮箱1279728601@qq.com,大家一起进步