Loading... # 前言 该接口常用于短信验证注册及登陆,并且适用场景很多 只是简单的写了一下,没有更好的维护,比如判断手机号是否正确(可以用正则表达式实现)和短时间内是否长时间点击(可以用cookie实现) 实际使用的话还是得注意一下 本接口调用地址:[一个SMS平台](https://smss.popularyun.cn/R/xw6faIXb) 你可以提前注册实名获得key ![手机接收到的验证码](https://bucket.iczrx.cn/2024/04/13/661a1b44a04d0.jpg) 前端页面: ![简单编写的](https://bucket.iczrx.cn/2024/04/13/661a1b8b2ba0a.jpg) # 原理 前端ajax提交数据到sms.php(POST) 后端生成随机6位数字验证码,随后curl请求接口 ## index.html ```html <html lang="zh-CN"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>验证码服务</title> <script src='https://code.jquery.com/jquery-3.7.1.min.js'></script> <script src=' https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js'></script> <link href='https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css' rel='stylesheet'/> <style> #phone:hover{ border: 1px solid #6CAFE3; } </style> </head> <body> <div class="container" style="margin-top:120px;text-align:center;width:500px;height:270px;border: 2px dashed #E7F3B6;"> <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <symbol id="check-circle-fill" viewBox="0 0 16 16"> <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/> </symbol> <symbol id="info-fill" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/> </symbol> <symbol id="exclamation-triangle-fill" viewBox="0 0 16 16"> <path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/> </symbol> </svg> <div class="alert alert-success d-flex align-items-center" role="alert" style="height:70px;width:420px;margin:auto;margin-top:25px"> <svg style="height:50px;width:50px" class="bi flex-shrink-0 me-2" role="img" aria-label="Success:"><use xlink:href="#check-circle-fill"/></svg> <div> <h1>欢迎使用本服务</h1> </div> </div> <br> <form class="form-inline" style="margin:0 auto;display:block;"> <input style="margin:auto;width:220px" id="phone" type="text" class="form-control align-left" placeholder="请输入手机号" name="phone"> <br> <button style="width:180px" id="send" type="button" class="btn btn-outline-primary" onclick="send_code()">发送</button> </form> </div> <script> function send_code(){ var phone = document.getElementById('phone'); $.ajax({ type:'post', url:'sms.php', data:{ phone:phone.value, }, }); alert("验证码已发送!"); } </script> </body> </html> ``` ## sms.php ```php <?php $phone = $_POST['phone']; function generateRandomCode($length = 6) { $code = ''; for ($i = 0; $i < $length; $i++) { $code .= mt_rand(0, 9); } return $code; } $code = generateRandomCode(); $time = date("Y-m-dH:m"); $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, "https://smss.popularyun.cn/sendTemplate"); curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false); curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false); curl_setopt($ch, CURLOPT_POST, true); curl_setopt($ch, CURLOPT_POSTFIELDS, http_build_query(array("channel" => "通道名","username"=>"你的用户名","key"=>"你的key","phone"=>$phone,"template" => "模板名","param" => "{\"code\":\"$code\"}","send_type" => "1","send_time" => $time))); curl_setopt($ch, CURLOPT_RETURNTRANSFER, true); curl_exec($ch); ?> ``` 最后修改:2024 年 04 月 14 日 © 允许规范转载 打赏 赞赏作者 支付宝微信 赞 3 如果觉得我的文章对你有用,请随意赞赏